Picking images for different screen sizes | Community
Skip to main content
S
Sutty100
New Participant
April 28, 2016
Solved

Picking images for different screen sizes

  • April 28, 2016
  • 5 replies
  • 2998 views

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.
    Best answer by Tuhin_Ghosh

    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

    5 replies

    S
    Sutty100Author
    New Participant
    April 29, 2016

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

    Tuhin_Ghosh
    Tuhin_GhoshAccepted solution
    New Participant
    April 28, 2016

    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

    kautuk_sahni
    kautuk_sahni
    Employee
    April 28, 2016

    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

    Kautuk Sahni
      S
      Sutty100Author
      New Participant
      April 28, 2016

      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 

      edubey
      edubey
      New Participant
      April 28, 2016

      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

      Terms & ConditionsAccessibility statement

      Loading footer...