Dominant Color

Hi,

What do you want to do?

The info is in the image meta so you can always get it from there via PHP when you render the HTML

I CSS only applies value/setting to the elements inside the element with the values/settings

currently, we are just setting the var(–dominant-color) on the image so you can change the color of the border/background image but not the no the div that contains the image

you will do no harm if also set a style on the contain div

we also set a data-dominant-color on the image to make it easy to use JS to grab it and apply it elsewhere

Tell us what you what to do and I will see how it can be done

Paul

Hi Paul, thanks for the reply. Let me try to explain.

This is the current result after installing:

img[data-dominant-color]:not(.has-transparency) {
background-color: var(–dominant-color);
background-clip: content-box, padding-box;
}

<img data-dominant-color="3f3036" data-has-transparency="false" style="--dominant-color: #3f3036;" ....

I want the color (#3f3036), as is declared in var(–dominant-color) to be used elsewhere. For example as a div background-color elsewhere on that same page. But it won’t work when I set the bgcolor from that div as: background-color: var(–dominant-color);. It doesn’t where to look because the color itself is parsed inline probably.

Hope this make sense to you, thanks!

If you could point to a js or jquery where I can grab that color (data-dominant-color=”3f3036″) to reuse it elsewhere on the page that would be very welcome!

Hi

You will have to adjust the image id from 5917 and change the target from ‘.wp-block-template-part’ to the id/class of the div to set the color on

jQuery('.wp-block-template-part').css({backgroundColor: '#' + jQuery('img[data-id="5917"]').data("dominant-color") })

love to see the screenshot of the result

Paul

It is my hope that the block and template will start to add the color heigher up in the HTML tree so this is easier to use in CSS

Hi, thanks! I can’t get your code to work. So I tried something different.

See code below. Set the parent’ div background-color from the dominant color of the image. That works, but… I see it working only for a brief moment (couple of milliseconds) when loading the page, and then it is gone again. Not sure why that is happening. Thoughts?

jQuery(document).ready(function($){ 
var color = $('.not-transparent').css('background-color');
   $('.wp-block-image').css('background-color', color);  
});

• This reply was modified 2 years, 2 months ago by shockadelica.

does the wp-block-image div get covered by the image
Try setting the border with this CSS
img[data-dominantcolor]{ border: var(--dominant-color) solid 3px;}

Hi, yes that works on the image itself. It won’t work on the parent (figure) div or anywhere else, unfortunately.

no, you are correct that CSS only works on the

but the JS should work
what do you see in the inspector?

try this
jQuery(document).ready(function($){
var target = jQuery(‘.not-transparent’);
target.each(function() {jQuery( this ).parent(‘.wp-block-image’).css(‘border-color’, jQuery( this ).css(‘background-color’)).css(‘border-width’, ’10px’)});
});

Hi, I think I have it solved. With the code below, I managed to get the rgb values in my log. And set to a div I want. But due to a scrollreveal script I’m using, the values/properties of that div reset when it comes in view (that’s why I saw it just briefly).

So the code below works perfectly. Thanks a lot for your help. Now i have to make use of it. Could be very useful for theming pages with a dominant visual and its colors ?? Cheers Paul.

var color = $('.not-transparent').css('background-color');//getting color after document loaded
console.log(color)
$('figure').css('background-color', color);

Thanks @shockadelica & @pbearne

I’ll mark this topic resolved.