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.

Active Installs
25
Version
1.0.3
License
MIT
Compatibility
Craft 4, Craft 5
Last release
May 14, 2024
Activity (30 days)
2
Closed Issues
0
Open Issues
0
Merged PRs
0
Open PRs