adding a url to a custom template

Highlighted
Occasional Contributor

How do i add a url to a custom built html email template?

 

I have put a text area in an <a> tag, but the url itself isnt editable when creating an email from the template.

Reply
0 Upvotes
11 Replies
Regular Contributor

Hi @DanWentz,

 

Custom HTML won't be editable without use of HubSpot Hubl Module Code,

 

Please add this in your Custom HTML Code wherever you required to editable links,

{% text "link_field" label="Enter link", value="https://trooinbound.com/", no_wrapper=True , export_to_template_context=True %}
<a href="{{ widget_data.link_field.value}}">Button</a>

 

Did my post help answer your query? Help the Community by marking it as a solution.

Hope this work!

TRooInbound Team.

Occasional Contributor

thank you, this works as in there is now a link for which the url can be edited, but the text itself cannot be edited, id like to be able to edit both the url and the text for the link - can this be done?

Regular Contributor

Hi @DanWentz,

 

Yes, It is possible with the same use of HUBL code.

let me give you another more editable code.

 

Use of RichText Hubl Module.

Like,

{% rich_text "link_rich" label="Enter Link and Button Text" html='<a href="https://trooinbound.com/">button text</a>' %}

 

 

Did my post help answer your query? Help the Community by marking it as a solution.

TRooInbound Team

more help please visit at www.trooinbound.com or email at hello@trooinbound.com

Reply
0 Upvotes
Occasional Contributor

perfect, thanks, this works

 

may i now trouble you for another query, how do i make an image resize for mobile in a custom template.

 

usually we use a class on the image, but its not working when placing the image with Hubl coding and neither is setting the size to 100%:

 

{% image "head_image" label='head image', alt='alt text here', src='https://cdn2.hubspot.net/hubfs/330950/WBM_Emails/headimage.jpg', width='650' class="headimage" %}

Regular Contributor

@DanWentz,

 

order to help!

 

please add CSS in your <style> tag like this,

<style>
img {
    max-width: 100% !important;
    width: 100% !important;
}
</style>

 

Did my post help answer your query? Help the Community by marking it as a solution.

TRooInbound Team

more help please visit at www.trooinbound.com or email at hello@trooinbound.com

Reply
0 Upvotes
Occasional Contributor

i dont necessarily want all images to be 100% size, plus if images are double size to look good on retina devices, they will out put at 1300px rather than the 650px we want on desktop.

 

can it not be controld with a class?

Reply
0 Upvotes
Regular Contributor

@DanWentz,

 

Yes, you can control anything with CSS class and give to particular images.

 

In your case use '.headimage' class and give width whatever you have to do.

  

Reply
0 Upvotes
Occasional Contributor

where to i add the class to the Hubl image code please?

Reply
0 Upvotes
Regular Contributor

@DanWentz,

 

Apologies for my mistake,

 

It's easy when you have custom HTML code, you can give images unique parent class some class and target with use of the class like this, 

<div class="headimage">
       {% image "head_image" label='head image', alt='alt text here', src='https://cdn2.hubspot.net/hubfs/330950/WBM_Emails/headimage.jpg', width='650' %}
</div>

 

 

CSS

.headimage img {
    max-width: 100% !important;
    width: 100% !important;
}

 

Reply
0 Upvotes
Occasional Contributor

we wouldnt usually use div in an html email, but i suppose its fine as long as we arent using structural styles on it.

 

many thanks for your help, it is much appreciated.

Regular Contributor

@DanWentz,

 

Yes email template want be suppoerted <div>

please replace <div> tag with <td> and <tr> in my last given code.

 

Did my post help answer your query? Help the Community by marking it as a solution.

TRooInbound Team

more help please visit at www.trooinbound.com or email at hello@trooinbound.com

Reply
0 Upvotes