Skip to content
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

Work for background-image / inline #7

Open
noeltock opened this issue Dec 17, 2015 · 7 comments
Open

Work for background-image / inline #7

noeltock opened this issue Dec 17, 2015 · 7 comments

Comments

@noeltock
Copy link
Member

Often use background-image inline to dynamically cover areas.

Thanks!

@noeltock
Copy link
Member Author

Any word on this yet, somewhat unusable for most the prod environments I handle. Thanks!

@joehoyle
Copy link
Member

Stop using background images for everything :P

@noeltock
Copy link
Member Author

Ha, no.

On 12 Jan 2016, 14:43 +0100, Joe [email protected], wrote:

Stop using background images for everything :P


Reply to this email directly orview it on GitHub(#7 (comment)).

@rmccue
Copy link
Member

rmccue commented Jan 13, 2016

Here's what I'm thinking:

  • On elements with BG images, you'd call Gaussholder\Frontend\get_placeholder_attrs( $id, $size ) and add them to the element yourself, plus add a class like gaussholder
  • You'd also call something like Gaussholder\Frontend\enqueue_script
  • This script would find everything with .gaussholder and handle that for you

This would be opt-in for themes, and wouldn't affect any pages you haven't explicitly opted in to. Fair bit less automagic than normal images, but should work pretty nicely.

@noeltock Sound groovy?

@noeltock
Copy link
Member Author

Yes, I like. I know it's not sexy in a traditional jQuery drop-in way, but definitely needed. Any performance or other issues you forsee doing this?

@rmccue
Copy link
Member

rmccue commented Jan 13, 2016

The main issue will be image pop-in when the full image loads, as it'll need a different animation process. Not too concerned about the integration sexiness, as it's a developer-focussed lib/plugin anyway, and background images are going to be custom coded anyway.

@roborourke
Copy link
Contributor

Just spotted this old issue after a PR review. If the background image is relevant to the content there's a CSS prop called object-fit that lets you do background image type stuff with foreground image tags: https://css-tricks.com/almanac/properties/o/object-fit/

Might need to test that method works with Gaussholder though but don't see why it shouldn't.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants