I’ve created a custom email template with a custom module.
I would like my client to be able to insert multiple instances of the same module into the email. Is this possible and if so, how?
Hi @zingry Apologies no one has responded sooner. Without actually looking at the module, I would say it depends on the composition of the module and its function. Can you provide a link to the edit version of the email for a further look?
Thank you,
Ed Justen
Thanks for the response, but I worked around this in the day or so after I posted it.
I am curious for the future though. Let’s say I have a super simple custom email template like this:
<html><head></head><body>
MY SIMPLE NEWSLETTER
<div>
{% custom_widget "News Item 1" custom_widget_id=1235, widget_name='News Item', label='News 1' %}
</div>
<div>
{% custom_widget "News Item 2" custom_widget_id=1235, widget_name='News Item', label='News 2' %}
</div>
</body></html>
I would like my client to be able to add one, or two, or three, or four, or eleven, or thirty-seven separate news items, as they require. I couldn’t work out how to do that using the structure above.
What I did instead was code each module with a “hide or display” checkbox. The I built the template with the maximum number of instances of the module, so the client could simply uncheck the box on the ones they didn’t want. But that’s kind of clunky.
If there’s a way to do this kind of thing with advanced scripting, I’d love an example file or a link to advanced documentation.
Cheers!
Hmmm, ok. This particular client doesn’t want to have to have a paid MailChimp account as well, just for sending newsletters - is that what companies using HubSpot normally do when they want more flexibility? I’m curious because I’m coming to HubSpot from systems like Campaign Monitor and Mailchimp where this is very common functionality. I’m used to creating one template with a number of different modules that can be mixed and matched to create any kind of layout. I suppose that is only possible using the built in templates and not custom coded templates?
I came across this post looking for something else and, while I know it’s been a while, I can see the conversation also spanned a few months so I thought I’d add my thoughts.
HubSpot isn’t currently that flexible when it comes to email templates. On the Design Manager you can drag and drop modules but typically the customisations clients want require some HTML/CSS knowledge. You can’t drag in new modules on email templates on the Email tool with the exception of the new drag and drop builder in beta which is also fairly limited in terms of customisation.
What you can do with a custom module is to create a loop allowing them to add multiple articles. On the right-hand side you can add a few fields (e.g. Title, Author, Image) and Group them (e.g. Article). In the group there’s a “Repeater” that you can enable. When you select the snippet for that Group, you should have something like:
{% for item in module.article%}
<h1>{{ item.title }}</h1>
<h2>{{ item.author }}</h2>
{% if item.image.src %}
<img src="{{ item.image.src }}" alt="{{ item.image.alt }}" width="{{ item.image.width }}" height="{{ item.image.height }}">
{% endif %}
{% endfor %}
You can insert your own HTML and styling above using the tags. More on the repeater here.
They can then add multiple articles from the Email tool (although it involves adding new items with their values on the sidebar and is nowhere near as nice as the WYSIWYG editor) and it’ll work.
HubSpot Design / Development / Automation
If this helped, please mark it as the solution to your question, thanks!
Thank you Stephanie - this is exactly what I needed. For this particular job I ended up coding each module with a boolean “show this module?” field and added the maximum number that the client thought they might need, with an option to hide the additional instances. But I will definitely check your code sample out for the future.
Hi Stefanie, can I add within this option of quantity of “articles”, an option of quantity of images, for example?
{% for item in module.item_text %}
{{ item.text }}
{% for item in item.images %}
<img src="{{ item.img.src }}" alt="{{ item.img.alt }}">
{% endfor %}
{% endfor %}
Is this possible?
@pabloloren I think it depends on what you’re trying to do.
Your example looks like you’d like to have one text area per article and multiple images in that article?
In your module you can create a Rich Text field for your content and an Image field for your images (switch on the “Repeater options” on that field), then group both and switch on “Repeater options” for the group. It’ll look something like this:
Custom module fields section - showing an “Article” group with Text and an Image repeater modules
When you hover over your Article group and click on Actions > Copy snippet, you’ll get this code:
{% for item in module.article %}
{% inline_rich_text field="text" value="{{ item.text }}" %}
{% for item2 in item.image %}
{% if item2.src %}
{% set sizeAttrs = 'width="{{ item2.width }}" height="{{ item2.height }}"' %}
{% if item2.size_type == 'auto' %}
{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
{% elif item2.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ item2.max_width }}px; max-height: {{ item2.max_height }}px"' %}
{% endif %}
<img src="{{ item2.src }}" alt="{{ item2.alt }}" {{ sizeAttrs }}>
{% endif %}
{% endfor %}
{% endfor %}
Which will output this:
Output of the code
Which you can style as needed.
Stephanie O’Gay Garcia
HubSpot CMS Design & Development