Shopify themes, liquid, logos, and UX
Seeking assistance with code to hide the "No Image" placeholder image and recover that page space based on something like:
{%- if img_url contains "no-image" -%} style="display: none;" {%- endif -%}
Shopify's "no image" default URL is:
https://cdn.shopify.com/shopifycloud/shopify/assets/no-image-...
Theme is Radiance
(Update) OR:
{%- unless product.img_url contains "no-image" -%} do this:
<div id="product-gallery"{% if settings.main_image_display == 'Zoom-in' %} class="zoom-in" {% endif %}>
<div id="active-wrapper">
{% if settings.main_image_display == 'Lightbox' %}
<a href="{{ product.featured_image | product_img_url: 'original' }}" width="480" height="384" title="{{product.vendor}} {{ product.title | escape }}" rel="fancybox">
{% endif %} <br>
<img style="max-width:250px" src="{{ product.featured_image | product_img_url: 'large' }}" alt="{{ product.title | escape }}" id="large-thumb" />
{% if settings.main_image_display == 'Lightbox' %}
</a>
{% endif %}
<p></p>
<span class='model-title'>{{ product.title }} | GENUINE {{product.vendor}}</span>
<p></p>
<p><b> CLICK IMAGE TO ZOOM IN </b> </p>
</div>
<ul id="thumbs" {% if product.images.size == 1 %}class="visuallyhidden"{% endif %}>
{% for image in product.images %}
{% unless forloop.first and settings.main_image_display == 'Lightbox' %}
<li>
<a{% if settings.main_image_display == 'Lightbox' %} rel="fancybox"{% endif %} class="gallery" href="{{ image | product_img_url: 'original' }}" title="{{ image.alt | escape }}">
<img src="{{ image | product_img_url: 'thumb' }}" alt="{{ image.alt | escape }}"/>
</a>
</li>
{% endunless %}
{% endfor %}
{% endunless %}
Thank you!
Hi @SeekingLiquid,
no-image means images that do not exist. So you need if image instead of url. Ex:
{% if image %} or {% if image != blank %}
Hope it clear to you.
Thank you! It seems that {% if image != blank %} removes all images of any kind (blank and not blank) from:
Hi @SeekingLiquid,
It's not an if that covers the entire code, it's just an if at the image location. Ex:
{% if product.featured_image %}
<img style="max-width:250px" src="{{ product.featured_image | product_img_url: 'large' }}" alt="{{ product.title | escape }}" id="large-thumb" />
{% endif %}
Therefore, no-images will not be displayed.
Hope it clear to you.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024