Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
 Use viewport size in a setvar
leefish Offline
Hamster
*****
Posts: 1,009
Joined: Apr 2010
Post: #1
Use viewport size in a setvar
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?



[Image: leelink.gif]
MYBB1.6 & XThreads
06-02-2014 01:20 PM
Visit this user's website Find all posts by this user Quote this message in a reply
ZiNgA BuRgA Offline
Fag
*******
Posts: 3,357
Joined: Jan 2008
Post: #2
RE: Use viewport size in a setvar
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.


My Blog
06-03-2014 09:57 AM
Find all posts by this user Quote this message in a reply
leefish Offline
Hamster
*****
Posts: 1,009
Joined: Apr 2010
Post: #3
RE: Use viewport size in a setvar
Thank you for the help; I used the new <picture> element in combination with a polyfill for older browsers.

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


[Image: leelink.gif]
MYBB1.6 & XThreads
06-10-2014 12:09 AM
Visit this user's website Find all posts by this user Quote this message in a reply

« Next Oldest | Next Newest »

 Standard Tools
Forum Jump: