SharePoint 2013 - Display templates - media queries to get image rendition on images based on screen size

Question

I know I could use device channels to do this, but is there a way to get right image rendition with media queries?

item display template
<div class="image">
     <style>
    @media only screen and (max-width: 320px) {
        #image { 
            background-image: _=#image#=_?RenditonID=1); 
        }
    }
    @media only screen and (min-width: 320px) {
        #image { 
            background-image: _=#image#=_?RenditonID=2); 
        }
    }
   </style>
</div>

=#image#= is a variable so I can't put the media queries inside a css file

Would this work? Do the server send both pictures or would only one of those get out to the client? If both are sent from the server to the client, is there a way to only send the correct one?

Answer 1

Since it is CSS attributes, the server will not send any of the pictures until the browser parses the CSS and request one of the images based on how it interprets the CSS. Too me, I do not see why this shouldn't work.

Just give it a try and then use fiddler or similar to se which requests and responses are sent between the browser and the server.

To include CSS, you need to use one of the following tags:

$includeCSS(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Content Web Parts/MyCSS.css");

or

$includeCSS(this.url,"../../MyStyles/MyCSS.css");

See here: http://msdn.microsoft.com/en-us/library/jj945138.aspx

Problem for you is that you need the variable _=#image#=_ to set the correct image, for that I would use JS instead,

First set the image to the images as a data-image-attribute

<div class="image-to-fix" data-image="_=#image#=_"></div>

then register a script:

<!--#_
AddPostRenderCallback(ctx, function()
{              
     //code to execute
});
_#-->

If we say you have jQuery, you then can do:

<!--#_
AddPostRenderCallback(ctx, function()
{    
     var width = $(window).width();
     var rendition = '?RenditionID=2'; 
     if(width <= 320){
         rendition = '?RenditionID=1';
     }
     jQuery('.image-to-fix').each(function(){
           jQuery(this).css('background-image', jQuery(this).attr('data-image') + rendition);
     });
});
_#-->

Have not tested this code, but it should get you an idea