Google Tag Manager

Forum Discussion

David_M's avatar
David_M
Influencer
9 hours ago

Using Liquid for image URL

Hi all, 

I have done this before, but seem to be having issues when using liquid within the SRC html code. 

So wondering what we think the best way is to handle an image within a BAU email that has to be hard-coded each day in 13 languages (or 13 image urls to be specific)

Currently I think the tidiest way is the full image code snippet in a content block per language, and each day update the URLS, and use liquid if statements to add the correct Content Block per language within the HTML template. 

Other options are assigning the image URL at the top of the HTML. 

I have to do this for two images in the full template. 

Thoughts? 


Email

2 Replies

  • Nirnay's avatar
    Nirnay
    Mentor
    1 hour ago

    Hi David_M​ 

    How about using a Catalog as a controller with the below structure? It's much cleaner and your HTML template never needs to be touched again. All image updates are managed straight from the catalog table.

    | id | hero_img_url | footer_img_url |

    |-----|-------------|----------------|

    | en | https://... | https://... |

    | fr | https://... | https://... |

    | de | https://... | https://... |

    The id maps directly to the language attribute on the user profile. Then in your template, just add this Liquid once at the top (or store it in a content block and call the contentblock) :

    {% assign lang = {{${language}}} | default: 'en' | downcase %}
{% catalog_items daily_images {{lang}} %}
{% if items[0] == blank %}
  {% catalog_items daily_images en %}
{% endif %}

    And reference the images in your HTML like this:

    • <img src="{{ items[0].hero_img_url }}" width="600">
    • <img src="{{ items[0].footer_img_url }}" width="600">

    No if/else statements for each language. No HTML edits. The catalog lookup handles all 13 languages dynamically in one go.

    Each day, the only job is to update the URLs in the catalog table.

    And tomorrow if you want to automate this process, you can use the Catalog API to update the relevant language image URLs in one single PATCH call. Pipe it straight from your CMS or DAM and it's fully hands-off.

    Hope this helps!

  • jerome_ahkan's avatar
    jerome_ahkan
    Supporter
    1 hour ago

    Hey David_M​, I think both ways would work, but I would kind of lean towards the assigning image URL at the top of the HTML.

    The only reason I lean towards that method would be that housing entire snippets of HTML in content blocks to then reference in the HTML may possibly get messy and harder to maintain over times.

    Housing all the images upfront in the body of the HTML means that you can see everything in it's entirety and only requires 1 update (all 13 images upfront) as opposed to changing 13 different content blocks, requiring all of which to be updated each day (just increases chance of error).

    You would be able to reference the 13 images by liquid, so like as an example

    {% if ${language} == 'en' %}
      {% assign language_image = 'english image url' %}
    {% elsif ${language} == 'es' %}
      {% assign language_image = 'spanish image url' %}
    {% else %}
      {% assign language_image = 'default image url' %}
    {% endif %}

     and then reference your image source in the HTML with

    <img src="{{language_image}}" alt="" style="display:block;">

    those are just my thoughts! 😀