thumbnail images auto update

[udhayaprakash]

Hi All , 

I have an requirement for thumbnail images in page properties. 

our current thumbnail images loads from the template , where it will pick automatically for all the pages . 

but our new requirement is to have different image for different status of the page.

for exapmle : if the page is published i want to dispaly some images 

                      if the page is not published i want to dispaly some images .

how can i achevie this , any sugesstions ?

[K_M_K_Srikanth]

Use cq:thumbnail Property Dynamically with Workflow or Launches

To dynamically set the cq:thumbnail property of the page:

• Write a custom workflow process step or sling job that:

  • Detects the page status (published/unpublished).

  • Sets cq:thumbnail on the page node to the appropriate DAM asset path.

This allows AEM’s default thumbnail logic to pick up the right image.

Sample implementation:

// Simple logic to set cq:thumbnail based on publish status
Page page = resource.adaptTo(Page.class);
ReplicationStatus status = page.adaptTo(ReplicationStatus.class);
ModifiableValueMap props = resource.adaptTo(ModifiableValueMap.class);

if (status != null && status.isActivated()) {
    props.put("cq:thumbnail", "/content/dam/thumbnails/published.png");
} else {
    props.put("cq:thumbnail", "/content/dam/thumbnails/unpublished.png");
}

[udhayaprakash]

HI @K_M_K_Srikanth 

Thanks for the sugesstion , 

but setting this property

props.put("cq:thumbnail", "/content/dam/thumbnails/published.png");

have no effect on page properties , its still showing the default image from the template , 

and I have noticed a one more thing , 

when we upload the thumbnail manually in page properties 

it is creating a structure  like this 

how can we create this strucure ?

[K_M_K_Srikanth]

hi @udhayaprakash 

You can use curl scripts to create this structure, also if the above option did not work, then please check the below option as well

1. Create a Sling Model

Path: core/src/main/java/com/yourproject/core/models/PageStatusThumbnailModel.java

package com.yourproject.core.models;

import com.day.cq.replication.ReplicationStatus;
import com.day.cq.wcm.api.Page;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.ScriptVariable;
import javax.inject.Inject;

@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class PageStatusThumbnailModel {

    @ScriptVariable
    private Page currentPage;

    public String getThumbnailPath() {
        if (currentPage != null) {
            ReplicationStatus status = currentPage.adaptTo(ReplicationStatus.class);
            if (status != null && status.isActivated()) {
                return "/content/dam/project/thumbnails/published.png";
            } else {
                return "/content/dam/project/thumbnails/unpublished.png";
            }
        }
        return "/content/dam/project/thumbnails/default.png";
    }
}

 2. Update the Page Properties Dialog

Path: /apps/yourproject/components/page/cq:dialog/content/items/tabs/items/basic/items/thumbnailImage

Add a new image field (read-only display, optional):

<thumbnailImage
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/image"
    src="${request.resource.path @ context='uri'}/jcr:content.thumbnailPath.json"
    alt="Page Thumbnail"
    title="Page Status Thumbnail"
    height="100"
    width="100"/>

src will be served by a JSON servlet or directly from the model if bound properly.

3. Create a Servlet (if needed) to expose thumbnail path

(Optional if model can't be bound directly to UI)

Path: core/src/main/java/com/yourproject/core/servlets/ThumbnailServlet.java

package com.yourproject.core.servlets;

import com.day.cq.wcm.api.Page;
import com.day.cq.replication.ReplicationStatus;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ResourceResolver;
import org.apache.sling.api.servlets.SlingAllMethodsServlet;
import org.osgi.service.component.annotations.Component;
import javax.servlet.Servlet;
import javax.servlet.ServletException;
import java.io.IOException;

@Component(service = Servlet.class,
        property = {
                "sling.servlet.paths=/bin/thumbnailstatus",
                "sling.servlet.methods=GET"
        })
public class ThumbnailServlet extends SlingAllMethodsServlet {

    @Override
    protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response)
            throws ServletException, IOException {

        ResourceResolver resolver = request.getResourceResolver();
        Resource resource = request.getResource();
        Page page = resource.adaptTo(Page.class);
        String thumbnail = "/content/dam/project/thumbnails/default.png";

        if (page != null) {
            ReplicationStatus status = page.adaptTo(ReplicationStatus.class);
            if (status != null && status.isActivated()) {
                thumbnail = "/content/dam/project/thumbnails/published.png";
            } else {
                thumbnail = "/content/dam/project/thumbnails/unpublished.png";
            }
        }

        response.setContentType("application/json");
        response.getWriter().write("{\"thumbnailPath\":\"" + thumbnail + "\"}");
    }
}

