SSL: How to make customizer images Protocol Relative in WordPress?

Question

I'm trying to eliminate "mixed content" on my website and have done so with every area of the site except for one.

Any image uploaded via the Theme Customizer is not protocol relative nor https, all images uploaded via the customizer come up "http://".

The Customizer uses the Media Gallery uploader but doesn't seem to act in the same manner. If I upload an image to the media gallery (no customizer), place it into a page, WP knows whether or not to switch between http and https, although, when the same is attempted via the theme customizer function:

$wp_customize->add_setting('slide_img_upload_one');
$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'slide_img_upload_one', array(
    'label'    => __('Upload first image:', 'example_theme'),
    'section' => 'carousel_slide_section',
    'settings' => 'slide_img_upload_one',
    'description' => 'Upload your first slider image here.'
)));

I can not get the WP_Customize_Image_Control(); to output either "https" or a (best case scenario) protocol relative // url to the image for SSL compliance.

Some things to note. I'm not going to force SSL on my website so in Settings -> General; I'm not changing the url away from the http protocol.

I am also not looking for a way to use .htaccess to force this action.

Bottom line, there MUST be a way for images uploaded via the theme customizer to be protocol relative, I need some help figuring this one out though. I am currently running WP 4.6 (yes I know I'm a little behind).

Hopefully someone else has encountered this as hours of R&D have proved useless in trying to address something as specific as WordPress theme customizer func's.

Thanks in advance for any help, ideas, brainstorming... all ideas are welcome!

I am calling in the customizer function on the page using:

<a href="<?php echo esc_url(get_theme_mod('slide_one_link')); ?>"><img src="<?php echo esc_url( get_theme_mod( 'slide_img_upload_one' ) ); ?>" alt="<?php echo get_theme_mod( 'slide_title_1' ); ?>" /></a>

FYI: I have tried the solution here to no avail: Failed Attempt

Answer 1

I think the simpler solution would be to create your own function:

function get_theme_mod_img($mod_name){
     return str_replace(array('http:', 'https:'), '', get_theme_mod($mod_name));
}

then just use it:

<a href="<?php echo esc_url(get_theme_mod('slide_one_link')); ?>"><img src="<?php echo esc_url( get_theme_mod_img( 'slide_img_upload_one' ) ); ?>" alt="<?php echo get_theme_mod( 'slide_title_1' ); ?>" /></a>

there is another solution that involve filters as you can see here and here filters are applied like this:

return apply_filters( "theme_mod_{$name}", $mods[$name] );

$mods[ $name ] = apply_filters( "pre_set_theme_mod_{$name}", $value, $old_value );

but you would have to add a filter for each image setting you have:

add_filter('theme_mod_my-setting-image-name', 'function_that_strips_protocol');

this untested, i think it will also involve customizer preview logic.

Answer 2

I needed a little bit of extra checking.

/**
 *
 * @param Checks for ssl returns https if needed
 * @param int $p
 * @return filter
 */
function get_theme_mod_ssl($mod_name){
    if (is_ssl()) {
      return str_replace(array('http:', 'https:'), '', get_theme_mod($mod_name));
    }else{
      return get_theme_mod($mod_name);
    }
}