Imager X Power Pack
Unlocks a stash of hidden weapons in your quest to optimize images, while simultaneously saving time and reducing cognitive load. It's a good deal!
Wouldn't it be great if you could replace this:
{% set transformsWebpBig = craft.imagerx.transformImage(heroImage, 'articleHeroWebpBig') %}
{% set transformsWebpSmall = craft.imagerx.transformImage(heroImage, 'articleHeroWebpSmall') %}
{% set transformsJpgBig = craft.imagerx.transformImage(heroImage, 'articleHeroFallbackBig') %}
{% set transformsJpgSmall = craft.imagerx.transformImage(heroImage, 'articleHeroFallbackSmall') %}
{% set widthBig = (transformsJpgBig|last).width|default %}
{% set heightBig = (transformsJpgBig|last).height|default %}
{% set width = (transformsJpgSmall|last).width|default %}
{% set height = (transformsJpgSmall|last).height|default %}
<picture>
<source srcset="{{ transformsWebpBig|srcset }}" media="(min-width: 750px)" type="image/webp" sizes="(min-width: 750px) 50vw, 100vw" />
<source srcset="{{ transformsJpgBig|srcset }}" media="(min-width: 750px)" sizes="(min-width: 750px) 50vw, 100vw" />
<source srcset="{{ transformsWebpSmall|srcset }}" type="image/webp" sizes="(min-width: 750px) 50vw, 100vw" />
<img src="{{ craft.imagerx.placeholder({ width, height }) }}"
width="{{ width }}"
height="{{ height }}"
sizes="(min-width: 750px) 50vw, 100vw"
srcset="{{ transformsJpgSmall|srcset }}"
alt="{{ heroImage.altText }}" />
</picture>
With... this?
{{ pppicture([
[heroImage, 'articleHeroWebpBig', 750, 'webp'],
[heroImage, 'articleHeroFallbackBig', 750],
[heroImage, 'articleHeroWebpSmall', 'webp'],
[heroImage, 'articleHeroFallback']
], {
sizes: '(min-width: 750px) 50vw, 100vw'
}) }}
The Power Pack comes with several convenient Twig functions that will help you craft optimal responsive images with all best-practices built-in. It won't be a good fit for all use-cases, but aims to turbo charge most of your responsive images needs.
For more details, check out the documentation or the launch blog post.
Installation Instructions
To install this plugin, copy the command above to your terminal.
2 Reviews All reviews
5/ 5
Active Installs
143
License
MIT
Last release
September 24, 2024
Activity (30 days)
0
Closed Issues
0
Open Issues
0
Merged PRs
0
Open PRs