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
Rating: 5 out of 5 stars
Active Installs
143
Version
1.0.5
License
MIT
Compatibility
Craft 4, Craft 5
Last release
September 24, 2024
Activity (30 days)
0
Closed Issues
0
Open Issues
0
Merged PRs
0
Open PRs