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,
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.
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.
Awesome, this is what I was looking for.
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.