Adding a url to image in navigation module

Highlighted
New Contributor

I have a image in my main navigation, that i would like to a hyper. I have the url in the link option but it not doing anything. I am missing something

 

I am still relative new to this.

0 Upvotes
8 Replies 8
Highlighted
Top Contributor

Hi @jbungay,

it really depends on how you inserted the image.

If it's HTML just put a <a href="https://URL">IMAGE</a> tag around your image.

If you used the Design Manager - Image Module, you can add a link on the following tab/option (see image)

 

ImageLink.PNG

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

If this don't help you, could you provide us with more informations like screenshots (HTML / Design Manager) or something like that. With this we can provide you with a more accurate solution.

 

- Chris

Highlighted
New Contributor

Its done throught the designer and the link its there. Its in the main menu maybe I need to do something diffferent there. 

 

Capture.PNGCapture1.PNG

0 Upvotes
Highlighted
Regular Advisor | Partner

@jbungay you'll want to find the module/file in the design manager and edit the markup. It's highly likely that the markup is not including an if statement for the image link field.

Stefen Phelps, Community Champion, Kelp Web Developer
Highlighted
New Contributor

Thanks . I think the code code is okay, but I am missing something

 

{% if module.target == true %}
    {% set target = "_blank" %}
{% else %}
    {% set target = "_parent" %}
{% endif %}

{% unless (module.link is string_containing "//") or (module.link is string_startingwith "/") or (module.link is string_startingwith "mailto") or (module.link is string_startingwith "#") or !module.link %}
  {% set link = "//" ~ module.link %}
{% else %}
  {% set link = module.link || "" %}
{% endunless %}


{% linked_image
    label="Linked Image",
    src='{{ module.img.src }}',
    alt='{{ module.img.alt }}',
    width='{{ module.img.width }}',
    height='{{ module.img.height }}',
    link='{{ link }}',
    target='{{ target }}',
    open_in_new_tab='{{ target }}',
    size_type='{{ module.img.size_type }}',
    max_width='{{ module.img.max_width }}',
    max_height='{{ module.img.max_height }}',
%}
0 Upvotes
Highlighted
Top Contributor

Hi @jbungay,

 

Is this a custom module which you are using?

could you show us your HTML output code for the Image? There is no HTML link (a href) in the source code of your page, which shows that there must be a probleme before output.

 

- Chris

0 Upvotes
Highlighted
New Contributor

I hope this helps. I am guessing the problem is the fact the image is the background of the div, i just don't know to what my option are to make it also clickable. 

 

 

<li class="aws-menu--hero2">
<div class="aws-menu--hero-content" style="background-image:url(https://www.agilus.ca/hs-fs/hubfs/hero_sample-1.jpg?width=600&amp;name=hero_sample-1.jpg)">
<div class="textband"><span>Looking to hire?</span>
</div></div>
<div class="aws-menu--phone">+1.855.622.1200</div>
</li>
0 Upvotes
Highlighted
Top Contributor | Partner
<a href="#"><div class="aws-menu--hero-content" style="background-image:url(https://www.agilus.ca/hs-fs/hubfs/hero_sample-1.jpg?width=600&amp;name=hero_sample-1.jpg)"></a>
0 Upvotes
Highlighted
Top Contributor

I'm a bit confused right now. 

 

The background-image is no problem, we can hyperlink that.

 

Is this code which you provided last, editable? I've hoped to see a bit more to be sure we're on the right place 🙂

If yes, then we're on the right place. This would be static html code, which doesn't use the dynamic image module of hubspot. 

Since this is static, the easy fix would be:

<li class="aws-menu--hero2">
<a href="https://www.agilus.ca/contact">
<div class="aws-menu--hero-content" style="background-image:url(https://www.agilus.ca/hs-fs/hubfs/hero_sample-1.jpg?width=600&amp;name=hero_sample-1.jpg)">
<div class="textband"><span>Looking to hire?</span>
</div></div>
<div class="aws-menu--phone">+1.855.622.1200</div>
</a>
</li>


If not we still need to look for the right place, since the "textband" class should be a custom class.

Then some more pictures would help a lot. We still need to find the place where the code for the image and textband is editable. If you can't find the place, we would need a screenshot of the header in the design manager.