WebP in Digitalpublishing about froshwebp

[LiaraAlis]

@blockberd Currently I use this template in our theme:

{extends file='parent:widgets/swag_digital_publishing/components/cover.tpl'}

{block name='widgets_digital_publishing_components_cover'}
    {if $media.attributes.webp}
        {$data = "{$media.attributes.webp.image} base"}
    {else}
        {$data = "{$media.source} base"}
    {/if}

    {if $media.thumbnails}
        {foreach $media.thumbnails as $image}
            {if $image.webp}
                {$data = "{$data}, {$image.webp.source} {$image.webp.maxWidth}"}
            {else}
                {$data = "{$data}, {$image.source} {$image.maxWidth}"}
            {/if}

            {if $image.webp.retinaSource}
                {$data = "{$data}, {$image.webp.retinaSource} {$image.webp.maxWidth} 2x"}
            {elseif $image.retinaSource}
                {$data = "{$data}, {$image.retinaSource} {$image.maxWidth} 2x"}
            {/if}
        {/foreach}
    {/if}

    <div class="cover"
         data-cover="true"
         data-srcSet="{$data}"
         {if $position}data-position="{$position}"{/if}>
    </div>
{/block}

[shyim]

I guess the replacement does not happen on the <source element. How looks the rendered html?

[digitalpuls]

Thanks for the quick reply!
You mean like in the picture:

Am I placing it correctly?

[LiaraAlis]

@digitalpuls You can use this template. Tested in our theme and working.

{extends file='parent:widgets/swag_digital_publishing/components/image.tpl'}

{block name='widgets_digital_publishing_components_image_element'}
    {$style = "padding: {$element.paddingTop / 16}rem {$element.paddingRight / 16}rem {$element.paddingBottom / 16}rem {$element.paddingLeft / 16}rem;"}
    {$style = "{$style} text-align: {$element.orientation};"}

    {$wrapperStyle = "max-width: {$element.maxWidth / 16}rem;"}
    {$imageStyle = "max-height: {$element.maxHeight / 16}rem;"}

    {$src = $element.media.source}

    {if $element.media.thumbnails}
        {foreach $element.media.thumbnails as $thumbnail}
            {if $thumbnail.maxWidth >= $element.maxWidth}
                {$src = $thumbnail.sourceSet}
                {break}
            {/if}
        {/foreach}
    {/if}
    <div class="dig-pub--image" style="{$style}">
        <div class="dig-pub--img-wrapper" style="{$wrapperStyle}">
            <picture>
                {if $thumbnail.webp}
                    <source srcset="{$thumbnail.webp.sourceSet}" type="image/webp">
                {/if}
                <img srcset="{$src}"
                     class="dig-pub--img{if $element.class} {$element.class}{/if}"
                     style="{$imageStyle}"
                        {if $element.alt} alt="{$element.alt}"{/if} />
            </picture>
        </div>
    </div>
{/block}

Now I'm also searching for a solution for the cover.tpl template. :D

@shyim Can we add this to the plugin?

[shyim]

Can you make here too an PR? :)

[LiaraAlis]

@shyim Also done.

[blockberd]

Now I'm also searching for a solution for the cover.tpl template. :D

Hello, where you able to find a solution for the cover.tpl? I'm currently stuck on that part and not able to find a way to implement it. I think my issue might be from the fact that the WebP files are only generated for the thumbnails but the images used in cover.tpl do not follow the same thumbnail structure / are no real thumbnails.

Any ideas?