APIs & Integrations

Not applicable

How to access to the ID of the current Custom Module?

SOLVE

I am trying to use more than 1 CM called "Image + Text" module.
The thing is that I would like to style each of the CMs in a different way.
Thus, I need to inject a CSS inside the CM code.
But when I do that, I should find a unique way of doing it.

What I have in mind is to place an ID input in the CM and ask for it on page edit level.
That way the following logic works. But how can I do it without an input parameter?

 .module_{{ custom_module_id  }} .image-module{
    background: url('{{ widget.image.src }}')no-repeat;
    background-size: cover;
    height:{{ widget.image.height }}px;
  }
0 Upvotes
1 Accepted solution
Solution
Not applicable

How to access to the ID of the current Custom Module?

SOLVE

@Thomas_Bodocean , here what you can do as a workaround;

Create a module id like this
{% set mid = module | pprint | md5 %}

Then use that mid as a class in your parent wrapper div of your CM
<div class="custom_cm m{{ mid }}">

Then inject the module specific rules like this
<style type="text/css"> .custom_cm.m{{ mid }} {}</style>

View solution in original post

4 Replies 4
sylvain_pref
Contributor | Partner
Contributor | Partner

How to access to the ID of the current Custom Module?

SOLVE

Hi,

 

I've been doing this for a year or two. If I understand correctly the point here, you can do that:

 

 

<div id="my_prefix_id_{{ name }}">Stuff</div>

<style>
#my_prefix_id_{{ name }} {
   color: purple;
}
</style>

<script>
document.getElementById('my_prefix_id_{{ name }}').style.color = "purple";
</script>

 

 

Here, the code is visible in the source of your page. But if you want the code to appear in its respective files, do this:

 

 

<div id="my_prefix_id_{{ name }}">Stuff</div>

{% require_css %}
<style>
#my_prefix_id_{{ name }} {
   color: purple;
}
</style>
{% end_require_css %}

{% require_js %}
<script>
// You can use this value in a global js script.
let my_id = 'my_prefix_id_{{ name }}';
</script>
{% end_require_js %}

 

 

0 Upvotes
Bodocean
Member

How to access to the ID of the current Custom Module?

SOLVE

Is there a fix for this yet? - I have the same Issue. Using the same Module in one Page while changing some settings affects the other module as well.

0 Upvotes
Solution
Not applicable

How to access to the ID of the current Custom Module?

SOLVE

@Thomas_Bodocean , here what you can do as a workaround;

Create a module id like this
{% set mid = module | pprint | md5 %}

Then use that mid as a class in your parent wrapper div of your CM
<div class="custom_cm m{{ mid }}">

Then inject the module specific rules like this
<style type="text/css"> .custom_cm.m{{ mid }} {}</style>

Derek_Gervais
HubSpot Alumni
HubSpot Alumni

How to access to the ID of the current Custom Module?

SOLVE

Hi @Serhat_Sama,

This isn't currently possible; there isn't a way to dynamically reference the current module. I can totally see the use case for that, though; I've passed this feedback along internally, but if you have the inclination, I would encourage you to check out the Ideas Forum on the HubSpot Community. There, you can create a post including your use case that product and other customers can see.

0 Upvotes