MyBB Hacks

.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

<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

<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?

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.