Show second image if exists

Cristina_Valenc
Tourist
3 0 2

Hi

 

I've this code on product-grid-item.liquid to show second image when mouse over

  <a href="{{ product.url | within: current_collection }}" class="product-grid-item foo">
    <div class="product-grid-image">
      <div class="product-grid-image--centered">
        {% if sold_out %}
          <div class="badge badge--sold-out"><span class="badge-label">{{ 'products.product.sold_out' | t }}</span></div>
        {% endif %}      
        <img  src="{{  product.images[0] | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
        <img  src="{{  product.images[1] | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape  }}"/>

        
        
      </div>
    </div>

And this code on my CSS file

 

.foo img:last-child{display:none}
.foo:hover img:first-child{ display:none;}
.foo:hover img:last-child{display:inline-block}

But when second image not exists only show default image

You can see example here 

http://www.pinatas.com/collections/custom-wedding-pinatas 

My question is

 

How can I fix the code to show primary image when second images not exists

 

Thanks

0 Likes
Cristina_Valenc
Tourist
3 0 2

Somebody can help me, thanks

0 Likes
Cristina_Valenc
Tourist
3 0 2

Resolved

 

  <img  src="{{  product.images[0] | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
        
        {% if product.images.size == 1 %} 
     <img  src="{{  product.images[0] | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
{% else %}
  <img  src="{{  product.images[1] | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape  }}"/>
{% endif %}

 

attotasolutions
Shopify Partner
12 0 5

Hi,

You can get 2nd product image in collections page using the following snippet.

{% if product.images.size == 1 %} 
	{% assign my_product_image =  product.images[0] %}
{% else %}
	{% assign my_product_image =  product.images[1] %}
{% endif %}

<img  src="{{  my_product_image | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
or
<img  src="{{  my_product_image | product_img_url: '1000x' }}" alt="{{ product.featured_image.alt | escape }}">
0 Likes
kayateboul
New Member
3 0 0

hi if i have theme dubot , where to put the script please?

0 Likes