New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for CSS background-image #37

Closed
wants to merge 2 commits into
base: unstable
from

Conversation

Projects
None yet
2 participants
@dancek
Contributor

dancek commented Dec 23, 2014

I needed resizable background-images with dynamic content, so I implemented this. The benefit over a CSS-only solution is that changing an image in code is much easier when you only output one data attribute. I'm not sure if you consider this to be in scope of Slimmage.js, but it made sense to implement it as a feature since Slimmage already has a lot of the required infrastructure.

I have written the code at work, so my employer (HiQ Finland) must be mentioned in the copyright notice. Hopefully this is not an issue.

dancek added some commits Nov 19, 2014

implement basic support for CSS background-image
Elements with [data-slimmage-bg] are handled similarly to
img[data-slimmage], but the resulting image url is set as their CSS
background-image property.

This is meant to be used for background images that are 100% width, i.e.
`background-size: 100% auto` is recommended. If you don't use that,
you get slightly cropped images on normal displays (because resolution
is rounded up in 160px increments by default) and blocky half images on
high-dpi displays.

The implementation requires querySelectorAll (IE8+). Note that
background-size doesn't work on IE8 so check the usual workarounds for
that.
@lilith

This comment has been minimized.

Member

lilith commented Jan 7, 2015

v0.3.0 offers getImageInfo, similar to how you refactored getImageSrcWithWidth.

It also offers beforeAdjustSrc as a callback function, enabling you to include this functionality as a plugin with no downside. slimmage.background.js would be welcome in the repository.

@dancek

This comment has been minimized.

Contributor

dancek commented Jan 7, 2015

Great! I'll try to find time to refactor this and make another pull request.

@dancek dancek closed this Jan 7, 2015

@lilith

This comment has been minimized.

Member

lilith commented Jan 7, 2015

Ok, thanks. Please include any copyright notices, and make sure you have employer permission to license it as MIT/Apache.

@lilith

This comment has been minimized.

Member

lilith commented Jan 9, 2015

Also, on 0.4.0+, you will want to push any DOM elements you change into the array window.slimmage.changed, so that readyCallback() can be fired accurately.

@dancek

This comment has been minimized.

Contributor

dancek commented Jan 12, 2015

I wonder if beforeAdjustSrc should accept an array of functions instead of a single function. Otherwise plugins would be overwriting each other's callbacks. I'm not sure there will ever be more than one plugin, though -- maybe this can be considered when it actually happens.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment