eWordpress change image url by responsive breakpoint? - css

Question

I'm searching a way to EASILY add responsive alternative images to content. For example I have three different images, one for each size (desktop, tablet and mobile) and would like to show them according to responsive breakpoints.
Foundation framework has "interchange" built in, but there is no easy way to add the images except by adding the code:
<img data-interchange="[/path/to/small-image.jpg, (small)], [/path/to/bigger-image.jpg, (large)]">
Anybody know any plugin that could do this?

Answer 1

You can insert all three images in the page and show every image for specific screen width;
<div>
<img class="image-small" src="/path/to/small-image.jpg" />
<img class="image-medium" src="/path/to/medium-image.jpg" />
<img class="image-big" src="/path/to/big-image.jpg" />
</div>
.image-medium,
.image-small{
display: none;
}
#media screen and (max-width: 800px){
.image-medium{
display: inline;
}
.image-big{
display: none;
}
}
#media screen and (max-width: 400px){
.image-small{
display: inline;
}
.image-big{
display: none;
}
}

Answer 2

i'd suggest to use the Srcset attribute and then implement fallbacks (ex. picturefill) for browsers you need to support.
by viewport
<img src="img-1x.jpg"
srcset="img-1x.jpg 500w, img-2x.jpg 800w"
alt="">
or by resolution
<img src="img-1x.jpg"
srcset="img-1x.jpg 1x, img-2x.jpg 2x"
alt="">

Answer 3

Ok, I solved it like this. (http://i.stack.imgur.com/jWcDD.png) I used the Visual Composer plugin and made a simple add-on plugin that enables content editor to attach two different images. The plugin just writes these image tags and Foundation frameworks css hides and show them accordingly:
<img src="default.jpg" class="show-for-medium-up">
<img src="small.jpg" class="show-for-small-only">
I couldn't get Foundations Interchange images to work inside Visual Composer. Maybe it has something to do about javascript queue. Visual Composer content loads after foundation or something..