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