Expand my Community achievements bar.

SOLVED

Screen Width - Sightly/HTL

Avatar

Community Advisor

Hello,

Currently, I have a html5 video on my component. This is a interactive video and plays upon page load. I would like not to play the video on mobile. So, I am trying to get a screen width on Sightly so I can add a condition on Sightly/HTL to inject this video only if screen width is > 480. I know that Sightly/HTL executes on Server Side.

Any ideas to get the screen width to inject a video html based on width would be appreciated.

Thanks.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

As mentioned in the post(how to hide header menu item when using mobile devices? ),Please write your logic in SlingModel/Wcmusepojo class to check whether the device is mobile or not and put a check in htl like below:

package com.dev.java;

public class Main extends WCMUsePojo{

private boolean mobile;

@Override

public void activate() throws Exception {

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

}

public boolean isMobile() {

return mobile;

}

public void setMobile(boolean mobile) {

this.mobile = mobile;

}

}

Corresponding SIGHTLY

<div data-sly-use.main="com.dev.java.Main">

<sly data-sly-test.isMobile="${main.isMobile}">

     video

</sly>

View solution in original post

4 Replies

Avatar

Community Advisor

Hi,

Can someone help with the above?

Thanks.

Avatar

Correct answer by
Community Advisor

As mentioned in the post(how to hide header menu item when using mobile devices? ),Please write your logic in SlingModel/Wcmusepojo class to check whether the device is mobile or not and put a check in htl like below:

package com.dev.java;

public class Main extends WCMUsePojo{

private boolean mobile;

@Override

public void activate() throws Exception {

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

}

public boolean isMobile() {

return mobile;

}

public void setMobile(boolean mobile) {

this.mobile = mobile;

}

}

Corresponding SIGHTLY

<div data-sly-use.main="com.dev.java.Main">

<sly data-sly-test.isMobile="${main.isMobile}">

     video

</sly>

Avatar

Administrator
Very details reply. Thanks for answering.


Kautuk Sahni