Feb 13, 201912:27 PM - edited Feb 21, 201910:48 AM
Member
Repeating Linked Images in Email
SOLVE
EDIT: I went back and reread my post, and realized that I hadn't pasted the code for the links. I've updated the snippets and added my (failed) attempt at nesting them.
I'm trying build a module for repeating linked images, but not having much luck. My current attempt has been to add an Image Field and a Link Field, and nest them, but either I'm approaching this worng or that's the wrong way to go about this.
How do I combine these two?
{% for item in module.image_repeater %}
{% if item.src %}
<img src="{{ item.src }}" alt="{{ item.alt }}" width="{{ item.width }}" height="{{ item.height }}">
{% endif %}
{% endfor %}
{% for item in module.link_field %}
{% set href = item.url.href %}
{% if item.url.type is equalto "EMAIL_ADDRESS" %}
{% set href = "mailto:" + href %}
{% endif %}
<a href="{{ href }}"
{% if item.open_in_new_tab %}target="_blank"{% endif %}
{% if item.no_follow %}rel="nofollow"{% endif %}
>
Link text
</a>
{% endfor %}
Here's what I tried, but I only get one URL field for all of the repeating images, when I need one per image:
{% for item in module.image_repeater %}
{% set href = item.url.href %}
{% for item in module.link_field %}
<a href="{{ href }}">
<img src="{{ item.src }}" alt="{{ item.alt }}" width="{{ item.width }}" height="{{ item.height }}">
</a>
{% endfor %}
{% endfor %}
I'm new to using HUBL so any advice is appreciated!
PS - I saw the linked_image tag but when I go to build a module in the Design Manager it isn't one of the fields available to me.
Solved it! I wasn't using Groups properly, and had the Repeat on the image, so I was getting multiple images all wrapped in one URL.
I added an Image Field (with a default image, otherwise nothing shows), a Link Field, created a Group from these two, added a Repeat parameter to the Group, copied the Snippet, then nested the image_field inside the link code (replacing the Link Text), and it works!
{% for item in module.linked_image %}
{% set href = item.link_field.url.href %}
{% if item.link_field.url.type is equalto "EMAIL_ADDRESS" %}
{% set href = "mailto:" + href %}
{% endif %}
<a href="{{ href }}"
{% if item.link_field.open_in_new_tab %}target="_blank"{% endif %}
{% if item.link_field.no_follow %}rel="nofollow"{% endif %}
>
{% if item.image_field.src %}
<img src="{{ item.image_field.src }}" alt="{{ item.image_field.alt }}" width="{{ item.image_field.width }}" height="{{ item.image_field.height }}">
{% endif %}
</a>
{% endfor %}
Solved it! I wasn't using Groups properly, and had the Repeat on the image, so I was getting multiple images all wrapped in one URL.
I added an Image Field (with a default image, otherwise nothing shows), a Link Field, created a Group from these two, added a Repeat parameter to the Group, copied the Snippet, then nested the image_field inside the link code (replacing the Link Text), and it works!
{% for item in module.linked_image %}
{% set href = item.link_field.url.href %}
{% if item.link_field.url.type is equalto "EMAIL_ADDRESS" %}
{% set href = "mailto:" + href %}
{% endif %}
<a href="{{ href }}"
{% if item.link_field.open_in_new_tab %}target="_blank"{% endif %}
{% if item.link_field.no_follow %}rel="nofollow"{% endif %}
>
{% if item.image_field.src %}
<img src="{{ item.image_field.src }}" alt="{{ item.image_field.alt }}" width="{{ item.image_field.width }}" height="{{ item.image_field.height }}">
{% endif %}
</a>
{% endfor %}