I'm trying to link a URL to an image in a template image field

SOLVE
Highlighted
Regular Contributor

Alright so I've got a purchased template (Sodium template) with some custom modules on the home page which have an image field, header field, and content field. They all look great with the content I've put in there but I really want to link each of the images to other pages within the site so users can more easily navigate to related information. This is difficult though since I can't access the raw html to edit the template and I really don't want to create a whole new module group to do this because the template module has some cool slide in effects. I also don't want to insert and link an image within the "Content" field because that changes the template's default layout slightly. 

image.png

 

Does anyone know how I can go about this? They are the icons in the section with "PAYROLL", "HUMAN RESOURCES", etc.

 

Here's a link to the site: https://www.onemint.co/

 

 

1 Accepted solution

Accepted Solutions
Highlighted
Solution
Regular Advisor

Hey @jayh,

 

Nice template slide animation. Great Work!

 

if you want to create URL link on images than you have to go in the particular custom module code and wrap images with <a> tag.

 

that is not possible without doing code in prebuild HubSpot Custom Module.

 

you have to just follow my simple steps and you will get what you want.

1 > Go to your custom module on Template design layout.

2> now wrap your image element with <a> like this,

<div class="feature-yolk-box__image">
        <a href="">  <<<< Image code >>>> </a>
</div>

3> Now on your left-hand sidebar bottom side just click on +Add new field create one Text field and give a particular name and copy snippet and paste at <a> href attribute

<div class="feature-yolk-box__image">
        <a href="{{ widget.image_url }}">  <<<< Image code >>>> </a>
</div>

save custom module and publish a template.

 

Simple.

Now no need to go in any code just edit your page and add URL links. 

 

 

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

View solution in original post

4 Replies 4
Highlighted
Solution
Regular Advisor

Hey @jayh,

 

Nice template slide animation. Great Work!

 

if you want to create URL link on images than you have to go in the particular custom module code and wrap images with <a> tag.

 

that is not possible without doing code in prebuild HubSpot Custom Module.

 

you have to just follow my simple steps and you will get what you want.

1 > Go to your custom module on Template design layout.

2> now wrap your image element with <a> like this,

<div class="feature-yolk-box__image">
        <a href="">  <<<< Image code >>>> </a>
</div>

3> Now on your left-hand sidebar bottom side just click on +Add new field create one Text field and give a particular name and copy snippet and paste at <a> href attribute

<div class="feature-yolk-box__image">
        <a href="{{ widget.image_url }}">  <<<< Image code >>>> </a>
</div>

save custom module and publish a template.

 

Simple.

Now no need to go in any code just edit your page and add URL links. 

 

 

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

View solution in original post

Highlighted
Regular Contributor

This worked perfectly. All images now have links. Thank you @TRooInbound!

Highlighted
Regular Advisor

Hi @jayh We're glad it works. Please mark this answer as a solution 🙂

For more help and solutions, please visit our website www.trooinbound.com or email hello@trooinbound.com 

Cheers!

Reply
0 Upvotes
Highlighted
New Member

Hello, we purchased Clickray's Sodium template to build out our company website.

 

There is a feature for a "Custom POPUP" that serves up a cookie/privacy policy bar as well as a popup announcement. I've been able to customize it all except the frequency. It seems to come up on every page. This can be quite annoying to the visitor.

 

How I can I get it to do popup just once on the homepage only?

FidgetBranding.com

CustomPOPUP.png

Reply
0 Upvotes