Displaying tags on product pages as images.

[Owen_Jinks]

Hi, I've figured out how to display the tags on my product pages. However I'm wondering is there a way to get the tags themselves to display as predefined images? 

For example can I assign a tag to a particular image and each time that tag is used on a product it will display the little image icon linked to that tag instead of the name of the tag?

Thanks.

[Jason]

Hey Owen,

Instead of showing the text "foo" (for example) you wan't to see an image like foo.png. Is that right?

If we're only talking about a couple of tags you can just add some code to check for the tag, and then show an associated image. For example:

{% if product.tags contains 'foo' %}
  <img alt="foo" src="{{ 'foo.png' | asset_url }}" />
{% endif %}

The image would be uploaded into your themes asset folder. 

There's fancier ways this could be handled, but for a small amount of tags this is pretty easy to add in.

[Owen_Jinks]

Ah, so simple! Works perfectly. Thankyou Jason.

[David_Shave]

Jason - I have tons of tags! Whats the fancier way? We need a loop based solution as doing them individually is getting unmanageable.

If a product has tags: 'xboxlive', 'nintendo' and I upload xboxlive.png and nintendo.png to the assets folder can I call these images based on tag?

Or is there a easier way of calling an image based on the tags?

[tim]

Hi David,

the loop may look like this:

    {% for tag in product.tags %}
        {% assign tag-file = tag | append: ".png" %}
        <img src="{{ tag-file | asset_img_url: "32x" }}" 
             onError="style.display = 'none';"
        >
    {% endfor %}

Cool thing here is the onError part -- it will hide the broken link pic if there is no file uploaded for this tag. 

[David_Shave]

Tim, thanks so much for your reply.

What would be really cool is if there was someway to prepend a string to the image filename. For example 'icon-image_' so I can build filenames like 'icon-image_nintendo.png'.

Also, I really need to be able to stop the image size identifier, eg "x32" or "small" from being added to the end of the filename.

Is it possible?

[David_Shave]

(Simpsons Homer): doh!

I amswered my own question!!

just go 

{% assign tag-file = tag | prepend: "icon-image_" | append: ".png" %}

thanks for the initial direction tho!

[JoanaTGBC]

Hi Tim!

I know it has been a couple of years since you have posted this :)

But I am trying to add this to my product pages, and although I have been able to add it, it repeats a lot (see image below) Is there any way to make the icons appear only once?

[jrltrend]

Hello! I have tried and tried... How can i get picture insteed of text on this tags