topic Re: Capture Screen Size in Hubl in APIs & Integrations

Capture Screen Size in Hubl

johnnyr209 — Thu, 17 Nov 2022 17:01:09 GMT

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

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.

Re: Capture Screen Size in Hubl

BarryGrennan — Fri, 18 Nov 2022 01:57:00 GMT

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

Re: Capture Screen Size in Hubl

johnnyr209 — Mon, 21 Nov 2022 15:09:15 GMT

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

Re: Capture Screen Size in Hubl

BarryGrennan — Mon, 21 Nov 2022 16:50:16 GMT

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

Re: Capture Screen Size in Hubl

johnnyr209 — Mon, 21 Nov 2022 17:09:18 GMT

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

Re: Capture Screen Size in Hubl

BarryGrennan — Mon, 21 Nov 2022 18:19:29 GMT

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