Skip to main content
Solved

Formatting the Instagram Feed In Klaviyo Emails

  • September 22, 2022
  • 1 reply
  • 235 views

Forum|alt.badge.img+2

Hello, I’ve been playing around with the instagram feed code in my emails, I’d like for the emails to show up as squares and not have the images skewed at all. Is there a way to change the code to achieve this? This is what I’ve gotten so far:

 

Here’s the normal code and it’s results

<div>{% for item in feeds.FEED_NAME.rss.channel.item|slice:":3" %}
<table style="display:inline-block; margin-left:auto; margin-right:auto">
	<tbody>
		<tr>
			<td style="padding-right:15px;padding-left:18px; width:150px"><a href="{{ item.link }}">
			<img src="{% if item|lookup:'media:content'|lookup:'0'|lookup:'@url' %}{{ item|lookup:'media:content'|lookup:'0'|lookup:'@url' }}{% else %}{{ item|lookup:'media:content'|lookup:'@url' }}{% endif %}" style="margin: 1px; max-width: 150px; height: auto;" /></a>
			</td>
		</tr>
	</tbody>
</table>
{% endfor %}</div>
<div>{% for item in feeds.FEED_NAME.rss.channel.item|slice:":3" %}
<table style="display:inline-block; margin-left:auto; margin-right:auto">
	<tbody>
		<tr>
			<td style="padding-right:15px;padding-left:18px; width:150px"><a href="{{ item.link }}">
			<img src="{% if item|lookup:'media:content'|lookup:'0'|lookup:'@url' %}{{ item|lookup:'media:content'|lookup:'0'|lookup:'@url' }}{% else %}{{ item|lookup:'media:content'|lookup:'@url' }}{% endif %}" style="margin: 1px; width: 150px; height: 150px;" /></a>
			</td>
		</tr>
	</tbody>
</table>
{% endfor %}</div>

Then here  above I changed the width and height variables here and it’s kind of closer to what I want but not exactly now

 

As you can see the result is skewing the images. I’d like for the images to be zoomed in and cropped. Is there a way to change the code to achieve this?

Best answer by Omar

@email4ecom that's an interesting case.

So setting the images with a fixed width and height will probably solve the problem only if the images are all the same dimensions. If they're not you will start seeing strange behavior. 

Maybe setting a background color that fills up the aread and then adding the image only with a height or width can somehow solve this. Align them vertically and horizontally. 

It's just not possible to change  rectangle in a square without changing the dimensions of it and getting it to show distorted/skewed.

 

Hope it makes sense?

Regards,

Omar Lovert // Polaris Growth // Klaviyo Master Platinum Partner

View original
Did this topic or the replies in the thread help you find an answer to your question?

1 reply

Omar
Partner - Platinum
Forum|alt.badge.img+46
  • 2025 Champion
  • 494 replies
  • Answer
  • September 23, 2022

@email4ecom that's an interesting case.

So setting the images with a fixed width and height will probably solve the problem only if the images are all the same dimensions. If they're not you will start seeing strange behavior. 

Maybe setting a background color that fills up the aread and then adding the image only with a height or width can somehow solve this. Align them vertically and horizontally. 

It's just not possible to change  rectangle in a square without changing the dimensions of it and getting it to show distorted/skewed.

 

Hope it makes sense?

Regards,

Omar Lovert // Polaris Growth // Klaviyo Master Platinum Partner