Retrieving the user-agent for Tablet

[#1]

Hello Community - We are detecting the user-agent(Desktop/Mobile/Tablet) using WCMUsePojo and based on the user-agent, we are showing the appropriate content in HTL. It is working only for Mobile but when we use "Tablet", it is not working. Can you let me how to retrieve it for tablet?

public void activate() throws Exception {

setMobile(getRequest().getHeader("User-Agent").indexOf("Mobile") != -1 ? Boolean.TRUE: Boolean.FALSE);

}

[viki1101 · Accepted solution]

Hi @viki1101, 

Unlike Mobile, there is no generic name for Tablets in User-Agent Header. For iPad, you can make use of the string "iPad"

Below site has the list of all possible User-Agent values for Tablet. If you have specific list of supported devices, you can write condition accordingly

• https://deviceatlas.com/blog/list-of-user-agent-strings#tablet

As an alternative, there are several other options available for device specific logic.

Could you please brief about your component functionality.

[viki1101 · Accepted solution]

@Vijayalakshmi_S - Thanks for your expedited response. We have an image component. In that component, authors will upload the image for desktop only. Based on the user-agent, i.e for Tablet & Mobile, we need to apply the renditions (Adding path at the suffix for the selected image URL) and based on the user-agent, will show the appropriate image for Tablet and Mobile devices.

[Vijayalakshmi_S · Accepted solution]

Hi @viki1101,

Thanks for the details.

You can make use of Core Image component which is an Adaptive Image component that offers responsive features with lazy loading. 

In the design dialog of the component, we have an option to mention all possible width and component will then load the respective width based on the size of the window.

More about this in below docs

• https://docs.adobe.com/content/help/en/experience-manager-core-components/using/components/image.htm...
• https://www.aemcomponents.dev/content/core-components-examples/library/page-authoring/image.html

If you can't switch component, another option is to use JS to handle device specific image path(src)

Frame the HTL with actual image path -> Amend the src based on the device in JS. Something like below can be tried.

• Get the image src value - $("img").attr("src");
• Frame mobile and tablet path using the value above 
• Target specific device using - $(window).width() 
• Amend the image src value with respective device path - $(img).attr("src", mobileSrc/tabletSrc)

[viki1101 · Accepted solution]

@Vijayalakshmi_S - Thank you so much for your imputs. will try this option (JS)

[Vijayalakshmi_S · Accepted solution]

No worries. Update this thread in case of any issues.