1

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?

1 Answer 1

4

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

11
  • This doesn't work! Because the style block get's rendered as a CDATA
    – Plexus81
    Mar 10, 2014 at 14:08
  • To be fair, your question was how the browser would interpret such CSS, not how to construct it in a display template Mar 10, 2014 at 14:09
  • Anyhow, I updated my answer for you Mar 10, 2014 at 14:12
  • The title / topic of this question shows "display template". Anyhow I can't put the css in a separate file, because of the variable =#image#=
    – Plexus81
    Mar 10, 2014 at 14:23
  • I would set it with javascript instead (by appending the image to a data-attribute on the image and then set the style with js based on that attribute) :) Mar 10, 2014 at 14:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.