clickthrough Making a portfolio image clickable

I made the shop and the portfolio (Paintings) pages look the same but they function differently... obviously the shop links to shop pages and the portfolio to a gallery but in the mobile view, the shop names that I had to add in order for the layout to look like the portfolio page (Paintings) are stacked beneath the images. I am wondering if there is some sort of workaround to have the titles directly underneath the appropriate image. I know I can turn on captions but I want the large font and if I change it in site styles it will mess up a bunch of other caption areas. I've been playing with a few thoughts like doing the shop link page the same as the portfolio page but then the image links to a gallery and not the shop and there isn't an option to make the image clickable to a shop page unless I click into the gallery and then go to shop. I hope this makes sense to someone:) thanks:)

Hi,

Can you share site url? We can check easier

Hi @tuanphan, I'd like to know if it's possible to make the portfolio images clickable to other pages? 

Here my website : https://www.theophile-dreyfus.com/ 

Thank you for your help. 

On 7/23/2024 at 4:52 PM, tiffil said:

Hi @tuanphan, I'd like to know if it's possible to make the portfolio images clickable to other pages? 

Here my website : https://www.theophile-dreyfus.com/ 

Thank you for your help. 

You mean this page? https://www.theophile-dreyfus.com/ai-projects

No, this one : https://www.theophile-dreyfus.com/ Homepage

22 hours ago, tiffil said:

No, this one : https://www.theophile-dreyfus.com/ Homepage

You mean these images?

Yes correct, put a 🔗 link to these images.

23 hours ago, tiffil said:

Yes correct, put a 🔗 link to these images.

You can enable Item button first. Then use this code to Custom CSS box

body.homepage {
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.user-items-list-carousel .list-item-content__button-container a {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.user-items-list-carousel .list-item-content__button-container {
    position: static !important;
transform: unset !important;
}
a.list-item-content__button.sqs-block-button-element:before {
    visibility: hidden;
}
.user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-carousel__gutter {
    cursor: pointer;
}
.list-item-content--hidden {
    display: block !important;
}
}

Hi @tuanphan 

I'm already using your code to make the portfolio images click through to the button link and its working great.

Is it possible to have the image clickable with this code but also make the botton visible as well? I'd love to have the option to click the button or image.

Thanks,

Hannah

6 hours ago, hannahnowlan said:

Hi @tuanphan 

I'm already using your code to make the portfolio images click through to the button link and its working great.

Is it possible to have the image clickable with this code but also make the botton visible as well? I'd love to have the option to click the button or image.

Thanks,

Hannah

Image - Button will have same link or different link?

If same link, you can add a link in Description, I can give code to make this link turn to button or give code to turn description link to image link + keep button visible

If different link, let me know, we will need another code

@tuanphan thank you so much !

Hi @tuanphan

Okay great, same link please.
Same link to click on image or click on button.

If we add link to description for image, can I still keep other writing (not linked) visible in description?

Thanks!

8 hours ago, hannahnowlan said:

Hi @tuanphan

Okay great, same link please.
Same link to click on image or click on button.

If we add link to description for image, can I still keep other writing (not linked) visible in description?

Thanks!

Yes. The code will make link invisible only

You can add link for 1 item, I will give code, then if it is fine, you can add link for other items

Okay that would be great! Please share code when you're ready.

Thanks again, Hannah

On 8/15/2024 at 1:51 PM, hannahnowlan said:

Okay that would be great! Please share code when you're ready.

Thanks again, Hannah

Can you share link to page where you added link? I can test/check code easier

Hi, Yes of course.

Website url: gordonking.au
No password

I've used code for the "Portfolio" section.

20 hours ago, hannahnowlan said:

Hi, Yes of course.

Website url: gordonking.au
No password

I've used code for the "Portfolio" section.

You mean this? I see it is static text, not text link

Hi!

Yes.

So I had a button underneath this saying "Explore Project".
But since I added your code this button disappears and instead the image is the link. 
I'm hoping to have the image as the link, and the button visible.

Does that make sense?

Thanks for your help,

Hannah

21 hours ago, hannahnowlan said:

Hi!

Yes.

So I had a button underneath this saying "Explore Project".
But since I added your code this button disappears and instead the image is the link. 
I'm hoping to have the image as the link, and the button visible.

Does that make sense?

Thanks for your help,

Hannah

As I said above, we can use code to turn text link in Description to Image link, instead of a button, so you can add text link to Description, I will test & give new code

On 8/21/2024 at 7:00 PM, hannahnowlan said:

Hi!

Yes.

So I had a button underneath this saying "Explore Project".
But since I added your code this button disappears and instead the image is the link. 
I'm hoping to have the image as the link, and the button visible.

Does that make sense?

Thanks for your help,

Hannah

Use this code to Code Injection > Footer (or Page Header Injection)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    function wrapImageWithLink() {
        const listItems = $('.list-item');
        listItems.each(function() {
            const img = $(this).find('.user-items-list-carousel__media-inner img');
            const link = $(this).find('a.list-item-content__button');
            if (img.length && link.length) {
                const newLink = $('<a>').attr('href', link.attr('href'));
                img.before(newLink);
                newLink.append(img);
            }
        });
    }
    wrapImageWithLink();
});
</script>