Level 2

Solved

thumbnail images auto update

Forum|Forum|9 months ago
May 15, 2025
3 replies
686 views

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 ?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by giuseppebaglio

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.

K_M_K_Srikanth

Level 2

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");
}

U

udhayaprakashAuthor

Level 2

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

Level 2

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

giuseppebaglioAccepted solution

Level 10

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

Community Advisor

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

Level 4

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.

Use cq:thumbnail Property Dynamically with Workflow or Launches

1. Create a Sling Model

2. Update the Page Properties Dialog

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

4. Deploy and Test

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded