-
I am an artist. My post template’s featured image size is 900 x 600 (landscape), which works well for my landscape-oriented images but not well for my portrait-oriented ones. When I crop my vertical images to fit, people think that the cropped image is the entire image.
Here is an example:
Original portrait-oriented image
https://imgur.com/mnLhUCeCropped to fit featured image dimensions
https://imgur.com/WbNlZIuHow do I make the cropped featured image open on hover or click to show the full, uncropped image? I see plugins that open featured images in a lightbox, but all they do is make my cropped image larger.
If I link to the full image, it takes people away from my post. I would rather use a button overlay “Click to see full image” or “Hover over image” to keep them on the same page. Maybe I could add a link beneath the image that triggers a lightbox?
I welcome your ideas, thanks.
-
Hi there,
You can try following the method outlined by one of our users here:
https://generatepress.com/forums/topic/pop-up-lightbox-featured-image-with-caption-solved/#post-696561 -
Thank you, Alvind, but these only enlarge the featured image in a lightbox. I want to click on the featured image to show a different image. How can I do this?
-
You just need to set the dynamic link source of the GB image block to
single image. -
I am not using a GB image block. It is a featured image in my post editor.
-
Sorry, I thought you meant the image on your homepage.
In this case, you can:
1. Create a
block element - page hero, add a Container, and nest a GB image block inside of it, set the dynamic image source to thefeatured image, and set the dynamic link source tosingle image.2. In the page hero element, disable the featured image, and set the hook to
after_entry_header, location toposts > all posts.3. You can set the
max-widthof the container to900px,margin-leftandmargin-righttoautoto center the container. -
Thank you, I did this, but can you tell me where to add the link that makes it clickable? Or perhaps, how make a different image show on hover? I’m still not clear on this.
-
Adding a link to the container takes people away from the post and isn’t dynamic.
-
Or perhaps, how make a different image show on hover?
It requires custom coding.
I just noticed that your featured image is cropped in the media library, the image itself is landscape, can you choose the portrait version of the image as the featured image in the post editor?
-
I have two images in the media library. The cropped one is for the featured image. The other is used in Envira Gallery.
-
I can use the full vertical image for featured image, but it throws off the layout. If I could add HTML to the featured image, I could trigger a lightbox with the full image in it. It would keep people on the page.
Or, if that doesn’t work, I can link to the EnviraGallery lightbox image.
Alternatively, I could link to a WooCommerce product page.
-
You do not need to use 2 images, you can use the portrait one as the featured image, then set
widthto 100%, andheightto600pxin the image block, it will crop the image to be landscape, but when user click on the featured image, it will take them to see the original portrait image. -
I’ll try that. One minute…
-
The lightbox image looks right, but the featured image is stretched and warped.
-
We’re halfway there though. 🙂
-
I just set the max width to 600 and it looks better. However, my width needs to be 900 for the correct featured image size.
- You must be logged in to reply to this topic.