Using HubL tags to change href

[PMarshTAC]

Hello,

I am creating a custom coded template and would like the user to be able to paste in a link which is used in a custom button.  I tried using the custom html HubL tags but they insert some extra elements which break the anchor tag.

What I'm trying to do:

<a style="text-decoration:none" href="{% raw_html "my_custom_html_module" label="Enter HTML here" value='<div>My HTML Block</div>' %}">

Custom Button Here

</a>

Are there are any tags which also insertion of html without the extra attached code?

Thanks,

Peter

[Anton · Accepted solution]

Hi @PMarshTAC, 

to get it clear - when saying "user",you mean the "marketers" who are building the pages, right?

The best way would be to create a custom module and place this custom module in your template. This will give you some advantages over "pure HTML" coded links.

Back to your question.

You're on the right way. 

If you want to build a custom module(easy) you can do it like this:

• create a new custom module by right-click on the folder you'd like to have it placed
• click on "Add field" in the right sidebar and search/select "Link"
• give it a name or leave it as it is
• copy the whole snippet and place it in the HTML+Hubl part of the screen
• go to the overview in the right sidebar and add a "text" field (rich-text not recomended)
• give it a name (I'vce called mine "button label")
• Copy the value(the snippet would work too but I like to kepep the code cledan)
• replace the "Link text" text in the HTML+Hubl part with the copied value
• add your inline-styling or css classes to the <a>-tag

The whole module should look like this

Here's my code (unless you use the same labels it won't work)

{% set href = module.link_field.url.href %}
{% if module.link_field.url.type is equalto "EMAIL_ADDRESS" %}
	{% set href = "mailto:" + href %}
{% endif %}
<a href="{{ href }}" {% if module.link_field.open_in_new_tab %}target="_blank"{% endif %} {% if module.link_field.rel %}rel="{{ module.link_field.rel }}"{% endif %} style="text-decoration:none" class="">
	{{ module.button_label }}
</a>

There are basicly no limitations how you can add classes (if you'd like to have all buttons look the same). You can either add another text field and use the value of it in the class="" area of the tag, you can predefine classes in a "select" option and place the value in the class="" area, you can add style-fields(new). What ever you'd like. 

To place it in your template(s) you can scroll down in right sidebar, copy the whole snippet and paste it where you like.

"Code" links into templates is - imo - a very outdated technique because it will bloat the "page creation" layout and make it harder for the marketers.

best, 

Anton

[PMarshTAC]

Hi Anton, thanks for the input.  By users I mean marketers.  In our situation, I am doing the module and template development as well as updating the site.  Every now and then someone else will want to change some text if I'm not around though which is why I want everything to be editable.  I've made pages before with everything inside one of the custom html modules but then I'm the only one who knows how to update it.

I used your example and got it working.  The main reason I was shying away from a module is because I didn't want to create a module and only use it in one place.  I'm using flexbox and the way my css is set up, the module would probably only look right in the exact spot that I'm putting it.  But maybe that's the intention with custom coded templates anyway?

Regardless, thanks for the help.  I'll be using this technique more in the future I'm sure.

-Peter

[Anton]

Hi @PMarshTAC, 

awesome!

It's completly up to you how you "design" the custom modules. 

In the "old" days it was pretty common to build whole row custom modules with different columns and "sub modules".

With the release of drag&drop themes it's a much more flexible approach and should give the marketers the ability to build pages on their own. The developer should create custom modules, sections("predefined" rows with several modules) and drag and drop templates which can be completly edited by the "non-developer". 

If you're planing to give it a try: a) start with the boilerplate "from scratch", or a cloned version of a default theme. But keep in mind that HubSpot is still using Bootstrap2 logic and will always add the coresponding classes. You can modify the grid to a flexbox logic.

best, 

Anton