Product images squashed in notifications

Solved
Tourist
11 0 1

I'm sending stock Shopify notifications that include the 'compact' version of a square product image (this is Shopify's resized version).

 

On mobile, they look fine. On desktop, specifically Gmail in Chrome, they look squished vertically, probably at a ratio of 1:4 W:H. The image linked (above) in the email is 1:1 aspect, and the code (stock code) is the usual 

<img src="{{ line.line_item | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>

... here's what I'm seeing in a test email (and in live emails):

screenshot_1079.jpg

 

Any idea what's up? I've searched quite a bit for an answer to this ... the guidelines call for square images - my original is 983x983 PNG, 24-bit, with alpha. 

 

Any help would be appreciated.

 

Thanks!

0 Likes
Trailblazer
494 120 163

Hi, @needmoredata ,

This is Evita from On The Map.

 

Can you add your store URL?

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Highlighted
Shopify Staff
Shopify Staff
267 20 36

Hi, @needmoredata.

 

Tira here, from Shopify!

 

This is a great question about resizing images in your Shopify notifications. We typically do not provide support with coding customizations, however I did do some digging here for you.

 

By default, images are cropped within email notifications. The code that you found here, is what controls the cropping of images in your emails. If you're comfortable with modifying the code in your notifications, you can adjust the code so that the images aren't cropped based on the device and browser that you are viewing them on. 

 

You'll want to change the "compact_cropped" part of the code to one of the size parameters listed in our help doc here: Size Parameters. If you want to avoid stretching out the image, you can remove or change the "height" and "width" parameters of the liquid code. 

 

For example, if you wanted to adjust your image size to 450 x 450 for a ratio of 1:1:

<img src="{{ line.line_item | img_url: '450x450' }}" align="left" class="order-list__product-image"/>

This will display the image based on the size specifications without stretching the image.

 

If you require additional assistance with this, I can send this up to our design team for you to take a look into further for you. Please let me know if you would like me to do that by replying to this thread, and I'll send you an email to the email listed in your profile to get things started!

 

If you have any other questions, please let me know!

Tira | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes

Success.

Hello 

If you want not compact images then you used image size not use compact crop.

Use below tag

<img src="{{ line.line_item | img_url: '450x450' }}" align="left" class="order-list__product-image"/>

@needmoredata wrote:

I'm sending stock Shopify notifications that include the 'compact' version of a square product image (this is Shopify's resized version).

 

On mobile, they look fine. On desktop, specifically Gmail in Chrome, they look squished vertically, probably at a ratio of 1:4 W:H. The image linked (above) in the email is 1:1 aspect, and the code (stock code) is the usual 

<img src="{{ line.line_item | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>

... here's what I'm seeing in a test email (and in live emails):

screenshot_1079.jpg

 

Any idea what's up? I've searched quite a bit for an answer to this ... the guidelines call for square images - my original is 983x983 PNG, 24-bit, with alpha. 

 

Any help would be appreciated.

 

Thanks!


 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
Tourist
11 0 1

Hi all - thanks for your help.

 

The documentation link was especially helpful, but while changing the image_url parameter to a larger (but square) resolution shows the image resizing as expected in the Shopify preview, test emails all come through (in Gmail) with a teeny tiny image regardless of what resolution I try.

 

For example, this is what I get with the following code:

<img src="{{ line | img_url: '250x250'}}" align="left" class="order-list__product-image"/>

screenshot_1083.jpg

... for the purposes of this line and the surrounding table, I'm using the stock Shopify order confirmation notification template. From the template, this is the beginning of the surrounding table:

<table class="row">
  {% for line in subtotal_line_items %}
  <tr class="order-list__item">
    <td class="order-list__item__cell">
      <table>
        <td>
          {% if line.image %}
            <img src="{{ line | img_url: '250x250'}}" align="left" class="order-list__product-image"/>
          {% endif %}

 

For reference, here's what the preview looks like with the same code:

screenshot_1084.jpg

 

... that's 250x250. 

 

Any further help would be appreciated.

 

0 Likes
Tourist
11 0 1

@oscprofessional @Tira any thoughts on the above? Any help would be appreciated -- still not sure how to tackle this.

0 Likes
Shopify Staff
Shopify Staff
267 20 36

Since we are not trained in coding, I can send up your inquiry to our design team to help you with this customization.

 

I have sent you an email to the email address on your profile. Please take a look at your inbox. Once I hear from you, I can send this to our team!

 

Thank you!

Tira | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Tourist
11 0 1

Hey @Tira thanks for getting back to me on this - after some more testing I've come to the conclusion that an extension to Gmail was responsible for this. 

 

I think I'm all good and will mark a previous solution as accepted. Thanks!

1 Like