Show mobile image when it exists

Question

Hello,

I have a CMS own and encoded a feature to allow, in addition to uploading image of default size, a second image mobile that will be shown with media query when the resolution is less than 768px, for this includes the "mobile" class. Today the system continues to show the default image, adjusting it responsibly with bootstrap.

By the time I publish this feature in production environment I would like the images that already exist and are in the air to continue working with the responsive and only when there is a mobile image, it is presented in place.

See below for simplified html and css

<div class="container-image">
    <img src="caminho da imagem padrão" class="show"></img>
    <img src="caminho da imagem mobile" class="show mobile"></img>
</div>

div.container-image img.mobile { display: none; }
@media only screen and (max-width: 768px) {
    div.container-image img.show {
        display: none; 
    }
    div.container-image img.show.mobile   {
        display: block; 
    }
}

My question is, is there a way to do it without using javascript? Remembering that it is a CMS and the whole html is stored in the database.

Answer 1

The old images are also involved by div.image-container (I imagine not, because your code would already work)? If so, you can simply use another class (e.g. image-responsive-container) for these new responsive images; so your new styles won’t apply to the old images and you can create mobile versions of the images that are already in the system gradually.