WordPress doesn’t show images site wide? Fix inside

WordPress broken images

I run about three websites at any time on the same host. I also do experiments with new web technologies, and new WordPress themes on a subdomain to my main sites.

In one such experiment, I noticed that the images were not turning up as expected in the new website. When this happens, I typically do the following:

  • Change/reset the permission of WP-CONTENT, WP-CONTENT\UPLOADS & all sub-directories and for any image directories within the theme folder to 755
  • Change/reset the permission of all image files to 644

Doing this did not quite help.

It was only then that I noticed that BlueHost has a security feature to disable hotlinking.

bluehost hosting prevent hotlinking

Hotlink protection third-party websites displaying an image directly from your website.

I disabled hotlinking and this solved the issue on the new website.

Now to the interesting part – a couple of hours after this change I find that all websites on the same host stopped responding. Though the FTP work just fine, none of the webpages responded for request through a browser.

While looking for changes on the websites, one of the common things I noticed was all the .htaccess files were changed that day. Thankfully, hotlink protection was the only change I did in the immediate past.

Although the section changed by hotlink protection was clearly marked out, being adventurous on production site is something that I could not resist. I applied all my .htaccess knowledge and messed up the rules big time without taking backups.

The highlight of this entire saga – I did not have to reinstall WordPress to get the default .htaccess.

# 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 just copied this code from the WordPress.org website, and presto all my sites were back in action.