Background Image On Header

[LebCit]

Hello,

First of all, I want to congratulate you for this very nice plugin and say thank you for sharing. I'm a new WordPress theme/plugin developer. I've tried to implement your plugin in my theme. The only problem for now is the following : I have a header background image that is related to the chosen featured image in the post/page or it will fallback to a default one. This header background image is retrieved with AJAX : In the-clean-blog-functions.php

/**
 * Localize hero.js to asynchronously load the header image.
 */
function thecleanblog_header_script() {

    // Adding custom javascript file to handle the header image.
    if ( is_404() || is_search() ) {
        wp_dequeue_script( 'thecleanblog-hero' );
    } else {
        wp_enqueue_script( 'thecleanblog-hero', get_theme_file_uri( '/assets/js/the-clean-blog-hero.js' ), array( 'jquery' ), filemtime( get_theme_file_path( '/assets/js/the-clean-blog-hero.js' ) ), true );
    }

    // Declare $post global if used outside of the loop.
    $post = get_post();
    // Check if post is object otherwise we're not in singular post.
    if ( ! is_object( $post ) ) {
        return;
    }

    $hero_img = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), '' );
    $hero_img_default = get_theme_mod( 'default_header_background_image' );
    if ( empty( $hero_img_default ) ) {
        $hero_img_default = get_template_directory_uri() . '/components/header/images/default-hero.jpg';
    }
    $hero_settings = array(
        'thecleanblog_hero_ajaxurl'       => esc_url( admin_url( 'admin-ajax.php' ) ),
        'thecleanblog_has_post_thumbnail' => has_post_thumbnail(),
        'thecleanblog_featured_image'     => esc_url( $hero_img[0] ),
        'thecleanblog_get_theme_mod'      => $hero_img_default,
    );
    wp_localize_script( 'thecleanblog-hero', 'thecleanblog_hero_set', $hero_settings );
}
add_action( 'wp_enqueue_scripts', 'thecleanblog_header_script' );

In the-clean-blog-hero.js

(function($) {
    fullscreen();
    function fullscreen() {
        $.ajax({
            type: 'POST',
            url: thecleanblog_hero_set.thecleanblog_hero_ajaxurl,
            data: {
                action : 'thecleanblog_header_style'
            },
            beforeSend : function(){
                if (thecleanblog_hero_set.thecleanblog_has_post_thumbnail){
                    $('#masthead').css({
                        'background-image': 'url(' + thecleanblog_hero_set.thecleanblog_featured_image + ')',
                        width: $(window).width(),
                        height: $(window).height()
                    });
                } else {
                    $('#masthead').css({
                        'background-image': 'url(' . echo + thecleanblog_hero_set.thecleanblog_get_theme_mod + ')',
                        width: $(window).width(),
                        height: $(window).height()
                    });
                }
            }
        });
    }

    // Run the function in case of window resize.
    $(window).resize(function(e) {
        e.preventDefault();
        fullscreen();
    });
})(jQuery);

I've been struggling to show the correct header background image depending on the actual page. Another note is that the theme uses Unslider slider, the user can choose to activate it or not within the Customizer for the homepage only or for all the site.

If I manage to make Ajaxify works with the theme I'll implement and mention it in the theme description.

Thanks in advance for your time, help and suggestions.

[arvgta]

Hi,

thanks for your praise and the extensive illustration of what you're trying to do...

Just a quick question, before we move on:

• Are you aware of the Pronto events within Ajaxify?

I believe you could simply hook into e.g. pronto.render and use jQuery to set the background image to what you want it to be in the event handler...

[LebCit]

Hello again, Thanks a lot for your time and quick reply. Honestly, I surfed quickly the docs and some where totally new words for me :joy: just like Pronto events... I'll try to understand first what are those Pronto events and try your suggestion. Thanks a lot again for your time and guidance.

[arvgta]

You're very welcome! Just try something like this:

$(window).on('pronto.render', function(){ 
//jQuery code to set background image
});

[arvgta]

Here's some more guidance on what code to place instead of the comment above:

• Setting background image using jQuery css property

The exciting thing about that approach is, that you can set the variable imageUrl they use there on the server-side(i.e. PHP), page-specifically.

Therefore, the jQuery code supplied above can remain the same across pages.

Of course, that is a bit of a patch / workaround / somewhat pragmatic, but might be completely sufficient for your use-case.

If not - please post back and we'll debug why the background image is not loading properly in the first place!

[LebCit]

Hello,

After a lot of try, I found the simplest and obvious solution. But this solution works sometimes and sometimes not... The solution is to call inside the-clean-blog-hero.js the fullscreen() function on pronto.render :

BLA BLA BLA
.
.
.
    $(window).on('pronto.render', function(){ 
        fullscreen();
     });
    // Run the function in case of window resize.
    $(window).resize(function(e) {
        e.preventDefault();
        fullscreen();
    });

I'll be putting this feature on hold for now. Thanks a lot for your time and suggestions. Staring your plugin. SYA ✋

[arvgta]

Hi,

thanks for the star and the kind feedback. Has this issue been solved to your satisfaction?

Thank you, too!