Image option for mobile and desktop version

[kullschmittgall]

How do I create two different options of an image for the mobile and the destop version? 

I want a diagram to be displayed in landscape for the desktop version and portrait for the mobile version. 

Do I have to add the module in the design manager and change the html there?

[dbeau79 · Accepted solution]

@kullschmittgall , are you using a custom module or hubspot image module?  If hubspot image module, and admittedly it's not ideal you could add both images and use the mobile toggle functionality now available in themes (see here for how to set it up if it's not already on your theme: https://developers.hubspot.com/docs/cms/building-blocks/themes/responsive-breakpoints😞

Of if it's a custom module you could set up the image like this: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_picture

[Skotee]

@webdew I tried the second method, but the mobile image doesn't seem to appear. 

Any thoughts?   

[webdew · Accepted solution]

Hi @kullschmittgall ,

For this requirement, you can create a custom module. First, you have to add two images add two different divs's and add your images separately in that div. Now one div is for the desktop view and the second one is for the mobile. Now add display none class in mobile div. so that only desktop images displays.

Now you have to add the media query on 481px. where you have to display block the mobile div and display none the desktop. So that mobile image is display and desktop image not.

HTML CODE :- 

<div class="cust-image">

    <div class="desktop-image">

        <img src="desktop-image">

    </div>

    <div class="mobile-image">

        <img src="mobile-image">

    </div>

</div>

CSS Code :-

.mobile-image

{

display: none;

}

@media only screen and (max-width: 481px) 

{

  .mobile-image

{

display: block;

}

.desktop-image

{

display: none;

}

}

Hope this helps.

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

[dbeau79 · Accepted solution]

@kullschmittgall , are you using a custom module or hubspot image module?  If hubspot image module, and admittedly it's not ideal you could add both images and use the mobile toggle functionality now available in themes (see here for how to set it up if it's not already on your theme: https://developers.hubspot.com/docs/cms/building-blocks/themes/responsive-breakpoints😞

Of if it's a custom module you could set up the image like this: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_picture