Hi, I found a nice JS image zoom script, it allows a user to click on a image to enlarge it. https://medium-zoom.francoischalifour.com/ My question is, how would I install this into gohugo? I know I can add the JS and then use class= to have the script active on a image, but I’d rather have it ena…

Hi Tim, I guess you’d have to: Download the js file from github and place it into your hugo site (for example, into /static/js/) Include the script in your hugo html files (in baseof.html, or in a partial template if you do not want to include it in every page): Then you can : Write a s…

This is not a Hugo related question. It is about how to implement this Javascript library in to an HTML page. All the information you need are at https://github.com/francoischalifour/medium-zoom#selectors .

The Hugo related part is where I’m wondering on how to edit/cutomize the image shortcode from Hugo. I assume there is some piece of HTML code that tells the image shortcode what to do, if I can edit this code I can add the JS there?

I still can’t quite understand your question, but maybe you’re looking for markdown render hooks ? I’m assuming that the “image shortcode from Hugo” is the markdown render.

Awesome, this is what I was looking for. Thank you!

Image JS zoom script

support

Topic		Replies	Views
How can I make images clickable so I can zoom them to full screen? support	7	7128	August 17, 2021
Images management in a hugo website support	8	2195	September 16, 2019
Resize an image with markdown support	12	10627	August 15, 2022
Help to insert and resize an image link from markdown into Hugo support	2	980	May 31, 2022
Help with understanding render-image.html support	1	342	April 18, 2024

Image JS zoom script

Related topics