Version 5.1 (WIP)

Work in progress. Please consider contributing to the release and check back here for the final details upon release.

What’s new?

  • Re-written Figure shortcode which now supports:
    • re-usable (global) optimized images 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
    • 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

Other notable changes include:

  • fix: “comment provider not found” when enabling Disqus or Commento comments
  • 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

WIP:

  • Complete migration of other shortcodes to use the new, optimized media library

Update to this version

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

TBD

Supported Hugo Versions

Compatible with Hugo Extended v0.78.2 to v0.80.0. Future Hugo versions may work but are untested.

  • If you deploy with Netlify, update HUGO_VERSION in netlify.toml to "0.80.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 figure images from static/media/ to a assets/media/ folder so that they can be optimized by Hugo’s image processing

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
Ask a question