CMS Development

deirdrel
Participant

Help! with deciphering and updating hubl for two column, left/right image (need to modify right)

SOLVE

Hi, 

I am creating my very first email template, that has two columns, and would like to use a custom hubl module in the left and right module, so that the images align ok.  My account support shared an awesome template to start and added a custom hubl module to start, and I am trying to learn how to update the hubl so that it works on the right side module. 

 

I added two more left rights, and right now, when I create an email and update one image, the rest of the modules all are showing the same image. 😛

 

Could you help me learn what needs to be changed so to update it for the right side hubl, and how to update  so that each custom hubl module is stand alone and email creators can add a separate image to each one?

 

Thank you very much! 🙂

 

Here is the hubl:

 {% image "left_image" label='Left Image', alt='Left Image', src='//cdn2.hubspot.net/hubfs/762525/Root/hiker-girl-trees-crop.jpg', width='260', style='max-width: 260px;' %}

 

0 Upvotes
1 Accepted solution
Neutrino
Solution
Participant

Help! with deciphering and updating hubl for two column, left/right image (need to modify right)

SOLVE

Hey @deirdrel,

 

Make sure you have an unique ID for each coded module.

 

Example:

 

 

{% image "left_image_unique_id_1" label='Left Image', alt='Left Image', src='//cdn2.hubspot.net/hubfs/762525/Root/hiker-girl-trees-crop.jpg', width='260', style='max-width: 260px;' %}

{% image "left_image_unique_id_2" label='Left Image', alt='Left Image', src='//cdn2.hubspot.net/hubfs/762525/Root/hiker-girl-trees-crop.jpg', width='260', style='max-width: 260px;' %}

{% image "left_image_unique_id_3" label='Left Image', alt='Left Image', src='//cdn2.hubspot.net/hubfs/762525/Root/hiker-girl-trees-crop.jpg', width='260', style='max-width: 260px;' %}

 

 

The IDs of the coded modules are placed right after the module type. In this case, after {% image... The ID (e.g. left_image_unique_id_1) can be anything of that form. E.g. my_new_image_module, dancing_samba231, or whatever; but it must be unique per template. You cannot have two or more "left_image" because as you noticed, they are all the same and you'll see the same content.

 

Hope you've got the idea.

View solution in original post

2 Replies 2
Neutrino
Solution
Participant

Help! with deciphering and updating hubl for two column, left/right image (need to modify right)

SOLVE

Hey @deirdrel,

 

Make sure you have an unique ID for each coded module.

 

Example:

 

 

{% image "left_image_unique_id_1" label='Left Image', alt='Left Image', src='//cdn2.hubspot.net/hubfs/762525/Root/hiker-girl-trees-crop.jpg', width='260', style='max-width: 260px;' %}

{% image "left_image_unique_id_2" label='Left Image', alt='Left Image', src='//cdn2.hubspot.net/hubfs/762525/Root/hiker-girl-trees-crop.jpg', width='260', style='max-width: 260px;' %}

{% image "left_image_unique_id_3" label='Left Image', alt='Left Image', src='//cdn2.hubspot.net/hubfs/762525/Root/hiker-girl-trees-crop.jpg', width='260', style='max-width: 260px;' %}

 

 

The IDs of the coded modules are placed right after the module type. In this case, after {% image... The ID (e.g. left_image_unique_id_1) can be anything of that form. E.g. my_new_image_module, dancing_samba231, or whatever; but it must be unique per template. You cannot have two or more "left_image" because as you noticed, they are all the same and you'll see the same content.

 

Hope you've got the idea.

deirdrel
Participant

Help! with deciphering and updating hubl for two column, left/right image (need to modify right)

SOLVE

OMG!!!!  Smiley Surprised 

yay! Thank you for explaining that and the examples. 

Now I understand!! <<I wish they had a lightbulb emoji!

There is so much to learn and so many pieces involved in building the email -- my head is spinning a bit. 🙂

Thank you!! @Neutrino saved my day-

0 Upvotes