0

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?

  • What editor are you using? How are you inserting the images? Have you a link to your live site? – jonboy Apr 27 '15 at 8:41
  • I think jonny_s meant can we have the URL to your live site so we can see the error, not a direct link to your admin screen :) – Chamira Athauda Apr 27 '15 at 15:54
  • WOW sorry, I feel like an idiot now. Using the default editor with default image insert function. Be kind to the site. I only started working on it a day ago and is nowhere near ready. daniel.stamand.net/joomla30 – Daniel Apr 27 '15 at 17:11
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:

Slider with 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>
  • Well spotted! I presumed it was permissions! +1 – jonboy Apr 28 '15 at 7:21
  • Changed my image sizes to 1000 by 667. Problem is still persisting. Going to try permissions next. – Daniel Apr 28 '15 at 17:56
0

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.

  • I'm not seeing the pathway that you layed out. I can get to the control panel but from there there's nothing for site or system information. – Daniel Apr 28 '15 at 18:20
  • Which path can't you see @Daniel Have a look here docs.joomla.org/Help34:Site_System_Information Also a guide here joom3.zemplate.com/troubleshooting-tips/… – jonboy Apr 29 '15 at 7:25
  • Okay, finally found the permissions. configuration.php is the only un writable one. How can I turn that to writable? – Daniel Apr 30 '15 at 21:20
  • I uploaded the images using the editor. Would the FTP be better? – Daniel Apr 30 '15 at 21:26
  • Configuration.php being unwriteable is fine as long as it's the correct configuration settings obviously. It only needs to be writeable during the installation process. What is your /tmp path in this file as I suggested above? – jonboy May 1 '15 at 7:39
0

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.

  • I reduced the size of my images and tried in an article but the same thing is happening. – Daniel Apr 28 '15 at 18:18

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.