Skip to content

Support for CSS background-image #37

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.

Sign up for GitHub

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

Jump to bottom
Closed
wants to merge 2 commits into from
Closed

Support for CSS background-image #37

wants to merge 2 commits into from

Conversation

dancek
Copy link
Contributor

@dancek 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
implement basic support for CSS background-image
d12c8fb 
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.
@dancek
add sample code for background-image in README
fdac715
@dancek dancek mentioned this pull request Dec 23, 2014
Open
@lilith
Copy link
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
Copy link
Contributor Author

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
Copy link
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
Copy link
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
Copy link
Contributor Author

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.

This was referenced Nov 5, 2015
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@dancek @lilith