Using ColorThief

Design help Custom code
1

Hey guys,

I’m looking to create a box where the border (or a div) is the dominant color from an image uploaded in through the CMS.

I have attached a screenshot of an example from Color Thief and I am wondering if anyone knows how to implement this code into a CMS image to get the dominant color and apply it to a div block.

Thanks!

689×684 173 KB

2 
<script>
Webflow.push(function() {
  $.getScript('https://cdn.rawgit.com/lokesh/color-thief/master/dist/color-thief.min.js', function() {
    var color = colorThief.getColor($('#insertImageId'));
    $('#insertDivId').css('background-color', color);
  });
});
</script>

Replace insertImageId and insertDivId with your own.

3

Hey Sam,

Thanks for the code. I just purchased the CMS plan. Where is the best place to insert this code?

4

Place this in the footer code (before </body> tag) of the page settings.

Replace the jQuery selectors to match the ID or class of the elements on the page.

5

I have entered the code in the before tag on the home page but I’m not getting it to work.

Any ideas what I might be doing wrong? Here is a preview link. There div I am trying to change is called SlideNavHeader and I want it to draw from ModalImage.

https://preview.webflow.com/preview/kyle-s-amazing-site?preview=1049efc55c0c6d3ebdbf263e1920a3d4

Thanks for your support!