Photo's don't show on Live site

Question

I am using the newest version of Joomla. I have several pictures I am trying to get on my site. Within the module manager, inside the individual module everything is great. The pictures load fine. I hop over to the live site and they show up just great. The problem is when I leave that individual module editor on the Joomla back-end to edit something else. Suddenly, when I go to the live site, the pictures are replaced with the little Image broken Icon. Thinking something went wrong with the module editor, I hop back into the module, but everything is fine. Again looking at the live site shows the pictures. This is a maddening error that I haven't been able to find a cure for. Any ideas?

Answer 1

This definitely has to do with your image sizes. 2700x1800 pixels (almost 5MP) and 800Kb per image is way to much for a website. Reducing the image size to about 1000x667px should give you a good balance between quality and speed, and should make your images show up correctly.

Remember that setting the image size in your browser (e.g. <img src="YourHiResImage.jpg" style="width:1000px;height:667"> doesn't work, because the full size image is still loaded from the server. Use a program like Photoshop, IrfanView or any other of your choice to reduce the images.

A quick way to test different image sizes is to use Placehold.it. It's a placeholder image service that let's you request a sample image of any size and color. Simply replace the <img> tag containing your local image with something like this:

<img src="http://placehold.it/1000x667/blue">

You'll get a blue image with exactly 1000x667 pixels. Very useful for testing. This is what your slider looks like with a sample image:

Finally, a quick advice: don't use lots of empty paragraphs <p>&nbsp;</p> to create empty space in your layout like you have with the "Under construction" slide. You have very little control of how this looks in different browsers and screen sizes. Instead, use a <div> tag and set the height (or min-height/max-height) using CSS:

/* Using display:table to center text vertically */
<div style="display: table; height: 600px;width:100%; overflow: hidden;">
 <div style="display: table-cell; vertical-align: middle;">
   <div>
     <h1>Site Under Construction</h1>
   </div>
 </div>
</div>

Answer 2

Just had a quick look and according to the console it's throwing a 403 error for the images.

Could be a permissions issue, go to admin control panel -> Site -> System Information -> Directory Permissions and make sure everything is ok, i.e every directory is writeable (green). Especially the tmp folder, this may be the issue.

Check your Log directory and Temp directory in your global config - what do they say? Did you upload the images using the editor or ftp?

You could also take a full backup of your site using Akeeba Backup, and create a local copy on your PC, There are many tutorials on how to do this if you are unsure just search this site. If you make a local copy on your PC you can rule out server issues and file path issues quite easily.

If it's a permissions issues you can change this easily on your hosting account. Depending on the security configuration of your Web server the recommended default permissions are:

• 755 for directories
• 644 for files

Helpful link here. Hope this helps.

Answer 3

I don't this the is anything wrong with permissions, I can access the images directly using the URL - I found this using Firebug: http://daniel.stamand.net/joomla30/images/IMG_0480.jpg

So I suspect the issue is with your carousel component/module not displaying the images and it might be due to the fact the image are quite large between 400 to 800 Kb and they are not loading in time, before it moves on to the next slide.

Is there a setting in the module to pre-load the images?

You can also try to reduce the image size as well.

Try embedding an image in to a normal Joomla article and see if that works. It should display the image without any issue.