How can I habilitate Web-Optimized Image Delivery on my custom component?

[Aaron_Dempwolff]

Hello, I want to habilitate the option Web-Optimized Image Delivery on my custom component, the idea is that the user can upload an asset on the authoring configuration of the component (cq:dialog) and then convert the file on Webp Format, I was following the documentation of:

https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/web-opti...

And

https://experienceleague.adobe.com/docs/experience-manager-learn/cloud-service/developing/advanced/w...

But it doesn't work, I don't know if I need to make a step with other settings or if I made wrong a step, this is my Java Model of the component that I want to implement Web-Optimized Image Delivery, the property that have the asset is "fileReference":

package com.tfs.core.models;

import javax.annotation.PostConstruct;

import org.apache.commons.lang3.StringUtils;

import org.apache.sling.api.SlingHttpServletRequest;

import org.apache.sling.api.resource.Resource;

import org.apache.sling.models.annotations.Default;

import org.apache.sling.models.annotations.DefaultInjectionStrategy;

import org.apache.sling.models.annotations.Exporter;

import org.apache.sling.models.annotations.Model;

import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;

import com.adobe.cq.export.json.ExporterConstants;

@Model(adaptables = { Resource.class,

        SlingHttpServletRequest.class }, adapters = MosaicModel.class, resourceType = MosaicModel.RESOURCE_TYPE_MOSAIC, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)

@Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION)

public class MosaicModel {

    public static final String RESOURCE_TYPE_MOSAIC = "tfs/components/mosaic";

    @ValueMapValue(name = "title")

    @Default(values = StringUtils.EMPTY)

    private String title;

    @ValueMapValue(name = "subTitle")

    @Default(values = StringUtils.EMPTY)

    private String subTitle;

    @ValueMapValue(name = "fileReference")

    @Default(values = StringUtils.EMPTY)

    private String fileReference;

    @PostConstruct

    protected void init() {

    }

    public String getTitle() {

        return title;

    }

    public String getSubTitle() {

        return subTitle;

    }

    public String getFileReference() {

        return fileReference;

    }

}

[Mahedi_Sabuj · Accepted solution]

HI @Aaron_Dempwolff,

You need to implement AssetDelivery.getDeliveryURL in your Sling Model. Check ExampleWebOptimizedImagesImpl from here: Web-optimized image delivery Java™ APIs.

The AssetDelivery OSGi Service is only satisfied when running in AEM as a Cloud Service. On AEM SDK, references to the AssetDelivery OSGi service return null.

Here is the Sample Code:

public class MosaicModel {
  @Reference(cardinality = ReferenceCardinality.OPTIONAL)
  private volatile AssetDelivery assetDelivery;

  @Self
  @Required
  private SlingHttpServletRequest request;

  private String getWebOptimizedUrl(
    ResourceResolver resourceResolver, 
    String path, Map<String, Object> options) {
        
    Resource resource = resourceResolver.getResource(path);
    Asset asset = DamUtil.resolveToAsset(resource);

    // These 3 options are required for the AssetDelivery API to work
    // Else it will return null
    options.put("path", asset.getPath());
    options.put("format", options.get("format"));
    options.put("seoname", options.get("seoname"));

    return assetDelivery.getDeliveryURL(resource, options);
  }

  public String getFileReference() {
    // Set the AssetDelivery options to request a web-optimized rendition.
    // These options can be set as required by the implementation 
    // (Dialog, pass in from HTL via @RequestAttribute)
    final Map<String, Object> options = new HashMap<>();
    options.put("format", "webp");
    options.put("preferwebp", "true");
    options.put("width", "350");
    options.put("height", "350");

    return getWebOptimizedUrl(
      request.getResourceResolver(), fileReference, options);
  }
}

[Aaron_Dempwolff]

Thank you very much, I will try to integrate the API to my Java class, I have only one question, one of the errors I had is with the library:

com.adobe.cq.wcm.spi.AssetDelivery

I couldn't find it, all the other libraries if it finds them but this one in specific not, I am using the version of AEM 6.5.

What can cause that it doesn't find the library, does it have to do with that I have to modify the path of the library in another way or do I have to install something else?

[Mahedi_Sabuj]

Import is functioning correctly when using Uber-Jar version 6.5.15. However, when employing Uber-Jar version 6.5.0, there is an issue with the "cannot be resolved" error. You may want to consider resolving this by updating your Uber-Jar version.

While the AssetDelivery import works in AEM 6.5.15, it's important to note that this functionality is available exclusively for AEM as a Cloud Service (AEMaaCS).

[Aaron_Dempwolff]

Is there any tutorial or documentation of how to update uber-jar?

[Mahedi_Sabuj]

https://experienceleague.adobe.com/docs/experience-manager-65/release-notes/release-notes.html?lang=...

<dependency>
  <groupId>com.adobe.aem</groupId>
  <artifactId>uber-jar</artifactId>
  <version>6.5.15</version>
  <!--<classifier>apis</classifier>-->
  <scope>provided</scope>
</dependency>

UberJar and the other related artifacts are available on Maven Central Repository instead of Adobe Public Maven repository (repo.adobe.com). The main UberJar file is renamed to uber-jar-<version>.jar. So, there is no classifier, with apis as the value, for the dependency tag.