What's new in v5.1?

Get light/dark image theming, page-specific styling, and Baidu support.

Get light/dark image theming, page-specific styling, and Baidu support.
Get light/dark image theming, page-specific styling, and Baidu support.
Dynamically theme images according to the user's light/dark preference
Dynamically theme images according to the user’s light/dark preference

What’s new?

  • re-usable (global) optimized media from new primary media library location at assets/media/
    • previously, images used by multiple pages were placed in static/media/, a folder which cannot be optimized by Hugo
    • the media location has been updated for Figure, Hero, Widget Background, Featured, Header, Audio, Video, Slider Background
  • Re-written Figure shortcode which now supports:
    • smart image loading behavior: load image from page folder falling back to media library at assets/media/ and then to remote URI
    • multi-resolution support, which can lead to increased performance and Google Lighthouse scores
    • support custom figure IDs for easier cross-referencing
      • For example, {{< figure src="image.jpg" id="wowchemy" >}} can be cross-referenced with [A Figure](#figure-wowchemy)
      • This way, the cross-reference is unaffected by changes to captions
    • utilises a more efficient, vanilla (non-jQuery), MIT licensed solution for image zooming
      • FancyBox is now only loaded for the Gallery shortcode
    • helps prevent layout shifts, improving Google Lighthouse reports
    • Dynamically theme images according to the user’s light or dark theme
      • {{< figure src="image.jpg" caption="test" theme="light" >}} inverts image when browsing in dark mode
      • {{< figure src="image.jpg" caption="test" theme="dark" >}} inverts image when browsing in light mode
  • Full migration to native lazy loading (one less JS dependency)
  • Add support for Baidu analytics and Baidu search engine
    • The new baidu_tongji and baidu_site_verification options can be added under marketing in params.yaml
    • Refer to the SEO Guide in the Docs

Other notable changes include:

  • fix: “comment provider not found” when enabling Disqus or Commento comments
  • fix: Mermaid diagrams occasionally not rendered due to race condition
  • Add options for page-specific styling and integrations
    • Page’s ID is applied to page body as data-wc-page-id which can be accessed via CSS and JS to perform page-specific styling or integrations
    • Introduces new page parameters, similar to those in widgets: design.css_style and design.css_class
    • For example, a custom page background can now be added
  • remove deprecated Alert shortcode which was replaced in v5.0.0 by Callout

Update to this version

❤️ If you upgrade, please consider supporting the significant effort which goes into this open source movement by kindly giving back and sponsoring on GitHub

hugo mod get github.com/wowchemy/wowchemy-hugo-modules/[email protected]
hugo mod get github.com/wowchemy/wowchemy-hugo-modules/[email protected]

Supported Hugo Versions

Compatible with Hugo Extended v0.81.0. Future Hugo versions may work but are untested.

  • If you deploy with Netlify, update HUGO_VERSION in netlify.toml to "0.81.0".
  • If you run Hugo on your computer, update the Hugo Extended app to a compatible version

Apply Breaking Changes

  • rename assets/images/ to assets/media/
  • move default social sharing image (if any) to assets/media/sharing.* and remove sharing_image from config.yaml
  • move any image, audio, and video files from the static/media/ folder to the new assets/media/ folder so that they can be processed and optimized by Hugo’s media processing system

For sites with galleries:

  • save any remote gallery images to your page bundle (see the Docs)

For sites with many images:

  • Set timeout: 600000 (ms), or as required, in config.yaml to prevent Hugo timing out after 10s
  • Optionally, add your resources/ folder to Git as recommended by the Hugo team, or consider using the equivalent third-party Netlify Plugin to cache optimized assets, reducing build time

Join the community

🙌 A big shout out to Christian and Rodri for kindly helping the community and moderate discussions.

Thank You

Thank you to all the sponsors who supported this release on https://github.com/sponsors/gcushen and https://www.patreon.com/cushen 🙏

Ask a question