I implemented your changes and discovered a bit of a weakness: sometimes you want to use background images, but sometimes you want s.

The site I'm dealing with uses thumbnail images which must all be the same size -- a perfect use case for background images. But I also needed to use full-size versions of these images and maintain their true aspect ratio. And it's much easier to just let the browser resize things than to do it with JavaScript.

So, my solution is to have another data attribute: data-background. This would be set as "yes" when you want to use a background-image, "no" or not used at all when you want to use an .

See http://kvdesign.net/testing for what I mean. Click on a project to see the modal with the thumbs.

But I also needed to use full-size versions of these images and maintain their true aspect ratio.

Well in that case the CSS background-size: cover should do the job?

Regarding your point, this is true that this PR does not consider each image individually (cf. Imager constructor, this is decided once for all). This is mostly influenced by DOM replacement/update which would be unnecessary complex (to me, but I am not everybody so feel free to challenge this opinion).

Remember you can use several instances of Imager: one could be used to handle responsive images, another one could be used to handle background responsive images.

I first tried using an Imager.update() method for the modals, passing
new cssBackground: true option. But that gave a problem when there were
still items to lazy load on the main page. (They could be used as
background images, but that might cause accessibility or SEO problems.)
So that was out.

Then I tried using a new instance of the Imager for each modal.
Unfortunately, there are some images that are verticals. I would have to
dynamically change the container size to fit the entire image in order
to show them at their full size using background-size. Otherwise they
would be cropped. And radically changing the container size would make
the modal size jump around (even more) when using the links below the
text to "navigate" between projects.

But there was also a problem with using a new Imager instance for each
modal: for some reason I cannot seem to completely delete the previous
modal's Imager, so I get some memory leakage. The old instances are
still there, along with a detached DOM tree for each. I'm not sure
whether the latter is coming from bound events or references. (I tried
writing an Imager.destruct() method, but it didn't seem to work.)

So I settled on a single Imager instance, an update() method and using
data-replacement-type="background" when I want to use a background image
for the thumbs. This way the modal's full-size image is as big as
possible and the thumbs are all the same size.

Rick

On 11/27/2014 6:06 AM, Thomas Parisot wrote:

But I also needed to use full-size versions of these images and
maintain their true aspect ratio.

Well in that case the CSS |background-size: cover| should do the job?

Regarding your point, this is true that this PR does not consider each
image individually (cf.
https://github.com/BBC-News/Imager.js/pull/108/files#diff-b33c92ac11fbf0d3ea67899762af99b7R109,
decided once for all). This is mostly influenced by DOM
replacement/update which would be unnecessary complex (to me, but I am
not everybody so feel free to challenge this opinion).

Remember you can use several instances of Imager: one could be used to
handle responsive images, another one could be used to handle
background responsive images.

—
Reply to this email directly or view it on GitHub
#108 (comment).

@oncletom why was this never released? :'( any chance it still will?

@nealoke good question – I probably missed it at some point.

I am no longer a BBC employee so I do not have write permissions anymore. Happy to contribute again at some point if this library is still relevant in today's polyfilling world.

@oncletom what other methods do you use now to solve the issues imager was created? I still see no way to effectively do this though :/ thanks!