Expand functionality to acquiring dominant color of background image.

[vietqhoang]

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

[briangonzalez]

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/briangonzalez/jquery.adaptive-backgrounds.js/issues/8 .

[AceMedia]

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.

[briangonzalez]

@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?

[vietqhoang]

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.

[AceMedia]

@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?

[vietqhoang]

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.

[AceMedia]

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

[Chrisedmo]

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

[briangonzalez]

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

[vietqhoang]

Thank you for taking the time implementing this functionality.

[Chrisedmo]

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

[briangonzalez]

@Chrisedmo Do you have a link?

[Chrisedmo]

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

[Chrisedmo]

@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?

[briangonzalez]

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 notifications@github.comwrote:

@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/briangonzalez/jquery.adaptive-backgrounds.js/issues/8#issuecomment-33462176 .

[Chrisedmo]

@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?

[briangonzalez]

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

Thanks!