Collection Grid Resize - Outlane - Universe Theme

brendin_venter1
New Member
3 0 0

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>​
0 Likes
paramSoft
Shopify Partner
1490 243 692

Please provide website url and if your store is password protected then also provide password

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
brendin_venter1
New Member
3 0 0

carnistore.com - Thank you

0 Likes
brendin_venter1
New Member
3 0 0
0 Likes
paramSoft
Shopify Partner
1490 243 692

You can not set the height of images same but you can make the images in center like this

paramSoft_0-1612775613080.png



If you want this then please let me know

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes