Change header image loaded by jQuery to use HTTPS

Question

My theme contains a parallax header image. How can I change the URL of the header image so that it uses HTTPS? I want to do it manually.

Currently the URL is:

http://example.com/themes/abc/header.jpg

I want to change it to:

https://example.com/themes/abc/header.jpg

Plugins are not helping me on this specific file (they are converting others). Chrome tells me the header is being loaded by jquery.js. I have no idea how jQuery is doing this.

I believe editing functions.php can help, but how can I do it?

Answer 1

Have you considered Protocol Rewriting? The code below will convert all http: and https: to // for each script, link, base, and image. Place this in your functions.php:

add_action( 'plugins_loaded', 'wpse_232287_init' );

function wpse_232287_init() { // Initiate the function
    ob_start( 'wpse_232287_remove_http' );
}

function wpse_232287_remove_http( $buffer ) {
    // Check for a Content-Type header, only apply rewriting to "text/html" or undefined
    $headers = headers_list();
    $content_type = null;

    foreach ( $headers as $header ) {
        if (strpos( strtolower( $header ), 'content-type:' ) === 0 ) {
            $pieces = explode( ':', strtolower( $header ) );
            $content_type = trim( $pieces[1] );
            break;
        }
    }

    if ( is_null( $content_type ) || substr( $content_type, 0, 9 ) === 'text/html' ) { // Replace 'href'/'src' attributes within script/link/base/img tags with '//'
        $return = preg_replace( "/(<(script|link|base|img|form)([^>]*)(href|src|action)=[\"'])https?:\\/\\//i", "$1//", $buffer );
        if ( $return ) { // On regex error, skip overwriting content
            $buffer = $return;
        }
    }
    return $buffer;
}

Answer 2

To change the URL of the header image to use HTTPS, you can use jquery to target the element that contains the header image and update its src attribute. You can add this jquery script to your themes js file or directly to your WordPress theme's footer.

WP themes already include jQuery, but if yours does not, you can enqueue it in your themes functions.php file first.

function my_theme_enqueue_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

once jQuery is loaded, you can add a script to update the header image URL to use HTTPS. Use a functions.php file inside your theme (or child theme if exists) template add this code below.

function add_this_script_footer() { 
?>
<script>
jQuery(document).ready(function($) {
        // Target the header image element using its class or ID
        var headerImage = $('.parallax-header-image');
    
        // Check if the header image exists
        if (headerImage.length) {
            // Get the current image URL
            var imageUrl = headerImage.attr('src');
    
            // Replace 'http://' with 'https://' in the image URL
            var secureImageUrl = imageUrl.replace('http://', 'https://');
    
            // Update the header image URL to use HTTPS
            headerImage.attr('src', secureImageUrl);
        }
    });
</script>
<?php } 
add_action('wp_footer', 'add_this_script_footer');

Replace .parallax-header-image with the appropriate selector for your header image element.