Image zoom in Docusaurus site

In this article, I explain how to add the image zoom in your Docusaurus site. When you click any image, it should expand to its full size. This feature works the same as all images in Medium articles.

  3 minute read  

The goal is to add the image zoom capability in your Docusaurus project.

Prerequisites

You must have Docusaurus project on your machine. See my article about installing and configuring Docusaurus.

If you want to use my Docusaurus example site:

  1. Fork the GitHub project or clone it to your machine:

    git clone https://github.com/ivancheban/my-site.git

  2. Install npm dependencies:

    npm install

  3. Run the project on your localhost:

    npx docusaurus start

Your Docusaurus site opens in the browser on this localhost: http://localhost:3000/

Add image zoom plugin

To add the docusaurus-plugin-image-zoom plugin, use the instructions from their npm package page or GitHub repo:

  1. Open your project folder in VS Code or any other code editor.

  2. Make sure you have the latest version of Docusaurus:

    npx docusaurus --version

    The current latest version is 2.4.1. To update to the latest version:

    npm i @docusaurus/core@latest @docusaurus/preset-classic@latest

  3. Type this command and press Enter:

    npm install docusaurus-plugin-image-zoom

  4. Add the following code to the docusaurus.config.js file plugins list:

      plugins: [
    require.resolve('docusaurus-plugin-image-zoom')
  ],

  5. Add the following code to the docusaurus.config.js file themeConfig object:

    themeConfig: {
  zoom: {
    selector: '.markdown :not(em) > img',
    background: {
      light: 'rgb(255, 255, 255)',
      dark: 'rgb(50, 50, 50)'
    },
    config: {
      // options you can specify via https://github.com/francoischalifour/medium-zoom#usage
    }
  },
},

My example Docusaurus project config looks like this:

Click to expand 
// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion

const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');

/** @type {import('@docusaurus/types').Config} */
const config = {
  title: 'Documentation site',
  tagline: 'How to create your documentation site with Docusaurus',
  url: 'https://your-docusaurus-test-site.com',
  baseUrl: '/',
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  favicon: 'img/favicon.ico',
  organizationName: 'facebook', // Usually your GitHub org/user name.
  projectName: 'docusaurus', // Usually your repo name.

  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          // Please change this to your repo.
          editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
        },
        googleAnalytics: {
          trackingID: 'UA-162550995-21',
          // anonymizeIP: true,
        },
        blog: {
          showReadingTime: true,
          // Please change this to your repo.
          editUrl:
            'https://github.com/facebook/docusaurus/edit/main/website/blog/',
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      }),
    ],
  ],

  plugins: [
    require.resolve('docusaurus-plugin-image-zoom')
  ],

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      navbar: {
        title: 'Documentation site',
        logo: {
          alt: 'My Site Logo',
          src: 'img/logo.svg',
        },
        items: [
          {
            type: 'doc',
            docId: 'intro',
            position: 'left',
            label: 'Docs',
          },
//          {to: '/blog', label: 'Blog', position: 'left'},
          {
            href: 'https://github.com/facebook/docusaurus',
            label: 'GitHub',
            position: 'right',
          },
        ],
      },
      zoom: {
        selector: '.markdown :not(em) > img',
        background: {
          light: 'rgb(255, 255, 255)',
          dark: 'rgb(50, 50, 50)'
        },
        config: {
          // options you can specify via https://github.com/francoischalifour/medium-zoom#usage
        }
      },
      footer: {
        style: 'dark',
        links: [
          {
            title: 'Docs',
            items: [
              {
                label: 'Tutorial',
                to: '/docs/intro',
              },
            ],
          },
          {
            title: 'Community',
            items: [
              {
                label: 'Stack Overflow',
                href: 'https://stackoverflow.com/questions/tagged/docusaurus',
              },
              {
                label: 'Discord',
                href: 'https://discordapp.com/invite/docusaurus',
              },
              {
                label: 'Twitter',
                href: 'https://twitter.com/docusaurus',
              },
            ],
          },
          {
            title: 'More',
            items: [
              {
                label: 'Blog',
                to: '/blog',
              },
              {
                label: 'GitHub',
                href: 'https://github.com/facebook/docusaurus',
              },
            ],
          },
        ],
        copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
      },
      prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
      },
    }),
};

module.exports = config;

Test your Docusaurus site locally to see if images are zoomed when you click them. To start your localhost: 
npx docusaurus start
Ask chatbot

Last modified December 11, 2024: added chatbot to all pages (b123fec)