Adding links to pictures on website

[maianhtom]

Hi,

I need to add links to some images on our website, but it is not possible to do that on the page editing level. There isn't a field to add those links in the interface. How can I do that in design manager?

[Stephanie-OG · Accepted solution]

No worries, if you're not familiar with the COS/coding it can take a little bit to pick up!

In custom modules, you have the option to add fields on the right-hand side: 

In the screenshot above, I've cliked on "Add field" and added a Text field which I've called "Image URL" (you can see below it labels it image_url), which is where HubSpot pulls the URL from in the code: 

{% if module.image_field.src %}
  <a href="{{ module.image_url }}">
    <img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" width="{{ module.image_field.width }}" height="{{ module.image_field.height }}">
  </a>
{% endif %}

Now when I click "Preview" in the upper right-hand corner, I can see what the module fields will look like when I use the module in a template: 

My example is a pretty simple module but you may see more code in your custom module for any other behaviour it's adding.

---

HubSpot Design / Development / Automation

Website | Contact

[Stephanie-OG]

Hi there!

You should be able to do so from the page editing level: 

• If it's an Image module, click on it and you will see a "Link (optional)" field on the sidebar.
• If it's a Rich Text module, click on the image and then click on the "Insert/edit link" option on the toolbar and it should let you insert a link around that image.

Alternatively, on the Rich Text module you can click on "Source code" option on the toolbar (it looks like this "</>") and, around the image tag:

<img src="https://cdn2.hubspot.net/hubfs/1234567/myimage.png" alt="myimage" width="143" style="width: 143px; display: block; margin: 0px auto;">

Add anchor link tags, like this: 

<a href="http://www.hubspot.com"><img src="https://cdn2.hubspot.net/hubfs/1234567/myimage.png" alt="myimage" width="143" style="width: 143px; display: block; margin: 0px auto;"></a>

If it's neither type of module, let us know what type of module is being used or send a link to the page/page preview and we can take a look into how to edit it from the Design Manager.

I hope that helps!

---

HubSpot Design / Development / Automation

Website | Contact

[maianhtom]

Hi Stephanie,

Thank you for your reply,

It is not an image module or a rich text model. I cannot click on an individual picture. All pictures are inside a model field and when I click on the field a toolbar appears on the left side where I can add more pictures or change those pictures but there isn't a place to add links to those pictures. 

The toolbar to change pictures is shown in the picture below:

[Stephanie-OG]

That looks like it's an image field in a custom module. Those don't have a link option by default so it would need to be added to the custom module itself. 

On the custom module, you can add in another field for the image link and then wrap it around the image code. If you have something like this: 

{% if module.image_field.src %}
	<img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" width="{{ module.image_field.width }}" height="{{ module.image_field.height }}">
{% endif %}

You can add in a text field called "Image URL" where you can enter the URL and then add anchor tags around the image code, something like this: 

{% if module.image_field.src %}
  <a href="{{ module.image_url }}">
    <img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" width="{{ module.image_field.width }}" height="{{ module.image_field.height }}">
  </a>
{% endif %}

Making the change will require some basic coding knowledge so, if you're unsure, I'd recommend checking in with your developer or asking for help from one of the freelancers on the community. 

---

HubSpot Design / Development / Automation

Website | Contact

[maianhtom]

hi Stephanie,

Thank you for the instruction,

I found the place to add the code you suggested, however, the link field doesn't appear. Could you please help me more with this?

Here is the code with the image link I added

{% if item.image.src %}
<a href="{{ item.image_url }}">
<img src="{{ item.image.src }}" alt="{{ item.image.alt }}" width="{{ item.image.width }}" height="{{ item.image.height }}">
</a>

 {% endif %} 

[Stephanie-OG · Accepted solution]

No worries, if you're not familiar with the COS/coding it can take a little bit to pick up!

In custom modules, you have the option to add fields on the right-hand side: 

In the screenshot above, I've cliked on "Add field" and added a Text field which I've called "Image URL" (you can see below it labels it image_url), which is where HubSpot pulls the URL from in the code: 

{% if module.image_field.src %}
  <a href="{{ module.image_url }}">
    <img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" width="{{ module.image_field.width }}" height="{{ module.image_field.height }}">
  </a>
{% endif %}

Now when I click "Preview" in the upper right-hand corner, I can see what the module fields will look like when I use the module in a template: 

My example is a pretty simple module but you may see more code in your custom module for any other behaviour it's adding.

---

HubSpot Design / Development / Automation

Website | Contact

[maianhtom]

Hi Stephanie,

You are awesome! The method works great

Thank you very much!

Would it also be possible to have the link opened in another browser tab?

Br, Anh

[Stephanie-OG · Accepted solution]

No problem at all! Feel free to mark it as a solution so that others can find it. 

Yes, you can add a target to the link so that it opens in a new tab. Just add target="_blank" to your anchor tag:

{% if module.image_field.src %}
  <a href="{{ module.image_url }}" target="_blank">
    <img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" width="{{ module.image_field.width }}" height="{{ module.image_field.height }}">
  </a>
{% endif %}

---

HubSpot Design / Development / Automation

Website | Contact

[maianhtom]

Thanks! it works well

[maianhtom]

hi Stephanie,

Thank you for the instruction,

I found the place to add the code you suggested, however, the link field doesn't appear. Could you please help me more with this?

Here is the code where I add the image link

{% if item.image.src %}
<a href="{{ item.image_url }}">
<img src="{{ item.image.src }}" alt="{{ item.image.alt }}" width="{{ item.image.width }}" height="{{ item.image.height }}">
</a>

 {% endif %}