Change Product.Liquid to Display First 2 Images Only?

Charles_Coleman
Tourist
20 0 2

Hi Guys,

Now that I have added a couple more images to our product, the actual product page just doesnt look right with the images now streaming down the page. I want to tell the Product.liquid to only display the 1st 2 images in the gallery, can anyone help me with this? Below is a paste of the section in my product.liquid that I feel I need to edit.

Any help would be much appreciated. :-)

 <div class="grid product-single">
    <div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">
      <div class="product-single__photos">
        {% assign featured_image = current_variant.featured_image | default: product.featured_image %}

        {% comment %}
          Display current variant image, or default first
        {% endcomment %}
        <div class="product-single__photo-wrapper">
          <img class="product-single__photo" id="ProductPhotoImg" src="{{ featured_image | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %} alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
        </div>

        {% comment %}
          Display rest of product images, not repeating the featured one
        {% endcomment %}
        {% for image in product.images %}
          {% unless image contains featured_image %}
            <div class="product-single__photo-wrapper">
              <img class="product-single__photo" src="{{ image.src | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
            </div>
          {% endunless %}
        {% endfor %}
      </div>
    </div>

    <div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">
      <div class="product-single__meta">
        {% if settings.product_vendor_enable %}
          <h2 class="product-single__vendor" itemprop="brand">{{ product.vendor }}</h2>
        {% endif %}

Thanks in advance for any help... we are learning.

 

0 Likes
Alex135
Astronaut
1889 1 463

Add in the marked lines (>>>).

        {% comment %}
          Display rest of product images, not repeating the featured one
        {% endcomment %}
>>>     {% assign image_count = 0 %}
        {% for image in product.images %}
          {% unless image contains featured_image %}
            <div class="product-single__photo-wrapper">
              <img class="product-single__photo" src="{{ image.src | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
            </div>
>>>         {% assign image_count = image_count | plus: 1 %}
          {% endunless %}
>>>       {% if image_count >= 2 %}{% break %}{% endif %}
        {% endfor %}

I hope this helps.

0 Likes
Charles_Coleman
Tourist
20 0 2

It reduced the images displayed to 3, so almost there. :-)

Thanks so much for your help. Im going to play around with your code to try and get it down to just 2 displayed.

 

0 Likes
Twinkle_34
Tourist
7 0 0

Hello 

limit:2 fetches the first two product images 

Thankyou 

0 Likes