Main Content

Magnolia Community Forums: Development: Different Image-Variation for Retina-Displays


  • proland
    proland
    Full name: Philipp Roland
    Posts: 14
    Last post: Jul 7, 2017 9:22:33 AM
    Different Image-Variation for Retina-Displays
    #1 by proland on Mar 21, 2017 4:35:48 PM

    Hi all

    I'd like to deal with different Image-Variation in our Text-Image-Component, if the Client is a "High-Density"-Screen (for example Retina-Display).

    With the following JavaScript-Code I can detect, if the Device uses a High-Density-Screen:

    function isHighDensity(){
    return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 1.3));
    }

    What I'd like to do now is something like in the following Pseudo-Code:
    ...
    if(isHighDensity())
    imageRendition = damfn.getRendition(image, "image-with-retina")
    else
    imageRendition = damfn.getRendition(image, "image")
    ...


    But clearly I have a Problem, that I couldn't use the JavaScript in the FTL.

    But is there a way to handle Images differently depending on the Screen-Resolution?

    Thanks for any suggestions.

    Roland

  • jdiepeveen
    jdiepeveen
    Full name: Jordie Diepeveen
    Posts: 3
    Last post: Mar 24, 2017 8:36:03 PM
    Re: Different Image-Variation for Retina-Displays
    #2 by jdiepeveen on Mar 24, 2017 7:40:19 PM

    Hi Roland,

    A solution will be to get the 2 different image variations in the freemarker template and let your front-end code render the correctly image.
    You can e.g. set the retina image on a data attribute in the freemarker template:

    [#assign image = damfn.getAssetLink(content.image, "image")]
    [#assign retinaImage = damfn.getAssetLink(content.image, "image-with-retina")]
    <img src="${image} data-retina-src="${retinaImage}">


    There are lots of retina Javascript plugins/frameworks out there which can, bases on the client, render the correct image.
    e.g.:
    http://foundation.zurb.com/sites/docs/v/5.5.3/components/interchange.html
    http://bootbites.com/tutorials/how-make-your-bootstrap-site-retina-ready

  • proland
    proland
    Full name: Philipp Roland
    Posts: 14
    Last post: Jul 7, 2017 9:22:33 AM
    Re: Different Image-Variation for Retina-Displays
    #3 by proland on Apr 10, 2017 10:59:28 AM

    Hi Jordie

    Thanks (and sorry for my late answer). Will give it a try.

    Roland

You don't have the permission to post on this thread

Sign in

To login on this forum, you can use your Magnolia Forge, Support or Partner account, or, below, your Google, Yahoo! or OpenID account. If you have trouble logging in, or any other sort of issue, please let us know in the Meta forum, on the user-list, or simply by email at forum-admin at magnolia-cms dot com.

* Required

... or sign in with:

  • icon http://{your-openid-url}
  • icon
  • icon https://me.yahoo.com/