Use viewport size in a setvar

[leefish]

I am busy setting up a new forum layout and I wanted to use the following css for the thread view in forum display:

Code:

1 2 3 4 5 6 7 8 9 10 11 12

.threadlogo{ height:100px; margin:auto; max-width:100%; display:block; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; //background-image: /*needs to be in forumdisplay_thread*/ background-position:50% 50%; }

---

and I am setting the background image as a style in forumdisplay_thread where the background image is the uploaded coverpic

Code:

<div class="threadlogo nomobile" style="background-image:url({$GLOBALS['threadfields']['coverpic']['value']});"></div>

---

but I have a responsive site. I did not really want to use the full size image on the mobile and tablet variants as it will delay page loading.

What I  thought of doing was getting the viewport width via javascript and setting that as a variable for a template conditional and loading the resized mages (generated via an XThreads custom field) but I am unsure how to do that. I found this js snippet for getting viewport width

Code:

<script type="text/javascript"> <!-- var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight; //--> </script>

---

but I am unsure how to get that into a "setvar". Please can anyone help?

[ZiNgA BuRgA]

You can't.  Template conditionals are completely server side, Javascript is client side.

You can write template variables into Javascript eg

Code:

var imgUrl = <?=json_encode($GLOBALS['threadfields']['coverpic']['value'])?>;

---

but not the reverse (without making additional requests).

You'd probably have to write the code in Javascript.

[leefish]

Thank you for the help; I used the new <picture> element in combination with a polyfill for older browsers.

http://scottjehl.github.io/picturefill/