2

I'm trying to add a colorpicker to the featured image meta-box.

Here is some background:
I use the featured image meta-box to place parallax background images.
Because a user is allowed to place text over the image there is a (up until now) div that holds a white background.
In the featured image box the user has the possibility to adjust the opacity of the white div see:this

Now I want to add a possibility for the user to change the white div color.

Okay so now we're here.
To do this I found a js that does this for me:here

I have the "code" implemented to the featured image meta-box and I can change the value of the color. The problem I'm having is to output a rgb value.
Here is what I did (keep in mind this is in my functions.php)

add_filter( 'admin_post_thumbnail_html', 'basic_add_opacity_to_feature_thumb_box');
function basic_add_opacity_to_feature_thumb_box( $myhtml ) {

$selected_option = get_post_meta( get_the_ID(), 'basic_opacity', true ); // get the current value
for ( $i = 0; $i <= 1; $i = $i + 0.1 ) { //loop from 0 to 1 in 0.1 increments
    $selects .= '<option value="' . $i . '" ' . selected( $selected_option, $i, false ) . '>' . $i . '</option>';
}
//create the return html, with the selects created before
return $myhtml .= '
    <script src="'.get_bloginfo('template_directory').'/js/jscolor.js"></script>
    <form>
    Opacity: 
        <select name="basic_opacity">
            ' . $selects . '
        </select><br><br>
    Color:<input class="jscolor {onFineChange:"update(this)"}" value="ffcc00">
    toRGBString = <span id="rgb-str"></span><br />
    </form>
    <script>
    function update(picker) {
        document.getElementById("rgb-str").innerHTML = picker.toRGBString();
    </script>
    ';
}

Can anyone see what I'm doing wrong?

1

Okay. Got it working....

I used the simple version:

add_filter( 'admin_post_thumbnail_html', 'basic_add_opacity_to_feature_thumb_box'); //same as before

function basic_add_opacity_to_feature_thumb_box( $myhtml ) {

$selected_option = get_post_meta( get_the_ID(), 'basic_opacity', true ); // get the current value
for ( $i = 0; $i <= 1; $i = $i + 0.1 ) { //loop from 0 to 1 in 0.1 increments
    $selects .= '<option value="' . $i . '" ' . selected( $selected_option, $i, false ) . '>' . $i . '</option>'; //add a option field, and select it if it is the one saved before
}
//create the return html, with the selects created before
return $myhtml .= '
    <script src="'.get_bloginfo('template_directory').'/js/jscolor.js"></script>
    <form>
    Transparantie: 
        <select name="basic_opacity">
            ' . $selects . '
        </select><br><br>
    Kleur:
    <div id="color">
        <input id="colorpicker" class="jscolor {onFineChange:"update(this)"}" value="FFFFFF">
        <div id="selected_color"></div>
    </div>
    </form>
    <script type="text/javascript">
        jQuery(document).ready(function($){
            $("input#colorpicker").change(function() {
                var contentString =$("input#colorpicker").css("background-color");
                $("#selected_color").html(contentString);
            });
        });
    </script>
    ';
}

After the color is selected I output the content (in RGB) to an empty div.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.