Add SECOND link in Image -> Card

I am using an image in Card format and this allows for a hyperlink in EITHER a button OR the image - not both.

Is there any way to add the link to, say, the button and then programatically add the same link to the image as well?

PS: Currently i am using this in custom CSS to create the border:

//Border for tour card
#block-yui_3_17_2_1_1691819029172_77165, #block-yui_3_17_2_1_1692231844975_8611, #block-yui_3_17_2_1_1692234018828_9144, #block-yui_3_17_2_1_1692234018828_11038 {
 border: 2px solid #6600FF;
 border-top-left-radius: 20px;
 border-bottom-right-radius: 20px;
 padding: 20px,
}

You can add link to Sub Title, then we can use Script code to turn link to image (and use CSS code to make link invisible then)

Hi @tuanphan Thanks again for helping me out!

When you say add link to subtitle, would that be wording, like the '#1 Top Pick' or the 'Instagram highlights tour' or something else?

And then what would the script be to turn link to image and CSS to make the link invisible?

On 8/18/2023 at 6:32 AM, simon.stjohn said:

Hi @tuanphan Thanks again for helping me out!

When you say add link to subtitle, would that be wording, like the '#1 Top Pick' or the 'Instagram highlights tour' or something else?

And then what would the script be to turn link to image and CSS to make the link invisible?

Yes, like this link

@tuanphan Got it - thanks for confirming!

So what would the script be to turn link to image and CSS to make the link invisible?

On 8/21/2023 at 10:58 AM, simon.stjohn said:

@tuanphan Got it - thanks for confirming!

So what would the script be to turn link to image and CSS to make the link invisible?

Can you share link to page where you use image? We can check easier

I don't remember Card Image image ID

Hi @tuanphan

Thanks so much - it is https://baligram.me/day-tours/top-20-bali-tours-on-getyourguide

Add to Last Line in Code Injection > Footer

<!-- Make link invisible -->
<style>
div.blog-item-inner-wrapper .design-layout-card .image-subtitle p:last-child a {
    display: none !important;
}
</style>
<!-- Make image clickable -->
  <script>
$(".blog-item-inner-wrapper .design-layout-card .intrinsic").click(function(){
		window.location=$(this).find(".image-subtitle p:last-child a").attr("href"); 
		return false;
	});
</script>

Hi @tuanphan Thank you so much! I tried this and when I went to save the CSS it returned the error:

And this line had the start of your code 

<!-- Make link invisible -->

So I am wondering if there is a problem with that line or if I needed to add something or do something different?

Quote

I tried this and when I went to save the CSS it returned the error:

The code is not CSS and needs to go in Settings > Developer Tools > Code Injection > FOOTER.

Hi @creedon Oh My goodness - what a dumb moment that was! Thanks so much for the heads up mate.....!

Hi @tuanphan So thanks to Creedon, I got the code in the right place 🤪

Now what I find is when I click on the image in the card on the example page https://baligram.me/day-tours/top-20-bali-tours-on-getyourguide it's just opening the URL https://baligram.me/day-tours/undefined

So I am wondering how its supposed to work - is it supposed to be picking up the URL from another element that is not defined maybe?

@tuanphan Just wondering if you might have an idea what I can do to fix the issue in my last post on this? Would be very grateful for any tips! Cheers Simon