How to display text based on product image alt text

[NiTride]

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 %}

[JHKCreate]

Hi @NiTride,

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

Cheers!

[NiTride]

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?

[NiTride]

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 %}

[NiTride]

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

Variant.image

[NiTride]

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.