How to display text based on product image alt text

NiTride
Excursionist
42 3 1

Hi all,

I am currently trying to make text appear in front of an image if it has the specific alt tag only. I have the following code but it doesn't seem to work. I do not know how to get the exact alt tag of the displayed image. Could any one help. I currently have the code shown below, which seems to display the text over all the images if only one variant image has the correct alt tag. I only want the specific variant images with the alt tag to hold the text, not all of the images.

 

 

 

 

{% for image in product.images %}
  {% if image.alt == "digitalrender" %}

<a class="rendertext" >DIGITAL RENDER</a>

<style>

  .rendertext {

  background-color: #197BBD;
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
  
}

</style>

  {% endif %}
{% endfor %}

 

 

 

0 Likes
JHKCreate
Shopify Partner
1962 313 418

Hi @NiTride,

Try contains instead of == and let us know what the output is. 

Cheers!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
NiTride
Excursionist
42 3 1

Nope, it doesn't change anything I already tried it. I'm sure I know what the issue is I'm just not familiar with what code would do what I want.

From my testing the issue is "image.alt" as it doesn't output the specific images alt text but instead outputs all of the "products images" alt text instead. When I use this code shown below.

 

{% for image in product.images %}

{{image.alt}}

 

The output becomes every single alt text in that product, rather than just the one product image being shown. Any ideas how to overcome this?

0 Likes
NiTride
Excursionist
42 3 1

Doing some research I have found a something that might be useful however I don't know how to use it

 

product.selected_or_first_available_variant

I am sure this is the answer however I can't figure out how to code this.

 

I would need to do something like this however I am not an expert with the liquid code so don't know how to implement this concept. I would like it to do what I am saying below. This code below is incorrect syntax however it may convey what I am trying to do.

 

{% for image in product.images %}

{% if image.alt of product.selected_or_first_available_variant contains "digitalrender" %}

<a class="rendertext" >DIGITAL RENDER</a>


{% endif %}
{% endfor %}

0 Likes
NiTride
Excursionist
42 3 1

The answer to this may also need to use this code as well

 

Variant.image

0 Likes
NiTride
Excursionist
42 3 1

I figured out how to output the selected and displayed images alt tag, but don't know how to put this into a loop and add the condition

{{ product.selected_variant.image.alt }}

 

Can anyone help with this information.

0 Likes