What's new in v5.1?

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

• Discord
• Twitter
• Facebook

🙌 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 🙏