Clickable image on a landing page

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:

  1. Add a section, and under Components tab/“Background” tab, add your picture:

  2. 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 :

  • Go to the edit of your Landing page content type
  • In there go to the section where you wish to add the image
  • In the respective section, add a text component or a frame of your preference.
  • Upload the image from your local machine
  • Once the image is uploaded, go to the source
  • Add the code for the image map (Refer the example below)
<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>
  • Do not forget to add the map name with the img tag (the map name will be the same as of the map tag)
  • SAVE

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