0

sorry for my English... . I am trying to implement an Image Picker in Customizer in order to choose and display a css-background-image on front-page.php. Fundamental it works as intended in Frontend... . But I cant get the preview in the customizer running. Changed image is only shown after F5 refresh... .

What I've done: function.php

$wp_customize->add_setting('startGalleryImg1', array(
    'default' => get_stylesheet_directory_uri() . '/images/assets/default.jpg',
    'transport' => 'postMessage',
    'sanitize_callback' => 'esc_url_raw',

));

$wp_customize->add_control(
   new WP_Customize_Image_Control(
       $wp_customize,
       'startGalleryImg1',
       array(
           'label'      => __( '1st Start Gallery Img', 'theme_name' ),
            'description'      => __( 'Choose first Start Gallery Img', 'theme_name' ),
           'section'    => 'bloook_theme_section',
           'settings'   => 'startGalleryImg1',

       )
   )
)

My Template:

<a class="item item1" href="#">
            <div class="item-bg" style="background-image: url('<?php echo get_theme_mod('startGalleryImg1') ?>')">
            </div>
     <div class="item-content">
        <h3>Demos</h3>
        <p>Web, Video, Musik</p>
     </div>

my customizer.js (which works fine for other fields (textarea... )

(function ($) {

wp.customize('startGalleryImg1', function (value) {
    value.bind(function (to) {
        $('.home .item1 .item-bg').css('background-image', 'url( '+ to +')');
    });
});

})(jQuery);

I wonder if some expert is out there who can help me with this... . Many thanks in advance and kind regards

0

The above code is working fine for me. I let it here, because someone might need it or have suggestions to do it in a better way. My problem was that the enqueue of js had loaded an old js file... .

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.