Hello,
I am creating a landing page, and I would like that the main background image (the one on top of the page) could have some clickable links on it. I added the extension “responsive image” but I am not sure it is the correct one. Can you please help me on this matter?
Thanks in advance,
Valentina
Hey @vcasadei,
You can use an anchor tag to achieve what you wrote in your opening remark to this post.
<p><a href="URL_of_the_webpage">
<img src="image_source">
</a></p>
To integrate this code snippet into your landing page content type, you can follow the following steps :
In the Edit of your Landing page, navigate to components.
In there go to the section you wish to add the image in
In the respective section, add a text component or a frame of your preference (In this example, I have used a hero frame).
Add the code snippet in the source (Refer to the screenshot attached)
SAVE
Having completed the listed steps, clear the caches and do a head refresh.
I hope this helps.
Regards,
Prakhar
Hello Prakhar, thank you for your prompt reply on the subject.
I am pretty new to Drupal and I have never done website development before, so I am not sure I understood exactly your instructions. Or at least, for me this could be used if I need to add one single link to the picture, is this correct? If the picture includes different words, and the idea is to have a link for each word, how can I know where on the code I should put this link?
Is this clear? otherwise I could upload the picture I would like to use for the website so maybe it is easier to understand.
Thanks,
Valentina
Hi - if I may, there could be a simple way to do this, if you just want words on a picture to be clickable.
Could I also just advise that from an accessibility perspective, it’s much better to use actual text that can be clicked on, rather than areas of a picture. Screen-readers (assistive technology which ‘reads aloud’ the screen for visually-impaired people, order to access content and navigate a website) can better detect and navigate through text links rather than image areas.
Using the homepage of https://it-student-projects.web.cern.ch as an example, and say we wanted that “IT Student Projects” text to be a link:
Using CERN Landing page, you would:
Add a section, and under Components tab/“Background” tab, add your picture:
Go to the Content tab, to Column Centre and add a Text Component:
You can then add whatever text and links you like, just like in a Word document.
Don’t forget to ensure there is sufficient contrast between the text and the background image, otherwise it’s super-difficult to read. I got around this by adding a dark highlight to white text.
Hope that helps.
-c
Hello! thank you very much for your kind reply!
The things is the words are already included in the picture. But I believe making every word of the picture clickable is probably quite complicated. I might actually follow your advice and just add a text component and add an hyperlink to it.
Thanks again,
Valentina
Hi Valentina
Without having seen the image, and as noted via Mattermost, it can be quite complex to get this sorted. However, if you have a version of the image without any text, then perhaps you could follow Cath’s suggestion above and get it sorted that way. However, do be vary of the positioning of the text across different screen sizes and browsers.
Thanks!
Hey @vcasadei,
The suggestion from @noble seems to be the best and involves less of technicality and CSS integration. Having read the thread with the recent replies, I understand what you want and thus have a solution for the same.
What can be done is to use Image maps, this uses the concept of integrating links to specific points/areas or coordinates
<img src="source_of_the_image" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="link">
</map>
In order to reduce the complex coding on your end you can fetch the code from https://www.image-map.net/
To implement it on your Drupal website, you can follow the following steps :
<map name="image-map"><area alt="test" coords="323,502,651,663" href="https://www.image-map.net/" shape="rect" target="_blank" title="test" /> <area alt="" coords="" href="" shape="0" target="" title="" /></map>
NOTE : The image is inserted using the <img> tag. The only difference from other images is that you must add a usemap attribute
I hope this helps. In case you encounter any further issues, please feel free to write us back.
Regards,
Prakhar
Hello,
thank you all for your reply and precious help, and apologies for the delay in replying.
@pkatyaya thanks a lot for your explanation, however I am not sure I understand how to indicate in which part of the image I need to add which link. Maybe it is very complicated for my understanding of Drupal, since I only started using it.
Anyways I am sending you in attachment the image I am talking about and you can tell me what’s the best solution.
Basically I would like to have a link for every word listed on the left side.
Thanks again,
Valentina
Hey @vcasadei,
Wishing you great start to this year. I have the image you shared, could you also please share the links that you wish to add in the image.
Once we have the links we would advance to get the image mapping sorted for you.
Thanks and regards,
Prakhar
Hi Prakhar, all
If you’re going to ‘hard code’ this, could I ask from a web accessibility perspective: that you also ensure keyboard navigation is also possible for the elements in this image?
Keyboard focus explanation here: WebAIM: Keyboard Accessibility and techniques here: Keyboard accessibility - Windows apps | Microsoft Learn
Thanks in advance for keeping this in mind!
-cath
Dear all,
Happy new year to you too!
@pkatyaya thanks for proposing your help in creating the image mapping. I didnt have time to work on the website lately, so the links are still not ready, but I will send them as soon as they are ready. Thank you for this!
Valentina
Hello,
I think that this topic can be closed, we finally decided not to go ahead with the idea of a clickable image.
Thanks everybody for your help.
Valentina
