Hide Featured Image on Product Page

Highlighted
Excursionist
16 0 14

The Turbo theme added support for Shopify's AR and 3D  media and my fix to hide the featured image  and associated thumbnail on my product page isn't working anymore.   In other words, I only want the 2nd image (and 3rd) to show on the product page itself with the featured image only showing on the collection page.

 

Previously, adding 

{% if image != featured_image %}

 

after 

{% for image in product.images %}

 

in the products.images snippet hid the first (featured) image on the product page (suggested in another forum post).

 

Any suggestions? Thanks in advance. 

 

Current code below:

 

________

 

{% comment %}
Optional
---------
set_product_height: <boolean>
quickshop: <boolean>
{% endcomment %}

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
{% capture list %}
{% for image in product.images %}
{% comment %}Loop through images only once{% endcomment %}
{{ image.id }}`~`{{ image.alt }}`~`{{ image | img_url: '100x' }}`~`{{ image | img_url: '200x' }}`~`{{ image | img_url: '400x' }}`~`{{ image | img_url: '600x' }}`~`{{ image | img_url: '800x' }}`~`{{ image | img_url: '1200x' }}`~`{{ image | img_url: '2000x' }}`~`{{-image.width-}}px`~`{{-image.height-}}px{{ image | product_img_url: '5000x' }}{% if forloop.last == false %}^{% endif %}
{% endfor %}
{% endcapture %}
{% assign image_list = list | split: "^" %}

{% style %}
.shopify-model-viewer-ui model-viewer {
--progress-bar-height: 2px;
--progress-bar-color: {{ settings.regular_color }};
}
{% endstyle %}

<div class="clearfix
gallery-wrap
gallery-arrows--{{ section.settings.gallery_arrows }}
{% if set_product_height != blank %}product-height-set{% endif %}
gallery-thumbnails--{{ section.settings.thumbnail_position }}">
<div class="product_gallery js-product-gallery product-{{ product.id }}-gallery
transparentBackground--{{ settings.slideshow_button_style }}
slideshow_animation--{{ section.settings.slideshow_animation }}
popup-enabled--{{ section.settings.enable_product_lightbox }}
show-gallery-arrows--{{ section.settings.gallery_arrows }}
{% if product.media.size > 1 %} multi-image {% else %} single-image {% endif %}"
data-thumbnails-enabled="{{ section.settings.product_thumbs }}"
data-gallery-arrows-enabled="{{ section.settings.gallery_arrows }}"
data-slideshow-speed="{{ section.settings.slideshow_speed }}"
data-slideshow-animation="{{ section.settings.slideshow_animation }}"
data-thumbnails-position="{{ section.settings.thumbnail_position }}"
data-thumbnails-slider-enabled="{{ section.settings.enable_thumbnail_slider }}"
data-zoom="{{ section.settings.activate_zoom }}"
data-video-loop="{{ section.settings.video_looping }}"
data-product-id="{{ product.id }}"
data-product-lightbox="{{ section.settings.enable_product_lightbox }}"
data-media-count="{{ product.media.size }}"
data-product-gallery>

{% for media in product.media %}
<div class="gallery-cell" data-product-id="{{ product.id }}" data-media-type="{{ media.media_type }}" data-thumb="{{ image_large }}" data-title="{% if image_alt contains 'youtube' or image_alt contains 'vimeo' %}{{ product.title }}{% else %}{{ image_alt | escape }}{% endif %}">
{% case media.media_type %}
{% when 'image' %}

{% capture image_id %}{{ media.id }}{% endcapture %}
{% capture image_alt %}{{ media.alt | escape }}{% endcapture %}
{% capture image_100x %}{{ media | img_url: '100x' }}{% endcapture %}
{% capture image_200x %}{{ media | img_url: '200x' }}{% endcapture %}
{% capture image_400x %}{{ media | img_url: '400x' }}{% endcapture %}
{% capture image_600x %}{{ media | img_url: '600x' }}{% endcapture %}
{% capture image_800x %}{{ media | img_url: '800x' }}{% endcapture %}
{% capture image_1200x %}{{ media | img_url: '1200x' }}{% endcapture %}
{% capture image_2000x %}{{ media | img_url: '2000x' }}{% endcapture %}
{% capture image_5000x %}{{ media | img_url: '5000x' }}{% endcapture %}

{% if image_alt contains 'youtube' or image_alt contains 'vimeo' %}

{% assign alt_text = image_alt | split: ' ' %}
{% for property in alt_text %}
{% if property contains "src" %}
{% assign cleanURL = property | remove: 'src=' | remove: '&quot;' | remove: '"' %}
<div class="product-gallery__video" data-youtube-video>
<iframe src="{{ cleanURL }}" frameborder="0"></iframe>
</div>
{% endif %}
{% endfor %}

