Skip to main content
Sutty100
Level 4
Apr 28, 2016 8:49 AM UTC
Solved

Picking images for different screen sizes

I was wondering if there was a feature out of the box I can use to fulfills the requirements of our content creators.

They want to be able to specify that once the screen drops below a certain width: eg on a mobile that the image being displayed would switch from the desktop image which for example might have text on it that has become to small to read to a different image which does not have any text on it. I was wondering if this is something that could be achieved by using the renditions feature in some way?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Tuhin_Ghosh
    Tuhin_GhoshAccepted solution
    Level 8
    Apr 28, 2016 11:45 PM UTC

    You can also try to create different rendition for you images and use cssmagic to render different images based on the resolution of the screen.

    Thanks

    Tuhin

    View in thread

    5 replies

    edubey
    edubey
    Level 10
    Apr 28, 2016 8:53 AM UTC

    AEM does have this with Adaptive Image Component, You author 1 image, rest will taken care by it.

    They have good documentation on this, Refer: https://docs.adobe.com/docs/en/aem/6-0/develop/mobile/responsive.html#Using Adaptive Images

    Thanks

    Translate
    Sutty100Author
    Level 4
    Apr 28, 2016 9:05 AM UTC

    I don't think that will handle my requirements. I want to be able to say show /dam/image1.png by default but if screen width goes below a threshold then show /dam/image2.png 

    Translate
    kautuk_sahni
    kautuk_sahni
    Level 9
    Apr 28, 2016 9:47 AM UTC

    Hi

    You can achieve this using CSS Media Queries,

    Example Demo 1:- http://jsfiddle.net/vk02svc6/

    HTML

    <img src="image.jpg" class="image1"/> <img src="image.jpg" class="image2"/>

    CSS

    .image2{ display: none; } @media only screen and (max-width: 500px){ //some value .image1{ display: none; } .image2{ display: block; } }
     

    Example Demo 2:- http://jsfiddle.net/vk02svc6/1/

    HTML

    <div class="example"></div>

    CSS

    .example{ background-image: url("example.jpg"); } @media only screen and (max-width: 500px){ //some value .example{ background-image: url("example2.jpg"); } }

     

    I hope this would help.

    Thanks and Regards

    Kautuk Sahni

    Translate
    Kautuk Sahni
      Tuhin_Ghosh
      Tuhin_GhoshAccepted solution
      Level 8
      Apr 28, 2016 11:45 PM UTC

      You can also try to create different rendition for you images and use cssmagic to render different images based on the resolution of the screen.

      Thanks

      Tuhin

      Translate
      Sutty100Author
      Level 4
      Apr 29, 2016 7:37 AM UTC

      Thanks couple of solutions to investigate more, i think the renditions and using css might be quite promising. 

      Translate
      Terms & ConditionsAccessibility statement

      Loading footer...