Support » Fixing WordPress » Responsive images: src url is https, srcset url is http -> no images loaded

  • Resolved brokkr

    (@brokkr)


    I recently switched my whole wordpress site to https after getting certificates from let’s encrypt. Using 4.3.1 all content was https.

    After upgrading to 4.4 images no longer load and the browser complains about mixed content. Instead of an image I get a filename printed out. Inspecting the filename-element in Chrome or Firefox gets me this:

    <img width="984" height="615" src="https://brokkr.net/wp-content/uploads/2015/11/22100041369_591b31367d_b_enigma1-984x615.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="22100041369_591b31367d_b_enigma1" srcset="http://brokkr.net/wp-content/uploads/2015/11/22100041369_591b31367d_b_enigma1-300x188.jpg 300w, http://brokkr.net/wp-content/uploads/2015/11/22100041369_591b31367d_b_enigma1.jpg 1024w, http://brokkr.net/wp-content/uploads/2015/11/22100041369_591b31367d_b_enigma1-984x615.jpg 984w" sizes="(max-width: 984px) 100vw, 984px">

    As you can see, the image’s src is correctly set to https, whereas the srcset attribute is un-encrypted. Is this a bug or do I need to tweak a setting?

    I would like for the srcset attribute to use https as well. If not, or while waiting for a fix, I would like to disable the attribute.

    Thanks in advance.

Viewing 15 replies - 1 through 15 (of 18 total)
  • zainmirza

    (@zainmirza)

    I am also experiencing same problem, if someone find any solutions please help us.

    srcset is really looking well but not working for https meaning

    zainmirza

    (@zainmirza)

    Dear,

    simple solution to downgrade to 4.3.1 that is perfect version.

    Best Regards
    Zain Ali

    esmi

    (@esmi)

    Forum Moderator

    No! That is not anywhere near a good solution! You should always use the latest version of WordPress for security reasons. anything less will leave your site open to hackers.

    brokkr

    (@brokkr)

    Well, a site with no images where images should be isn’t much good either 🙂

    If this is intended behaviour, I can only see two ways to fix it:
    * Use relative paths for all content (which I believe is also frowned upon)
    * Disable the srcset attribute altogether
    Am I missing anything?

    ChrisCree

    (@chriscree)

    I’m thinking this is either a problem in WordPress 4.4 or perhaps a compatibility issue with the way SSL is implemented on the server. I had the same issue with my main image being https as it was supposed to but all the srcset images having http URLs.

    This plugin worked as a temporary patch until I can figure out what the real issue is: SSL Insecure Content Fixer With that plugin activated in the default configuration my images started working again.

    It’s weird because I’m having this issue on one site, but not another on the same server even though both sites have SSL certs.

    ChrisCree

    (@chriscree)

    Just to follow up, I found that the wp-config.php file for my problematic site had both the WP_SITEURL and WP_HOME constants set with http URLs instead of https URLs.

    It’s worth checking your Settings –> General settings to see what protocol those URLS are showing there. If they don’t both show https then it will likely cause issues with the new 4.4 responsive images.

    Once I changed that I no longer needed the plugin because my images worked as expected.

    archon810

    (@archon810)

    The issue is caused by this 2-year-old bug that’s still not resolved, even though the solution is a one-liner. https://core.trac.wordpress.org/ticket/25449

    Joe McGill

    (@joemcgill)

    Hi everyone,

    The suggestions that @ChirsCree makes is correct. If you’re running HTTPS on the front end, you should change the URLS for your home and site URL in Settings > General so they use the HTTPS scheme.

    @archon810 is also correct that this is related to a bug in the way WordPress builds URLs. Unfortunately, that one line fix will break a lot of other setups (I know, I’ve tried) which is why it’s not fixed.

    If you’re have a setup where users are served the site through an HTTPS URL, but can’t change the settings for some reason (ex: CloudFlare flexible SSL), you can use this code to force URLs in the srcset to use HTTP.

    /*
     * Force URLs in srcset attributes into HTTPS scheme.
     * This is particularly useful when you're running a Flexible SSL frontend like Cloudflare
     */
    function ssl_srcset( $sources ) {
      foreach ( $sources as &$source ) {
        $source['url'] = set_url_scheme( $source['url'], 'https' );
      }
    
      return $sources;
    }
    add_filter( 'wp_calculate_image_srcset', 'ssl_srcset' );
    Site Beyond Sight

    (@site-beyond-sight)

    General Settings

    Set your url to HTPPS

    uamv

    (@uamv)

    Any direction on controlling these constants (WP_SITEURL and WP_HOME) on a multisite site?

    Joe McGill

    (@joemcgill)

    Hi UaMV,

    @ipstenu has a good overview of how to manage those constants to set up SSL on a multisite here: http://halfelf.org/2014/ssl-for-one-domain-on-multisite/

    That may get you moving in the right direction, but I may not be much more help there.

    Joe

    Here are some checks, Just in case other plugins mess up the srcset sources:

    /**
     * Force https scheme on srcset urls
     */
    add_filter( 'wp_calculate_image_srcset', function( $sources )
    {
        if(	! is_array( $sources ) )
           	return $sources;
    
        foreach( $sources as &$source )
        {
            if( isset( $source['url'] ) )
                $source['url'] = set_url_scheme( $source['url'], 'https' );
        }
        return $sources;
    
    }, PHP_INT_MAX );

    Previously posted on:

    http://wordpress.stackexchange.com/questions/211375/how-do-i-disable-responsive-images-in-wp-4-4/211376#211376

    If only the administration is running HTTPS, featured imaged are not loaded in administration (it is OK for front end).
    This code can be used :

    function wpdf_ssl_srcset( $wpdf_sources ) {
    	if (is_admin()) {
    	  foreach ( $wpdf_sources as &$wpdf_source ) {
    		$wpdf_source['url'] = set_url_scheme( $wpdf_source['url'], 'httpp' );
    	  }	//	fin boucle sur les images
    	}	//	fin test si dans l'administration
      return $wpdf_sources;
    }
    add_filter( 'wp_calculate_image_srcset', 'wpdf_ssl_srcset' );

    brokkr

    (@brokkr)

    Well, let me just say a big thanks to everyone. I had given up on this thread when Jeff Chandler over at WP Tavern wrote an article based on it 🙂

    I too am using multisite, so the relevant settings are not found under ‘General settings’. However, inserting Joe’s code into the relevant (child) theme’s functions.php worked instantly.

    Thanks again, marking resolved.

    EDIT: Also apologies for double posting here and at stackexchange and thanks to birgire for posting another valid solution over there. I had given up on this after it seemed to go nowhere at first.

    jorgitobg

    (@jorgitobg)

    The same here… HTTPS forced on backoffice, but HTTP on site. This function fixed the “featured image” issue….

    ******************************************************************
    function wpdf_ssl_srcset( $wpdf_sources ) {
    if (is_admin()) {
    foreach ( $wpdf_sources as &$wpdf_source ) {
    $wpdf_source[‘url’] = set_url_scheme( $wpdf_source[‘url’], ‘httpp’ );
    } // fin boucle sur les images
    } // fin test si dans l’administration
    return $wpdf_sources;
    }
    add_filter( ‘wp_calculate_image_srcset’, ‘wpdf_ssl_srcset’ );
    ******************************************************************

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Responsive images: src url is https, srcset url is http -> no images loaded’ is closed to new replies.