CMS Development

jbungay
Membro

Adding a url to image in navigation module

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 Avaliação positiva
8 Respostas 8
Chris-M
Top colaborador(a)

Adding a url to image in navigation module

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

jbungay
Membro

Adding a url to image in navigation module

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 Avaliação positiva
stefen
Conselheiro(a) de destaque | Parceiro
Conselheiro(a) de destaque | Parceiro

Adding a url to image in navigation module

@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
jbungay
Membro

Adding a url to image in navigation module

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 Avaliação positiva
Chris-M
Top colaborador(a)

Adding a url to image in navigation module

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 Avaliação positiva
jbungay
Membro

Adding a url to image in navigation module

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 Avaliação positiva
JanetArmstrong
Top colaborador(a) | Parceiro
Top colaborador(a) | Parceiro

Adding a url to image in navigation module

<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 Avaliação positiva
Chris-M
Top colaborador(a)

Adding a url to image in navigation module

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.