Add buttons to Portfolio Gallery items

I would like to know if buttons can be added to each portfolio gallery image item, clicking on which redirects to the corresponding store page, for example. 

Can this functionality work simultaneously with lightbox settings on the gallery? 

(It is possible to add links to gallery items, which can link to any other page - but I want to retain the gallery as a lightbox-enabled gallery, instead of one where clicking the image does not enlarge image for better view but redirects to buy option). 

Hi,

This is possible. Can you share link to gallery page? We can check easier

Hi @tuanphan, Here's one portfolio gallery subpage: https://www.anerudhkannan.com/landing/landscapes

Thanks for looking into this!

When you edit image >> it has an option to enter description, you can enter this syntax, then we can use CSS code to turn it to button.

Something like this

"The Plunge": Lower Yosemite falls plunging to its final destination. This intimate view of the waterfalls was accessible by scaling an off-trail ridge along the side wall of the mountain. 
<a class="view-more">View more</a>

Then add this to Design > Custom CSS or Website > Website Tools > Custom CSS

a.view-more {
	background-color: white !important;
	color: black !important;
	padding: 10px 20px !important;
	display: inline-block;
	margin-top: 10px;
	border-radius: 20px;
}

Thanks, this worked for the mobile version. 

What about for desktop screen? I am trying something with padding-top/bottom or margin-top/bottom. They did not work:

.light-caption {
    width: calc(~"50% - 80px") !important;
    padding-right: 5px;
    padding-left: 5px;
  padding-bottom: 0px;
  padding-bottom: -100px;
}

On 8/12/2023 at 5:31 PM, AKN said:

Thanks, this worked for the mobile version. 

What about for desktop screen? I am trying something with padding-top/bottom or margin-top/bottom. They did not work:

.light-caption {
    width: calc(~"50% - 80px") !important;
    padding-right: 5px;
    padding-left: 5px;
  padding-bottom: 0px;
  padding-bottom: -100px;
}

 

Which image did you add the code? I can check easier

Hi @tuanphan, I added it to the first image (black and white waterfall) in the Landscapes gallery. 

On 8/17/2023 at 9:49 AM, AKN said:

Hi @tuanphan, I added it to the first image (black and white waterfall) in the Landscapes gallery. 

You mean move text under image on desktop?

Is it possible to add Pinterset "Pin It" Button to portfolio images?  Client would love it on all images including the portfolio images. I have the default button set but it's only on some images.

11 hours ago, TheVibe said:

Is it possible to add Pinterset "Pin It" Button to portfolio images?  Client would love it on all images including the portfolio images. I have the default button set but it's only on some images.

Unfortunately it only supports certain pages, you can consider replicating your portfolio page with your blog page

On 4/11/2024 at 4:00 AM, tuanphan said:

Unfortunately it only supports certain pages, you can consider replicating your portfolio page with your blog page

Ahh I see. They wanted the button to look like this https://amberinteriordesign.com/project/are-we-there-yet/ but on all pages. By chance do you know if I could style the button like this? I will let them know as far as the portfolio goes.

Thanks Tuanphan!

On 4/19/2024 at 1:43 AM, TheVibe said:

Ahh I see. They wanted the button to look like this https://amberinteriordesign.com/project/are-we-there-yet/ but on all pages. By chance do you know if I could style the button like this? I will let them know as far as the portfolio goes.

 

Thanks Tuanphan!

I don't see button. Can you take a screenshot?

Hey, 

Here is a screenshot of the photo

On 4/23/2024 at 4:19 AM, TheVibe said:

Hey, 

Here is a screenshot of the photo

You mean change Pinterest default icon to a button like your screenshot?

yes! 😁

15 hours ago, TheVibe said:

yes! 😁

You can use this code to Website > Website Tools > Custom CSS. Replace Pixabay with your new image url.

a.button.gallery-pinterest {
    background-image: url(https://cdn.pixabay.com/photo/2022/01/07/01/21/girl-6920625_1280.jpg) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    color: transparent !important;
}

THANKS @tuanphan I APPRECIATE YOUR ASISTANCE! You come through on other post when I'm searching for answers too. 😁