Display Larger version of image when image clicked

Support Themes & Styling
1

Happy new Year to everyone!

I’m wondering if there is a plugin or way that when I click on a image in a post, the image is displayed in larger dimension. Very useful when the web page is rendered on a smart phone.

Any clue will be very appreciated.
kind regards
Carlos.

2

Hi @cidelab, I’ve not used it myself but you might be interested in checking out the Featherlight Plugin https://github.com/getgrav/grav-plugin-featherlight Also this info might help https://learn.getgrav.org/16/content/media#lightbox

3

@cidelab, Instead of using a modal windows showing a larger (full screen) image, an alternative might be to adapt the layout of the page/image to cater for different screen sizes.

Based on the width and/or screen density of the device, such a responsive webdesign could then:

  • Alter the space allocated to the image. E.g the image is displayed/zoomed at 20-25% on desktop and 100% on mobile.
  • Display different images with different pixel sizes: Resolution switching.
    This could save the mobile user costly and time consuming bandwidth.
  • Display different image content (e.g cropped or portrait/landscape): Art direction.

I think a modal popup showing a large size image might be of value on a desktop because there is ample space to show the image 4-5x larger. That space is not available on mobile.

1 Like
4

@cidelab, I just learned about a nice solution that might be what you are looking for.

They seem to be using a <picture> element containing multiple images, but my guess is there is a bit more to it than just a <picture> …

Basically, on mobile, when you click on the image which is already 100% wide, an image with a larger dimension is shown which can be scrolled from side to side to see the details.

Have a look at the webshop of J.Crew on a mobile device or the mobile devtools in your browser: Slim Stretch Secret Wash shirt in gingham organic cotton

5

Thanks @paulhibbitts the links are very useful, I will test them now.
thanks a lot.
Carlos.

1 Like