Created
July 8, 2021 10:22
-
-
Save stirtingale/d5c1dcc8cd4e85172f6a5e0cc5116179 to your computer and use it in GitHub Desktop.
Return flex / responsive image in Shopify Liquid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% assign width = product.featured_image.width | times: 1.00 %} | |
| {% assign height = product.featured_image.height | times: 10000.00 %} | |
| {% assign padding = height | divided_by: width | divided_by: 100 %} | |
| <div class="flex-image fit --zoom" style="padding-bottom:{{padding}}%"> | |
| <img class="lazy" data-src="{{ product.featured_image | img_url: '450x' }}" alt="{{ link.title }}"> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment