Capture Screen Size in Hubl

[johnnyr209]

Is it possible to caputure the browser widow/screen size in Hubl?

OR

Is it possible to capture and pass it to Hubl using Javascript?

The following code is what I've tried so far but  Hubl doesn't seem to recognize the javascript.

<script type="text/javascript">
  let swidth = screen.width;
  if (swidth < 1025) {
    console.log("Mobile: Screen width is at least 1025px");
    {% set screensize = "mobile" %}
  } else {
    console.log("Desktop: Screen width is at greater than 1025px");
    {% set screensize = "desktop" %}
  }
</script>

[BarryGrennan]

I don't think you'll be able to do this. HubL is server side, so it does it's thing before the page loads.

JavaScript is client side, so you couldn't pass something back that way.

What are you trying to achieve with it? Maybe there's a different approach you can take

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[johnnyr209]

I am trying to capture when a user is on a mobile device or desktop.

[BarryGrennan]

I mean, you can do that with plain javascript at it's most basic you could get the window width:

let width = window.innerWidth;
if (width > 768) {
console.log('not mobile');
}

But as I've said you won't be able to pass that to hubl, that's why I ask what you're trying to achieve.

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[johnnyr209]

Yes, understood. But Im tryig to find a way for hubspot to recogize mobile vs desktop using hubl possibly without javascrip if possible.

[BarryGrennan]

Ok, well as I say you can't do that eith HubL and if you can't share anymore of what yo're trying to achieve we're at a bit of an impass.

I created a module for a client before where the hero video had to be different on mobile and achieved it with this use of javascript and module fields

{%require_js %}
 <script>
function videoSource() {
    if ($(window).width() < 768) {
    $('#hero-video source').attr('src', '{{ module.background.mobile.video }}');
    $('#hero-video').attr('poster', '{{ module.background.mobile.thumbnail.src }}');
   }
   else 
   {
    $('#hero-video source').attr('src', '{{ module.background.desktop.video }}');
    $('#hero-video').attr('poster', '{{ resize_image_url(module.background.desktop.thumbnail.src, 500) }}');                    
   }
   };
   </script>
{% end_require_js %}

But I couldn't possibly know if that's anywhere near your use case.

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn