Front Page Image Links

Hi Team,

Thanks heaps in advance for your help.

The site that I am currently working on (babeaunaturel.com) has an issue which is best described using the below image.

The only clickable area is the link (circled in red). I have done some user research and the users want the image to be clickable, as it makes more sense - as per the grey outlines in the image.

How am I able to achieve this?

In my research, 100% of the users who tried the site on mobile tried to click on the image (and it didn’t work), and 40% found this offputting in the desktop version (it added an extra step for them to figure out that it is only the text that is clickable).

Thanks very much in advance,

Cheers,
Meow

Hello,

I don’t think that there is an easy way to do it, unfortunately. But I’ve already added it to our list.

Thank you for pointing it out! Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

Thanks for your reply :slight_smile: I have found a temporary override with javascript, in case anyone is interested:

(function($){
$( ".category-item__inner" ).hover(function() {
  var pointerlink = $(this).find( "a" ).attr("href")
  if (pointerlink != null) {
    $(this).css("cursor", "pointer");
    $(this).click(function() {
  		window.location.href = pointerlink;
    });  
  }
});
})(jQuery);

I did it using TC custom javascript.

Cheers
M

1 Like

You are welcome!

And thanks for sharing that :slight_smile:

Kind Regards, Roman.

1 Like