Images 3.1 is out — new shortcodes and partials, an improved image render hook, and a new documentation website.
Images now has a new code base, making it more robust, flexible, and easy to use.
Highlights
- Improved image render hook for Markdown images.
- New shortcodes and partials for
picture,img, andfigureelements. - Store your images as a page resource, global resource, or remote resource.
- Set defaults for
loading,decoding,fetchpriority, and more — override locally. - Use the automatic
sizesattribute calculation 🚀 - Show your images with a blurred-up LQIP 🌟
- New documentation website.
Get started
To take advantage of the latest features, make sure you’re running the latest version of Images and have set the new parameters. You can upgrade to Images 3.1 by running the following command for your package manager of choice:
Shortcodes and partials
You can add images to your html pages by using the the img, picture, or figure partial. The shortcodes are wrappers for the partials. Add images to your .md pages by using the img, picture, or figure shortcode — for example:
{{< img
process="fill 1600x900"
src="images/my-image.jpg"
alt="My super image in multiple formats!"
>}}
The above code will generate the following HTML, and allow the browser to determine the best image to display:
<img srcset="..." data-srcset="..." data-sizes="auto" src="..." width="1600" height="900" decoding="async" fetchpriority="auto" loading="lazy" alt="My super image in multiple formats!" class="blur-up lazyautosizes ls-is-cached lazyloaded" sizes="628px" />
Image render hook
You can add images to your .md pages by using the Markdown syntax for images.
The Markdown above get rendered into the following HTML:
<img src="/images/stars_hu5459c0360c2b0cb7a147d2df0eb350ca_80218_1920x1280_resize_q85_h2_lanczos.webp" width="410" height="274" decoding="async" fetchpriority="auto" loading="lazy" alt="A starry night sky" id="h-rh-i-1" />
Documentation website
To better explain the possibilities of Images, we launched a new documentation website: images.gethyas.com.
The new website contains handy how-to-guides and reference guides.
Acknowledgements
This release wouldn’t have been possible without the effort of the amazing open source community. Thank you, everyone.