Solved

Formatting the Instagram Feed In Klaviyo Emails

  • 22 September 2022
  • 1 reply
  • 34 views

Badge

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?

icon

Best answer by Omar 23 September 2022, 03:54

View original

1 reply

Userlevel 6
Badge +30

@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

Reply