APIs & Integrations

OJuul
Member

How to modify the <div id="#"> for each instance of the module

Hey guys

 

I threw myself into creating a custom module on my first day of meddling with Hubspot.

 

I created a rather simple module with the aim of integrating bodymovin (JS) to be able to quickly add new animated SVGs exported from Adobe After Effects.

 

Currently, I looks as simple as this:

<div class="container">
<div class="icon-container" id="bm"></div>
{% inline_rich_text field="Headline" value="{{ module.Headline }}" %}
{% inline_rich_text field="Body" value="{{ module.Body }}" %}
</div>

 

The id="bm" here retrieves the json-file (in this case animation.json) and plays it in the icon container, but I would like to be able to create several instances of the module and change the id, so I have different animations within the different containers. Is there any way to work around this?

 

I hope it makes sense and that you can help me with a solution!

 

All the best

 

 

 

0 Upvotes
1 Reply 1
dennisedson
HubSpot Product Team
HubSpot Product Team

How to modify the <div id="#"> for each instance of the module

@OJuul ,

If it is going to be only used once in a module, you could use {{ name }} which will print the ID of the module

Example:

 

 

<div class="icon-container" id="{{ name }}"></div>

 

 

If you are creating a repeater, then you could use the loop index

Example:

 

<div class="icon-container" id="bm-{{ loop.index }}"></div>

 

0 Upvotes