Expand functionality to acquiring dominant color of background image. about jquery.adaptive-backgrounds.js HOT 17 CLOSED

How exactly do you imagine that working? Would love some detail. Thanks!

On Wednesday, January 8, 2014, Viet Hoang wrote:

Any possibility/consideration of expanding the functionality to acquiring
the dominant color of a background image?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/8
.

from jquery.adaptive-backgrounds.js.

Why not try something like this instead?
https://github.com/lokesh/color-thief

You can get the whole palette, as well as the dominant colour.

from jquery.adaptive-backgrounds.js.

@ShaneRounce That's not quite what I am talking about when I say "How exactly do you imagine that working?".

@vietqhoang More so, what would the options passed-in look like? That is, can you give a small description of how you envision the library looking after these changes are made?

from jquery.adaptive-backgrounds.js.

I haven't looked into the plugin's code yet, so how I am envisioning the operation may or may not be plausible with the current state of the library.

I think there are few ways one can go about this.

The plugin can be made agnostic on the user end in terms of options. I imagine this can be done by adding a logic to check if a src attribute exists or a background-image/background url has been declared on the element. It'll probably require a regex to check if url() is present and to extract the URL (and probably additional processing if it is a relative one).

From there, you'll process the image for the dominant color as usual and apply the results to the parent or whatever specified selector in the options.

My specific use case for this is the following.

A responsive website contains background-image page headers that have heading text on top of it. These image page headers are unique per page. There is white spacing around the page header and it is desired to have the background-color of the parent be the dominant color of the background-image page header.

I hope I'm making sense in all of this. Thanks for the consideration. If I find some time, I may look at the code and fork an example of this.

from jquery.adaptive-backgrounds.js.

@briangonzalez Sorry, was just suggesting they something specifically built for doing just that. I'd say there's a clear difference between the purpose of the 2, no?

from jquery.adaptive-backgrounds.js.

I have seen color-thief and have considered using it.

But I think the use case I explained in my last post is looking to achieve the same results of this library, except the image is set as a background-image of an element to accomodate overlays.

from jquery.adaptive-backgrounds.js.

@vietqhoang Fair enough, just stumbled across the other one recently and thought it was worth the mention.

from jquery.adaptive-backgrounds.js.

I think being able to use a CSS background image as the selector would be great!

from jquery.adaptive-backgrounds.js.

Here's a link on how to use the new functionality:
https://github.com/briangonzalez/jquery.adaptive-backgrounds.js#using-an-element-with-a-css-background-image

from jquery.adaptive-backgrounds.js.

Thank you for taking the time implementing this functionality.

from jquery.adaptive-backgrounds.js.

Yup thanks for this! I have now updated my site to use it, and it works perfectly. 👍

from jquery.adaptive-backgrounds.js.

@Chrisedmo Do you have a link?

from jquery.adaptive-backgrounds.js.

@briangonzalez it's not quite ready yet - I will update this when it's live (hopefully early Feb).

from jquery.adaptive-backgrounds.js.

@briangonzalez Hi - you can see my page here: http://www.mousdale.com.

I have noticed though that it seems to duplicate the image that is being referenced for the dominant colour? I will raise a separate issue - unless I have done something wrong with my implementation?

from jquery.adaptive-backgrounds.js.

Were you able to get it running locally before trying to put it up on a
website. If not, this will help you get the basis down before bringing in
another variable like hosting it on a server.

Let me know,
Brian

On Tue, Jan 28, 2014 at 1:21 AM, Chris Mousdale [email protected]:

@briangonzalez https://github.com/briangonzalez Hi - you can see my
page here: http://www.mousdale.com.

I have noticed though that it seems to duplicate the image that is being
referenced for the dominant colour? I will raise a separate issue - unless
I have done something wrong with my implementation?

Reply to this email directly or view it on GitHubhttps://github.com//issues/8#issuecomment-33462176
.

from jquery.adaptive-backgrounds.js.

@briangonzalez Hi Brian - I have raised it as an issue. But yes, I had it working locally before pushing it to the github servers. Did you see it on my homepage – The background image is being downloaded twice?

from jquery.adaptive-backgrounds.js.

Yea, I see it now (nice redesign!). I'll try to figure out why this is happening.

Thanks!

from jquery.adaptive-backgrounds.js.