Then update the src in dialog to:

src="/bin/thumbnailstatus${request.suffix}"

---

 4. Deploy and Test

• Navigate to Page Properties of a page

• Observe the thumbnail field shows different image depending on the page’s publish status

---

[giuseppebag]

Hi @udhayaprakash, I believe you’ll find this guide from @arunpatidar very useful: https://aemlab.blogspot.com/2022/07/aem-authoring-page-status-visualisation.html. It shows how to add a different icon based on the page status.

[AmitVishwakarma]

Hi @udhayaprakash ,

Try with Sling Job or Workflow Process Step:

1. Add Two Thumbnail Images to DAM:

Upload the following:

  - /content/dam/thumbnails/published.png

  - /content/dam/thumbnails/unpublished.png

2. Java Code – Sling Job / Workflow Step:

@Component(
    service = Runnable.class,
    immediate = true,
    property = {
        "scheduler.expression=0 0/1 * 1/1 * ?",
        "scheduler.concurrent=false"
    }
)
public class PageThumbnailUpdater implements Runnable {

    @Reference
    private ResourceResolverFactory resolverFactory;

    private static final String SERVICE_USER = "writeService";

    @Override
    public void run() {
        try (ResourceResolver resolver = resolverFactory.getServiceResourceResolver(
                Collections.singletonMap(ResourceResolverFactory.SUBSERVICE, SERVICE_USER))) {

            Session session = resolver.adaptTo(Session.class);
            PageManager pageManager = resolver.adaptTo(PageManager.class);

            // Example: Update thumbnails under /content/my-site
            Iterator<Page> pages = pageManager.getPage("/content/my-site").listChildren();

            while (pages.hasNext()) {
                Page page = pages.next();
                updateThumbnailForPage(page.getPath(), resolver);
            }

        } catch (Exception e) {
            // Proper logging
        }
    }

    private void updateThumbnailForPage(String pagePath, ResourceResolver resolver) {
        Resource contentResource = resolver.getResource(pagePath + "/jcr:content");

        if (contentResource != null) {
            ReplicationStatus status = contentResource.adaptTo(ReplicationStatus.class);
            ModifiableValueMap props = contentResource.adaptTo(ModifiableValueMap.class);

            if (status != null && props != null) {
                String newThumbnail = status.isActivated()
                        ? "/content/dam/thumbnails/published.png"
                        : "/content/dam/thumbnails/unpublished.png";

                props.put("cq:thumbnail", newThumbnail);
                try {
                    resolver.commit();
                } catch (PersistenceException e) {
                    // Handle exception
                }
            }
        }
    }
}

3. Add System User Permissions

Create a service user (writeService) with access to modify pages:

/home/users/system/your-project/writeService

Give jcr:read and jcr:modifyProperties on:

  - /content/your-site

  - /content/dam/thumbnails

4. Register in subservice Mapping:
Add to Apache Sling Service User Mapper config:

your-project.core:writeService=writeService
​

Regards,
Amit

[Supriya_Savre]

Hi @udhayaprakash,

Did the shared solution help you out? If yes, kindly consider marking the most suitable answer as ‘correct’.

If you’re still facing any challenges, please feel free to continue the conversation here. We’re happy to support further.