WebP in Digitalpublishing

[digitalpuls]

Actual behaviour

Not able to load .webp file in Shopware Digital Publishing images element

Expected behaviour

Load optimized WebP instead of PNG

Environment

Shopware 5.6 with Plugin 1.1.1 on nginx 

Steps to reproduce

I read plugins might not be supported, but I'm guessing the shopware digital publishing uses the native elements vom the core. I tried to add the WebP Source in the file /views/swag_digital_publishing/components/image.tpl like this `{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} {if $element.orientation == "right"}float: {elseif $element.orientation == "left"}float: {else}text-align: {/if}{$element.orientation};"}

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

{$src = $element.media.source}
{$srcWebP = $element.media.webp.source}

{if $element.media.thumbnails}
    {foreach $element.media.thumbnails as $thumbnail}
        {if $thumbnail.maxWidth >= $element.maxWidth}
            {$src = $thumbnail.sourceSet}
            {$srcWebP = $thumbnail.webp.sourceSet}
            {break}
        {/if}
    {/foreach}
{/if}

<div class="dig-pub--image" style="{$style}">
    <div class="dig-pub--img-wrapper" style="{$wrapperStyle}">
        <picture>
            {*if isset($element.media.thumbnails.webp)*}
                <source data-srcset="{$srcWebP}"
                        type="image/webp"
                        class="dig-pub--img{if $element.class} {$element.class}{/if}  lazyload"
                        style="{$imageStyle}"
                        {if $element.alt} alt="{$element.alt}"{/if} />
            {*/if*}
            <img data-srcset="{$src}"
                 class="dig-pub--img{if $element.class} {$element.class}{/if}  lazyload"
                 style="{$imageStyle}"
                    {if $element.alt} alt="{$element.alt}"{/if} />
        </picture>
    </div>
</div>

{/block}`

the webp is on the server. I also tried srcSet instead of just src and $element.webp.media.source, but it doesn't load the file in html.

Checklist

• [x ] I have checked all issues and haven't found a similar report.
• [x ] I am using the latest stable version of this plugin.

--

[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?

[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}