Liquid, JavaScript, themes, sales channels
I'm using the Universe Theme from outlane which is great but they refuse to help me with this.
We really need all images to have the same ASPECT RATIO and I believe you can do it using the below code.
{{ product.featured_image | img_url: '450x450' }}
However, the below code is what exists and I've tried several variations to get it fixed but can't figure it out.
I am comfortable with changing code, just not smart enough to know why when I overwrite the below I get nowhere 😂
Thank you.
<a href="{{ the_product.url | within: collection }}" class="product-loop-image {% if settings.display_secondary_image %}secondary-image-enabled{% endif %}">
{%- assign img_url = the_product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% unless the_product.featured_image == blank %}
{% if settings.display_secondary_image %}
{%- assign secondary_img = the_product.images[1] -%}
{% endif %}
<img class="lazyload product-image_featured {% unless secondary_img == blank %} product-image_secondary-enabled {% endunless %}" src="{{ the_product.featured_image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ the_product.featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ the_product.featured_image.alt | escape }}">
{% if settings.display_secondary_image %}
{% unless secondary_img == blank %}
<div class="lazyload product-image_secondary"
style="background-image: url('{{ secondary_img | img_url: 'large' }}');"
data-bgset="{% include 'bgset', image: secondary_img %}"
data-sizes="auto"
data-parent-fit="cover">
</div>
{% endunless %}
{% endif %}
</a>
<a href="{{ the_product.url | within: collection }}" class="product-loop-image {% if settings.display_secondary_image %}secondary-image-enabled{% endif %}">
{%- assign img_url = the_product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% unless the_product.featured_image == blank %}
{% if settings.display_secondary_image %}
{%- assign secondary_img = the_product.images[1] -%}
{% endif %}
<img class="lazyload product-image_featured {% unless secondary_img == blank %} product-image_secondary-enabled {% endunless %}" src="{{ the_product.featured_image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ the_product.featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ the_product.featured_image.alt | escape }}">
{% if settings.display_secondary_image %}
{% unless secondary_img == blank %}
<div class="lazyload product-image_secondary"
style="background-image: url('{{ secondary_img | img_url: 'large' }}');"
data-bgset="{% include 'bgset', image: secondary_img %}"
data-sizes="auto"
data-parent-fit="cover">
</div>
{% endunless %}
{% endif %}
</a>
Please provide website url and if your store is password protected then also provide password
carnistore.com - Thank you
Sorry this the new theme URL: https://fmjabg4t2ojnkoqf-33772208268.shopifypreview.com/
You can not set the height of images same but you can make the images in center like this
If you want this then please let me know
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024