images not showing up - global css issue?

Hello,

I'm having an issue with images not appearing correctly. Here is are two examples:
https://sites.bishopg.ac.uk/celt/learning-and-teaching-conference
https://sites.bishopg.ac.uk/carnconference/

This is for a WordPress Network at a small university. I thought at first that it might be an issue with a specific theme or site on the network but now I've seen it with two sites using different themes. If you right-click where the image is supposed to be and open it in a new tab, the image loads fine so I know it is on the server and available. I did find a work-around by editing the text of the post and removing the image class. (also, when you're in edit mode, the image shows up fine)

I am thinking there must be a problem with some CSS, maybe some global CSS since it's affecting all sites but I'm a bit out of my depth and would really appreciate some expert support.

Thanks,

Ben

  • Sajid

    Hi Ben,
    Hope you are doing good today :slight_smile:

    In browser console I can see the issue is with SSL mixed-content warning. It does not allow to load insecure content in a secured page.

    This is because the URL is not https in Settings -> General. So go to Settings -> General and update the URL with HTTPS scheme.

    You can also fix it by using this plugin.
    https://wordpress.org/plugins/ssl-insecure-content-fixer/

    Or alternatively, you can also fix it by adding following code in functions.php file of your child theme.

    /*
     * 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' );

    Hope that helps! Feel free to post a reply if you need further assistance :slight_smile:
    Cheers, Sajid

  • Ben

    Hi Sajid,

    Well, the plugin did seem to work but it might have triggered another issue. Twice now we've found that the sites on the network won't load- I get an error- too many redirects. The first time this happened, I made an edit to one page on one site (which I still had open and was logged into) and then all the sites started loading again. By the way, while logged in I can access any site on the network fine, it is in another browser or an icognito window that I get the error.

    Any ideas?

    Thanks,

    Ben

  • Ben

    Hello again Sajid,

    I've reopened this ticket as I am back to having the same problem. I installed the plugin and that resolved the issue with the images but seemed to lead to the other issue I mentioned above. Now I would like to learn how to resolve the image not displaying because of SSL mixed content. Your first suggestion was:

    This is because the URL is not https in Settings -> General. So go to Settings -> General and update the URL with HTTPS scheme.

    I am not seeing this as an option in the settings -> General area. I'm attaching a screenshot of what I see. Can you give any further direction?

    Also, I would really like a solution that would work for all the sites on the network. Anything you can suggest for that? The code you provided to add to the funcions.php was for a child them- would this mean I would have to do it for every child theme? Would it get overwritten when the themes get updated?

    Thanks for your help!

    Ben

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.