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


#1

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

#2

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.


#3

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.


#4

@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>