[Feature Request] Zooming images on click

[Anon-Exploiter]

Describe the feature

Image zoom upon clicking on images

Additional context

Sometimes it's really difficult to see images with too much content in them (especially in the case of text). The zoom feature can display the image upon click and can escape it using ESC (key)

[kdkasad]

I don't think this is a necessary feature. Most browsers let you open images in a new tab, where you can zoom in or out freely.

[Anon-Exploiter]

I don't think this is a necessary feature. Most browsers let you open images in a new tab, where you can zoom in or out freely.

Totally, but on mobile, it's an issue, also on the browser, you'll have to click on each image and open them in new tabs.

Also, Zoom isn't necessary (It should just enlarge the image once clicked)

I'll look into implementing it by myself (if the issue gets closed).

[adityatelange]

@Anon-Exploiter Here is an example if you want it https://adityatelange.in/blog/hugo-image-zoom-in/
But yes, this feature is not for everyone. No plans to implement it in near future.

[Anon-Exploiter]

Thanks @adityatelange!

I've another feature request in mind 😅 lemme know if I should create a new issue or just post here 🐱

[rcdailey]

I'd like to petition that this be implemented. I frequently post screenshots of my Bash command line and when it is too wide, it shrinks and becomes blurry. Most people expect to left-click to get a modal zoom on an image. Right clicking to open in a new tab is just not intuitive, IMHO.

[russmckendrick]

I'd like to petition that this be implemented. I frequently post screenshots of my Bash command line and when it is too wide, it shrinks and becomes blurry. Most people expect to left-click to get a modal zoom on an image. Right clicking to open in a new tab is just not intuitive, IMHO.

Here is some code to do exactly that using medium-zoom, put it in layouts/partials/extend_footer.html so there is no need to update the theme files directly - you can see an example of it in action here.

[rcdailey]

This is amazing, thank you!! I really wish that was documented in the wiki here. That's just fantastic. I went with this. I set the background to black with some transparency.

mediumZoom(img, {
  margin: 0, /* The space outside the zoomed image */
  scrollOffset: 40, /* The number of pixels to scroll to close the zoom */
  container: null, /* The viewport to render the zoom in */
  template: null, /* The template element to display on zoom */
  background: 'rgba(0, 0, 0, 0.8)'
});

[rcdailey]

@russmckendrick Actually there's one small issue. Images appear very blurry. I verified it is expanding to its full size, but it just doesn't have the same crispness that I see when I open the image outside of my browser. It's a PNG file. Is this due to medium-zoom or something else?

[kdkasad]

I really wish that was documented in the wiki here.

Feel free to make the changes to the exampleSite branch and open a PR to merge them.

[rcdailey]

I'd be happy to do that once I figure out the blurry image issue! Thanks for the suggestion.

[russmckendrick]

@rcdailey I use hi-res screens and then a shortcode to scale them based on the size of the screen, for example ...

https://github.com/russmckendrick/blog/blob/main/content/posts/2020-12-28_ansible-azure-and-macos-big-sur/images/2020-12-28_ansible-azure-and-macos-big-sur-01.png

... with the shortcode being ...

https://github.com/russmckendrick/blog/blob/main/layouts/shortcodes/img.html

... and calling it with something like ....

{{< img src="images/2020-12-28_ansible-azure-and-macos-big-sur-01.png" alt="Screenshot of my terminal" >}}

... looking a the screens in the repo mentioned above it looks like it is scaling the image up rather than down which is why I think you are getting the blur/pixelation.