Web design tutorials - Joomla Wordpress and SEO tips

How to add images to my Joomla website / gallery

This tutorial will show you how to add a picture to your website

It is important before uploading pictures to your website resize them first!

Why? Otherwise your pageload speed will suffer so will your rankings!

Here are some useful image resizing websites

http://picresize.com/

http://www.webresizer.com/resizer/

What is the perfect picture size for a website?

Slideshow pics should be either 1600px wide

Gallery pics (in a popup lightbox) should be either 800px X 600px or 640px X 480px

Content pics should be 400px X 300px

Once resized save your pictures in a folder on your computer called "webpics" or similar.

Ok so you have resized your pictures - what next?

Login to your website

Step 1: Login to the site e.g mywebsite.ie/login

Step 2: Go to the page you wish to edit and click the edit icon.

Step 3: On the tool bar find the little image icon.

The image icon on the toolbar

jce image edit toolbar

Step 4: Once clicked a popup box will appear.

1 = Folders on the Server

2= Images in a folder

3 = Insert button

Step 5: To upload the picture you click the icon numbered 4 in the picture below - browse on your computer and upload.

The image manager

jce image edit1

Step 6: Once uploaded Select the photo (2) and click the insert button (3)

Other things you can do with pics on a website.

  • The box numbered 6 shows options such as "Alternate Text" useful for screen readers - describe the picture here.
  • You can change the pics dimensions - always shrink a pic never make it bigger than the original!
  • Set the alignment to left or right so the text wraps around the picture.
  • Set the margins to give the pics some space around them e.g margin of 5 is good.

What about my Gallery or Frontpage slideshow?

To change or add photos that are in your gallery 

  1. In your image manager find the Gallery Folder e.g. "gallery" or "slider"
  2. Simply delete a photo or upload a photo to this folder and they will automatically appear in the gallery or slideshow.
  3. Important - make sure your pic is big enough or matches the dimensions of other pictures in the Slideshow.

Contact me if you need any help!