[Resolved] Images not showing in FF and Chrome after move to GP and double images in posts

[Andy]

I’ve recently created a staging copy of my website and switched themes from a Genesis framework child theme to GeneratePress Pro. Everything appears to be going fairly smoothly so far, but I have an issue with certain images not showing up in certain browsers, and I was wondering whether this is something you may have come across before? For example, I am currently updating a page using the Lightweight Grid plugin to show a number of images with a link to another page from each image. All of the images are in the Media Library, but not appearing when I preview or update the page in Firefox or Chrome. However, they are there in IE and Safari. The only way I can get an image to appear across all the browsers is to upload a new image (as opposed to using an existing saved image), so while I can see some images, others are not showing. I have purged the cache (both in Siteground and Cloudflare), disabled plugins, and deleted all cached web content but to no avail. This is happening right across the site and in particular in the blog and category pages.

One other question – I’ve set up global page headers in my posts, but as I’ve imported all posts, pages etc. from the existing site to the staging site, all the posts currently show the post images twice, one in the page header and one above the content. I realise I can either go through each post and either remove the image from the post or remove the featured image but as I’ve over 800 posts this will be very time consuming. I’ve tried Customizer > Layout > Page Header> Single Post Header Location > Hide. I’ve also added the CSS below but with no luck. Would you happen to know what I’m doing wrong?

.page-header-image-single {
display: none;
}

.blog .type-post:first-child .entry-content img,
.archive .type-post:first-child .entry-content img {
display: none;
}

[Leo]

Hi there,

– Are you referring to the front page of your site? If so I believe all images are showing for me?

– I clicked on a single post and don’t see any duplicate featured images?

[Andy]

Hi Leo. On this page – https://v8scglobal.wpstagecoach.com/supercars-teams/ – it currently shows three (of the same images) but there should be another row of three columns above. The three images showing were added to the Media Library after the switch to GP, but the three missing images were already in the Media Library. Another couple of examples of where this is happening and images aren’t showing up is: https://v8scglobal.wpstagecoach.com/features/interviews/ and https://v8scglobal.wpstagecoach.com/features/photo-galleries/photo-gallery-2017-supercars-challenge/

An example of the duplicated image can be seen here – https://v8scglobal.wpstagecoach.com/features/winners-losers-vodafone-gold-coast-600/

[Tom]

The images are currently set to align left – can you try aligning them center?

[Andy]

Hi Tom, I’ve added the following to align the images center:

.post-image {
text-align: center;
}

.page-header-image-single {
text-align: center;
}

.page-header-image {
text-align: center;
}

I’ve also gone in and manually center-aligned the images in the following posts – https://v8scglobal.wpstagecoach.com/features/winners-and-losers-red-rooster-sydney-supersprint-2017/ – This still shows no images
https://v8scglobal.wpstagecoach.com/features/winners-losers-bathurst-1000/ – This still shows two images

[Tom]

Can you try setting equal_heights to false in your LGC shortcode?: equal_heights=false

[Andy]

Ok. I’ve added that, but still can’t see any difference.

[Tom]

So strange, something is preventing the image from showing.. It has a bunch of data attributes which look to be added by a plugin. Can you try disabling your plugins one by one to see if one of them is causing the issue?

[Andy]

Hi Tom, no change there either.

[Tom]

Aha, mixed content. The URLs don’t match the URL you’re viewing: https://www.screencast.com/t/18AIJvyJrh

If you update the URLs to match the others, it should work.

[Andy]

Ah, good spot. Thanks for picking up on that. I guess this maybe to do with me having had Siteground’s Optimizer’s Force HTTPS functionality disabled? Although I have now enabled it and there’s still no change and it does appear everything is set to HTTPS despite the mixed content warning. I will contact them and see what can be done.

I presume this won’t have an effect on the duplicated image issue I mentioned though?

[Tom]

Weird that they still aren’t loading. What if you ditch the columns and just have the images in the editor? Still nothing?

[Andy]

Hi Tom / Leo

I thought I should let you know I resolved the issue of the images not showing. Turns out the live site wasn’t set up to allow image hotlinking. WPStagecoach use hotlinking instead of transferring all the media files to the staging site. Next time, I think I’ll set up my own staging environment!

Loving working with GP Pro! Once I’m done with this, I’ll be moving my other sites on to it too.

[Tom]

Glad you got it working! 🙂

[Author]

Posts