{% else %}

{% if section.settings.enable_product_lightbox and product.images.size > 0 %}
<a href="{{ image_5000x }}"
class="lightbox"
data-fancybox="{{ product.id }}"
rel="product-lightbox" tabindex="0">
{% endif %}
<div class="image__container" style="max-width: {{original_image_width}}">
{% if product.images.size > 0 %}
<img src="{{ image_100x }}"
alt="{{ image_alt | escape }}"
class=" lazyload {{ settings.image_loading_style }}"
data-image-id="{{ product.media[forloop.index0].id }}"
data-index="{{ forloop.index0 }}"
data-sizes="{% if section.settings.enable_product_lightbox %}100vw{% else %}auto{% endif %}"
data-aspectratio="{{ original_image_height }}/{{ original_image_width }}"
data-src="{{ image_2000x }}"
srcset=" {{ image_200x }} 200w,
{{ image_400x }} 400w,
{{ image_600x }} 600w,
{{ image_800x }} 800w,
{{ image_1200x }} 1200w,
{{ image_2000x }} 2000w"
/>
{% else %}
<img src="{{ image | img_url: 'master' }}" />
{% endif %}
</div>
{% if section.settings.enable_product_lightbox and product.images.size > 0 %}
</a>
{% endif %}
{% endif %}
{% when 'external_video' %}
<div class="product-gallery__video" data-youtube-video>
{{ media | external_video_tag }}
</div>
{% when 'video' %}
<div class="product-gallery__video" data-html5-video>
{{ media | video_tag: controls: true }}
</div>
{% when 'model' %}
<div class="product-gallery__model">
{{ media | model_viewer_tag: reveal: 'interaction', toggleable: true, image_size: '800x800' }}
</div>
{% else %}
{{ media | media_tag }}
{% endcase %}
{% assign has_model = product.media | where: "media_type", "model" | first %}
{% if has_model %}
<button class="action_button view-in-your-space" data-shopify-xr data-shopify-model3d-id="{% if media.media_type == 'model' %}{{ media.id }}{% else %}{{ has_model.id }}{% endif %}" data-shopify-title={{ product.title }} style="display: none;">
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 9L22.0622 12.5V19.5L16 23L9.93782 19.5V12.5L16 9Z" stroke="#3A3A3A" stroke-width="1.5"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 23V15.6024C16.6225 15.2002 16.6225 15.2002 16.6225 15.2002L22 12V19.4082L16 23Z" fill="#3A3A3A"/>
</svg>
{{ 'products.product.view_in_your_space' | t | capitalize }}
</button>
{% endif %}
</div>
{% endfor %}
</div>

{% if section.settings.product_thumbs %}
{% if image_width != 'full' %}
<div class="product_gallery_nav product_gallery_nav--{{ section.settings.thumbnail_position }} product-{{ product.id }}-gallery-nav">
{% if product.media.size > 1 %}
{% for media in product.media %}

{% if media.media_type contains 'video' %}
{% assign thumbnail_badge = 'video-thumbnail' %}
{% elsif media.media_type contains 'model' %}
{% assign thumbnail_badge = '3d-thumbnail' %}
{% else %}
{% assign thumbnail_badge = '' %}
{% endif %}

<div tabindex="0" class="gallery-cell" data-title="{{ image_alt | escape }}">
<img src="{{ media | img_url: '300x' }}" alt="">
{% if thumbnail_badge == 'video-thumbnail' %}
<svg class="media-badge" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 25H25V1H1V25Z" fill="white"/><path class="media-badge__outline" d="M0.5 25V25.5H1H25H25.5V25V1V0.5H25H1H0.5V1V25Z" stroke="black" stroke-opacity="0.05"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.19995 5.8V20.2L19.3999 12.5858L8.19995 5.8Z" fill="#3A3A3A" fill-opacity="0.6"/></svg>
{% elsif thumbnail_badge == '3d-thumbnail' %}
<svg class="media-badge" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 25H25V1H1V25Z" fill="white"/><path class="media-badge__outline" d="M0.5 25V25.5H1H25H25.5V25V1V0.5H25H1H0.5V1V25Z" stroke="black" stroke-opacity="0.05"/><g opacity="0.6"><path fill-rule="evenodd" clip-rule="evenodd" d="M13 6L19.0622 9.5V16.5L13 20L6.93782 16.5V9.5L13 6Z" stroke="#3A3A3A" stroke-width="1.5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13 20V12.6024C13.6225 12.2002 13.6225 12.2002 13.6225 12.2002L19 9V16.4082L13 20Z" fill="#3A3A3A"/></g></svg>
{% endif %}
</div>
{% endfor %}
{% endif %}
</div>
{% endif %}
{% endif %}
</div>

0 Likes