adding a url to a custom template

[DanWentz]

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.

[TRooInbound]

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>

Hope this work!

TRooInbound Team.

[DanWentz]

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" %}

[TRooInbound]

@DanWentz,

order to help!

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

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

[DanWentz]

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?

[TRooInbound]

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

[DanWentz]

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

[TRooInbound]

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

[DanWentz]

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.

[TRooInbound]

@DanWentz,

Yes email template want be suppoerted <div>

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

[DanWentz]

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?

[TRooInbound]

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>' %}