Search code examples
imagevue.jszoomingvuepress

Disable Medium-zoom in Vuepress

I'm looking for the ability to disable the medium-zoom plugin on some images within a vuepress site. I currently have the latest vuepress with the plugin activated, and it zooms all images except the one on the main (home) page. I'm using markdown and don't know if this is possible. thanks in advance.

Solution

  • You could change the selector config option to a custom class and then use that class on a page or image-level (depending on which images you want to show).

    For example, you could change the config of medium-zoom in your config.js file to:

    '@vuepress/medium-zoom': {
   selector: '.zoomable-images img'
}

    Then you can set the pageClass frontmatter of the pages where you want zoomable images to zoomable-images:

    ---
pageClass: zoomable-images
---

    I haven't seen a way to add a CSS class to a markdown image though. So if you want to be able to select enable/disable zooming on a image-level, you might have to use HTML image tags instead of markdown.