no_wrapper Hubl Variables for Custom Page Module

[MarcusZeal]

I'm trying to create a module where all the html/wrapping I need is done directly in the module itself. 

How would I go about using the no_wrapper HUBL parameter to remove the wrap from a custom page module? 

[MarcusZeal]

A quick update on this since the way I do this today is very different from using javascript to strip the DOM. Looking back, it's a little funny just how close I was in my original question here. 

no_wrapper=true is supported in most custom modules. When I build a module no, adding "no_wrapper=true" before the closing %} is almost second nature. I use this in every Rich Text and Text.  

When creating a grid-like the one I was doing in 2018, I would start with what would go into a single instance of that repeatable area. (Name, Title, Bio, Profile Image). This was a Team Members module if you couldn't guess haha.

Then I would group the modules in the module builder and set that group to be repeatable. Now that the hubl variables are set, I'd copy the snippet to the HTML part of the module and move them around as needed.

I'd add no_wrapper=true to the Name (text), Title (text), and Bio (Rich text). I do this because I want my DOM to be <h3 class="job-title">Job Title Goes Here</h3> and not <h3 class="job-title"><div id="moduleid">Job Title Goes Here</div></h3>

And then add some flex CSS rules to get it into a grid. 

Hope this helps someone! 

TLDR:

... no_wrapper=True %}

[elton]

@MarcusZeal  Thanks, this helped

[MarcusZeal]

This is my temporary solution:

 $('.resource-card').unwrap();

It's not ideal, but it's functional. 😕 

[Jsum · Accepted solution]

@MarcusZeal, I don't think you can, but you can add a custom class to the module itself which would apply to the outer wrapper.  You can also wrap the module in code from the module settings in a drag and drop template. 

You can apply 'no_wrapper=True' to modules in code form. I don't know if this works for custom modules, or how you would apply a code snippet to a template now that the custom html and custom hubl modules were removed. This only removes the span tag beween the module code and the outer div, and I not sure if this even works on custom modules now to begin with. 

Why are you needing to remove the wrapper? If it is because you are trying to allow some script to target the inner html of the wrapper, say for a slider, then your off base. The new custom module tools have repeater fields. You should be building your entire module in one peice so that you have control over all of the markup. 

Need help? Hire Us Here

[MarcusZeal]

The repeater field would be functional, I believe, for what I'm trying to do. My goal is to make an Isotope-powered listing of sorts for different items. The items would be posted via the module itself.

The module needs to be able to have booleans to target / give the div specific classes for sorting functionality, some basic image URLs options and some text. 🙂 

The solution I have now, I believe, should work for this iteration of the launch pad site. The script is firing very quickly and isn't breaking other things so I'm pretty happy with it. v2 will probably utilize a repeater module as you suggested though. 🙂 

Thanks for the replies! 

[amcintosh]

Mostly replying because I'm interested in following this conversation.

Although I'm sure this is a terrible bastardization of what HubSpot intended, you can still add valid HUBBL code into the "Wrapping HMTL" of a module and accomplish some of the same things.

As a quick test, I put the {{ html }} section in a {% raw %} tag so I could see the id, and tried referencing it using {% module module_id=# %} instead of {{ html }} no_wrapper=true. Unfortunatley didn't work. On the plus side, the other kinds of modules I tried no_wrapper on did work. So, if that helps you hack your module into doing what it needs to do, neat :-]