Expand my Community achievements bar.

SOLVED

How to extend the core component teaser to accept webp format images?

Avatar

Level 5

Hello, what happens is that I want to allow the core teaser component to allow the user to upload images in webp format.

 

The core component is as default, the only thing I modified was the _cq_dialog and the .content.xml file.

 

<column
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/container">
    <items jcr:primaryType="nt:unstructured">
      <file
         jcr:primaryType="nt:unstructured"
         sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
         class="cq-droptarget"
         fileNameParameter="./fileName"
         fileReferenceParameter="./fileReference"
         mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml,image/webp]" <------ Just add image/webp
         name="./file"/>
    </items>
</column>

This already allows me to upload the image in webp format, the problem is that the image isn't rendered, that is, it's not displayed, although the file is uploaded correctly and the webp file is in the html code.

Aaron_Dempwolff_1-1691002611866.png

 

If I open the url of the webp file with the browser's console I get the following error:

Aaron_Dempwolff_0-1691002565874.png


Is it necessary to modify another file to allow viewing of the webp file or what could be the error?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

IMG_1101.pngHi @Aaron_Dempwolff, You need to enable "Enable Web Optimized Images" from Image (v3) Component Policy Configuration Properties.

Enable Web Optimized Images - When checked, the web-optimized image delivery service will deliver images in the WebP format, reducing image sizes on average by 25%.

  • This option is only available in AEMaaCS.
  • When unchecked or the web-optimized image delivery service is unavailable the Adaptive Image Servlet is used.

Reference 

https://experienceleague.adobe.com/docs/experience-manager-core-components/using/wcm-components/imag...

View solution in original post

7 Replies

Avatar

Level 5

In fact, it supports it, it's from the latest updates added:

 

https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/assets/file-format-...

 

But for some reason when I want to edit it in a core component it doesn't let me, since I've done it in various customs components and it lets it upload and view.

 

That's why I don't know if in the core components you have to move more things besides the .content.xml

Avatar

Community Advisor

Yeah @Aaron_Dempwolff  that makes sense. May be you can raise a question in https://github.com/adobe/aem-core-wcm-components/issues . I think they are the right group who can answer your question. 

 

Thanks

Veena ✌

Avatar

Correct answer by
Community Advisor

IMG_1101.pngHi @Aaron_Dempwolff, You need to enable "Enable Web Optimized Images" from Image (v3) Component Policy Configuration Properties.

Enable Web Optimized Images - When checked, the web-optimized image delivery service will deliver images in the WebP format, reducing image sizes on average by 25%.

  • This option is only available in AEMaaCS.
  • When unchecked or the web-optimized image delivery service is unavailable the Adaptive Image Servlet is used.

Reference 

https://experienceleague.adobe.com/docs/experience-manager-core-components/using/wcm-components/imag...

Avatar

Level 5

Yes, I understand that and I know that this option exists, but my users WANT to upload webp images, not to have them converted to webp resolution.

Avatar

Level 5

Yes, I understand that and I know that this option exists, but my users WANT to upload webp images, not to have them converted to webp resolution

Avatar

Community Advisor

@Aaron_Dempwolff For Core Components , you do not need to upload the webP images. Core Componetns already support the Web Optimized Image Delivery. The adobe documentation is very clear regarding the same. Please refer https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/web-opti...

Veena_Vikram_0-1691044994137.png

 

In case of custom components you can try https://experienceleague.adobe.com/docs/experience-manager-learn/cloud-service/developing/advanced/w... .