Image JS zoom script

Hi, I found a nice JS image zoom script, it allows a user to click on a image to enlarge it.

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 enabled on all images on the website, including images that just use the image shortcode instead of HTML. Is there a way to run this script on every single image in 1 go? Because manually changing every image would take way to much time.

I’ve used npm install to install the JS, now I’m just wondering how can I enable it on every single tag and every image shortcode.

Thanks in advance,

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

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.

1 Like

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 shortcode that adds the mediumZoom(’[data-zoomable]’) attribute to your image tags, and use that in the content files for the images that you want to be zoomable; or
    • just use the html img tag in your content files, and add the attribute to them, or
    • customize the render hook for images to add the attribute automatically to the images

I might have missed something, but this should be the generic approach.

HTH, Robert


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

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.