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.
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
@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:
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.
@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