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