Hide Image Placeholder and No Image based on img_url contains

SeekingLiquid
Visitor
2 0 0

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!

Replies 3 (3)

namphan
Shopify Partner
205 31 45

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.

Shopify Development Service
SeekingLiquid
Visitor
2 0 0

Thank you! It seems that {% if image != blank %} removes all images of any kind (blank and not blank) from:

 
{% if image != blank %}
<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 %}
 
 <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>
  {% if product.images.size > 0 %}
<img class="list-view-item__image" src="ur text" alt="ur text">
  <br>
 
 <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> {% endif %}
 </li>
 
  {% endunless %}
 {% endfor %}
{% endif %}
namphan
Shopify Partner
205 31 45

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.

Shopify Development Service