1

I have a weird issue on my site that's only affecting mobile. If you scroll down past the black "What's Hot" section, you'll see the standard posts with featured images. Now, if you refresh the page, the standard posts after the "What's Hot" section are missing the featured images. Nothing shows up in the apache or wordpress logs, and if you browse in a private session, then the featured images appear. This leads me to believe it's a caching issue, but I don't know how to proceed from there.

Another side note, I really noticed this when I swapped over to HTTPS, and I'm serving mixed content (images over http, everything else over https for performance). Here are my rewrite rules from my .htaccess (I just ripped them from a tutorial):

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

I have verified that this is affecting Android 6.0.1 on a handful of devices, as well as some variations of iPhone. At this point, I really don't know how to proceed.

  • The images not being loaded start with domain https://i2.wp.com This is the CDN used when you activate the PHOTON module in the Jetpack Plugin. Can you deactivate the PHOTON module or deactivate the Jetpack Plugin and see if you still have the same issue. – Tunji Dec 24 '16 at 2:11
  • @TunjiAyoola You have no idea how much I've been troubleshooting the issue. It was the Photon module. Turning it off fixed the issue. Thank you for everything. I'm sorry I already gave the points away, otherwise you could have them. – Sal Dec 24 '16 at 7:29
0

enter image description here

The images not being loaded are prefixed with the domain https://i2.wp.com This is the CDN used when you activate the PHOTON module in the Jetpack Plugin. If you deactivate the PHOTON module or deactivate the Jetpack Plugin, you should be rid of the issue.

2

The images there you load is always to big for teh view screen, as example this image - https://meta-game.org/wp-content/uploads/2016/12/league_of_legends_world_championship_2015.0.0.jpg, 1600 x 900 pixel. As alternate for the mobile view is this image defined - https://i2.wp.com/meta-game.org/wp-content/uploads/bfi_thumb/dummy-transparent-n019axwscfu441qfxjqwpodrdle9kgsyvjjtwpvhgo.png?zoom=2&resize=288%2C162, but this is a transparent dummy.

You should use for this usage a thumbnail with smaller size to load fast. Change your theme source to load a thumbnail of each image. Maybe you have function inside the functions.php of your theme, a settings options or much other chances for this definition. TO analyze this use an Webinspector inside a browser on a Desktop, like in Chrome - screenshot below. enter image description here

  • Also the hint. The question is to localized and without code is not really possible to solve the topic. Maybe you should ask the developer, the support team of this team to solve this solid.
-1
+100

I've accessed your website and it seems there's no issues with your post featured images, this leads me to think you might have solved it or it was just a caching issue as you've mentioned.


WordPress HTTPS

Forcing All Pages to HTTPS

For ensuring everything else is loaded over https, make sure you change the site and home urls under Settings >> General in WordPress Admin. Make it read https://meta-game.org - and then Save changes.

enter image description here

Additionally, If you’re looking for a simple way to secure WordPress logins (the wp-login.php script) or the entire wp-admin area, you could set one the constant bellow in wp-config.php:

define('FORCE_SSL_ADMIN', true);


Inspecting the mixed content sources

Regarding the mixed content being loaded from both the http and https protocols, I'd suggest you to inspect your theme's templates or even a plugin and search for anything hard-coded with http and then fix it.

When developers are aware of this, it shouldn't be a problem, but some times a few themes come with the httpprotocol hard-coded within its templates, that's a bad practice I know, but we've got to fix it somehow.

A pretty simple method for inspecting is to load the page via HTTPS, and then right-click anywhere on the page and click “View Page Source”, “View Source”, or “Source”, depending on your browser.

Then use the “Find” command, Edit -> Find or (Ctrl+F or Cmd+F) and search for:

src="http: (with double-quote)

src='http: (with single-quote)

Long story short, you’re manually looking for images, scripts, iframes, and all other assets served via HTTP instead of HTTPS.

Make note of each item sourced via HTTP and you’ll get an idea where to find the problem.


Thoughts on fixing the mixed content

Using Relative URLs

This is the simplest fix. If an asset (image, script, etc.) is hard-coded into a plugin or theme, change it from http://example.com/assets/logo.png to //example.com/assets/logo.png.

Typically, this is most useful when including assets from other servers, like Google scripts, API scripts, or iframes.

Before doing this, however, you need to make sure the HTTPS version is available. If loading an asset from a site that doesn’t have HTTPS enabled, it’s probably best to remove the reference entirely (i.e. comment out or delete) or to save the asset to your own server and change the source to load via your site instead.


Using Proper WordPress Coding Standards

A nice approach is to use the WP function is_ssl() to conditionally load assets in templates depending of the protocol that is being used by the website, e.g:

$protocol = is_ssl() ? 'https:' : 'http:';

Enqueueing an external content with the above method:

Instead of manually setting the protocol...

wp_enqueue_script('bootstrapjs', 'https://cdn.jsdelivr.net/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js', 'false', null, TRUE);

Let's do it dynamically

wp_enqueue_script('bootstrapjs', $protocol.'//cdn.jsdelivr.net/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js', 'false', null, TRUE);

Assuring your website does not serve mixed content, provides your visitors with a pleasant browsing experience, the described methods here should help you to keep your site on track while using ssl.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.