How to use the cropZoom() for img tags

1

I am using the Instagram plugin and have got it to display my images. The thumbnails are displaying in different sizes, however. I would like to use the cropZoom(700, 700) to set a fixed size for the thumbnails, but am failing.

Here is my twig file

{% if feed %}
	{% for post in feed|slice(0, count)  %}
		<div class="columns item instagram">
			<div class="item-wrap">
			<a href="{{ post.link }}" target="_blank" >
				<img src="{{ post.image }}" alt="">
				<div class="overlay"></div> 
								<div class="link-icon"><i class="icon-plus"></i></div>
			</a>
			</div>
		</div> 
	{% endfor %}
{% else %}
<p><b>
	Could not load the Instagram feed! Please contact the owner of this site.
</b></p>
{% endif %}
2

Hi duceduc,

I’m not sure you can do that, or want to do it if you could, because you would be saving the image on your server every time.

You can handle that with css tho:

.instagram .item-wrap { width: 700px }; /* you can have any width here (px, vw, %, etc.) */
.instagram .item-wrap a { width: 100%; height: 0; padding-top: 100% }
.instagram .item-wrap a img { width: 100%; height: 100%; object-fit: cover; }
3

Thanks for the reply. How do I add this css to the file?

4

In the user/themes/<theme_name>/css/ folder, add a file instagram.css (or any name you like) and paste the above code in that file.

After that open the user/themes/<theme_name>/templates/partials/base.html.twig file and add:

{% do assets.addCss('theme://css/instagram.css') %}

in the {% block stylesheets %} at the top of the page

5

@Dzibus
Thanks again for the help. I have added your suggestion, but it’s not quite resizing the way I want it.The theme I am using is the woo. I copy the same screenshot section of the theme.

At one point, the plugin was working fine and I didn’t had to re-style the image. It worked with the existing css. The size was a bit smaller compared to the default, but it was equal and spaced out in size. There was an update to Instagram API and the plugin was updated. That is when the change happened.

I think to have a square layout, it has to be modify at the plugin. Something to do with Instagram api.

Here is the screen shot of before your css.

before-css-applied.jpg1039×741 182 KB

Here is a screenshot of after your css applied.

after-css-applied.jpg1173×1150 350 KB

6

Sorry for a late reply.
Based on the Git page of Instagram API you say you use, last update was a year ago, so I’m not sure what changed and broke your code.

Anyway, it sounds like you are not pulling the .css file that styles the grid (that would be layout.css in your theme), or you are missing some classes on elements.

Try putting:

<div id="screenshots-wrapper" class="bgrid-quarters s-bgrid-thirds cf">

in between if and for and close it with between endfor and endif

if that doesn’t work, I can’t help you without looking at the rest of the code (sadly, I don’t have time for that now).

Good luck.