Custom background textures need a little tweak to work properly in the Customizer

[barisunver]

Hey again :)

I've installed WordPress in a subdirectory, and like the Issue I opened a few minutes ago, another part of the Period Pro plugin fails to work (luckily, just in the Customizer).

Line 114 of period-pro.php defines PERIOD_PRO_URL, but doesn't use the __FILE__ constant with the dirname() function, as suggested here. This doesn't cause any problems in the front-end, but fails to load background textures in the Customizer, resulting in 404 errors in the previews.

Changing the line from:

define( 'PERIOD_PRO_URL', plugin_dir_url( __FILE__ ) );

to:

define( 'PERIOD_PRO_URL', plugin_dir_url( dirname( __FILE__ ) ) );

will solve the problem, but you might need to check other instances of __FILE__ against this bug.

[barisunver]

Bumping this with another suggestion: The background textures could be optimized a bit further. With TinyPNG's lossless compression algorithm, I could save 30% space.

tinified.zip tinified (1).zip

[BenSibley]

Good call, I'll include the optimized images in the next update.

[barisunver]

Well, also, the first one :P I updated the code that fixes the bug.

[BenSibley]

That was actually a separate issue. I was writing the URL explicitly in functions.js to get the files without using one of the existing constants. On line 49 of scripts.php, Period Pro now localizes the PERIOD_PRO_URL constant which is then accessed in the Javascript file where the textures are loaded. Do the textures show on your site when running version 1.03 now?

Adding dirname there is only necessary for getting a file that is in subdirectory inside the plugin's directory. PERIOD_PRO_URL is currently the URL of the plugin's directory.

[barisunver]

Yes, textures still fail to show in the Customizer (but works in the front end when you save it) Perhaps the attached video could explain it better.

2017-01-09_23-09-52.zip

By the way, I tried to apply my fix and it didn't work 😆 Seems like something very different causing this error, it could even be a WP core bug. If you have the time, you can install WordPress in a subdir and test yourself.

[BenSibley]

Ahh yes that's very helpful thank you. I still have a hard-coded link in the "postMessage" Javascript file for instantly updating Customizer changes. This would be ignoring the directory structure.

[barisunver]

YES! In postMessage.js (and its minified version), changing these:

    // texture output
    wp.customize( 'background_texture_header', function( value ) {
        value.bind( function( to ) {
            // no need to handle removing textures, handled by 'show' function
            siteHeader.css({
                'background-image': 'url("../wp-content/plugins/period-pro/assets/images/textures/' + to + '")',
                'background-size': '',
                'background-position': ''
            });
        } );
    } );
    wp.customize( 'background_texture_main', function( value ) {
        value.bind( function( to ) {
            // no need to handle removing textures, handled by 'show' function
            body.css({
                'background-image': 'url("../wp-content/plugins/period-pro/assets/images/textures/' + to + '")',
                'background-size': '',
                'background-position': ''
            });
        } );
    } );

...to these:

    // texture output
    wp.customize( 'background_texture_header', function( value ) {
        value.bind( function( to ) {
            // no need to handle removing textures, handled by 'show' function
            siteHeader.css({
                'background-image': 'url("' + ct_period_pro_objectL10n.PERIOD_PRO_URL + 'assets/images/textures/' + to + '")',
                'background-size': '',
                'background-position': ''
            });
        } );
    } );
    wp.customize( 'background_texture_main', function( value ) {
        value.bind( function( to ) {
            // no need to handle removing textures, handled by 'show' function
            body.css({
                'background-image': 'url("' + ct_period_pro_objectL10n.PERIOD_PRO_URL + 'assets/images/textures/' + to + '")',
                'background-size': '',
                'background-position': ''
            });
        } );
    } );

...and in scripts.php changing the ct_period_pro_enqueue_customizer_post_message_scripts() function:

function ct_period_pro_enqueue_customizer_post_message_scripts() {
    wp_enqueue_script( 'ct-period-pro-post-message-js', PERIOD_PRO_URL . 'js/build/postMessage.min.js', array( 'jquery' ), '', true );
}

...to this:

function ct_period_pro_enqueue_customizer_post_message_scripts() {
    wp_enqueue_script( 'ct-period-pro-post-message-js', PERIOD_PRO_URL . 'js/build/postMessage.min.js', array( 'jquery' ), '', true );

    wp_localize_script( 'ct-period-pro-post-message-js', 'ct_period_pro_objectL10n', array(
        'PERIOD_PRO_URL' => PERIOD_PRO_URL
    ) );
}

...fixes the problem! Yay! 😄

[BenSibley]

Awesome, thanks for following up. I'll make these updates in the next Period Pro version.