Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Screen Width - Sightly/HTL

Avatar

Avatar
Validate 25
MVP
Singaiah_Chintalapudi
MVP

Likes

130 likes

Total Posts

233 posts

Correct Reply

37 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Ignite 5
Ignite 3
View profile

Avatar
Validate 25
MVP
Singaiah_Chintalapudi
MVP

Likes

130 likes

Total Posts

233 posts

Correct Reply

37 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Ignite 5
Ignite 3
View profile
Singaiah_Chintalapudi
MVP

12-09-2019

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 1
MVP
ArpitVarshney
MVP

Likes

135 likes

Total Posts

185 posts

Correct Reply

36 solutions
Top badges earned
Validate 1
Establish
Give Back 5
Give Back 3
Give Back 25
View profile

Avatar
Validate 1
MVP
ArpitVarshney
MVP

Likes

135 likes

Total Posts

185 posts

Correct Reply

36 solutions
Top badges earned
Validate 1
Establish
Give Back 5
Give Back 3
Give Back 25
View profile
ArpitVarshney
MVP

16-09-2019

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>

Answers (1)

Answers (1)

Avatar

Avatar
Validate 25
MVP
Singaiah_Chintalapudi
MVP

Likes

130 likes

Total Posts

233 posts

Correct Reply

37 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Ignite 5
Ignite 3
View profile

Avatar
Validate 25
MVP
Singaiah_Chintalapudi
MVP

Likes

130 likes

Total Posts

233 posts

Correct Reply

37 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Ignite 5
Ignite 3
View profile
Singaiah_Chintalapudi
MVP

16-09-2019

Hi,

Can someone help with the above?

Thanks.