CMS Development

tonicdesign
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.

0 Upvotes
1 Accepted solution
tonicdesign
Solution
Member

Repeating Linked Images in Email

SOLVE

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

View solution in original post

0 Upvotes
1 Reply 1
tonicdesign
Solution
Member

Repeating Linked Images in Email

SOLVE

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