Integrating Images

What are a few tips for preparing images before uploading to my site?

It is important to prepare your images before uploading to your site.  Here are a few tips.

  • Use an image editing software or web service. You can search the web for some free or low cost softwares / web services for editing images.
  • Resize your image to the size you need for your space
  • Crop the image as needed to bring into focus certain parts of your image.
  • Name your file.  Use hyphens or underscores to separate words in your file.  This helps search engines find your images.  Use key words when appropriate.
  • Name your files without spaces or accents.
  • Optimize your image size.  Small image size loads on a page faster than large image size.  Speed counts as your visitors like quick loading pages.  As well, sites with non-optimized images will be punished by Search Engines giving you a lower ranking and less visitors.

How do I upload images in the Media Manager?

Once you have your images cut to size they are ready to be uploaded. Here are the steps to follow in the Media Manager.

  • Go to  the Content menu > Media.  The Media Manager stores all your uploaded files (images, pdf files etc...) in your images folder on your website. 

You can create new folders, and upload and delete files as needed. Your files can be viewed in Thumbnail or Detail view.

  • Click on the folder you wish to upload your file to.
  • Click the green Upload button.
  • Click the Choose Files button to locate your image on your computer. You can upload more than one file at at time, but your server will likely have a limit to the number of files uploaded at the same time.  If your images are very large, than it will take a long time so it is best to resize them before uploading them.
  • Locate your file(s) on your computer and click the Open button.
  • Click the blue  Start Upload button. You should now see your files uploaded.  Do keep your files in the correct folder. It makes things much more manageable than having your files in any old folder.

To create a new Folder

  • Click on the Folder to be the root of your new Folder. The new Folder will be created in whichever folder is currently being displayed.
  • Click the Create Folder button 
  • Type the name of your folder in the empty field.  The names of your folders should not have special symbols nor spaces and is best to  use lowercase as well.  Hyphens are best to separate words.

Note: It is best to resize your images to the correct dimensions before uploading it to your site. If your image is oversized and you resize it directly in the Content editor, the images will load consirably slower and slow down the loading of your web page in your browser.  Google will take this negative issue in consideration when ranking your page or site.

How do I upload an image while editing an article?

When you are editing an article....

  • click the Image button below your editing window

A popup should appear to integrate an image. 

  • Select the folder you wish to upload your image to.
  • Scroll down till you see the Upload File text in this popup window
  • Click the Browse button to locate the image on your computer
  • Click the blue Start Upload button to upload the image to your folder.

Note: It is best to resize your images to the correct dimensions before uploading it to your site. If your image is oversized and you resize it directly in the Content editor, the images will load consirably slower and slow down the loading of your web page in your browser.  Google will take this negative issue in consideration when ranking your page or site.

How do I add images to my articles?

Once your image is uploaded to the Media Manager you can now integrate them into articles and modules.

It is possible to insert images using the Content Editor in Joomla. However, this following method provides a simple way of inserting images stored in the Images folder. On the Edit Article screen, you'll see a toolbar of editing buttons below the Content Editor window.

Put your curser where you want the image to be placed in your content.

  • Place your cursor at the top left of your article. This will place the image in that corner.
    Or place the cursor below if you want the image to be at the bottom.
  • Click The Images button below the content editor window. This will show you all the folders in your images directory. 
  • Go to the folder where your image has already been uploaded to.
  • Select the image you wish to insert.
  • Add an Image Description (best practice). The Image Description sets the Alt tag which is useful for the visually impaired and Google indexation.
  • Add a caption (if desired or needed)
  • Choose whether to put your photo on the left or right of your article. Your text will then go around the photo.  You can also choose to center your image in the article.
  • Add an Image title (best practice)
  • Click on the blue Insert button on the top right of your popup screen to insert your image to your article
  • Save your work by clicking the top left green Save  or  the Save & Close button.

Refresh the page on your website and you will see the image on your page.  

How do I add space or a margin around my images?

Depending on the template, you may notice that the text touches the image as there is no margin space around the images.

Some possible solutions are:

  • add the padding or margin code to your CSS file. This will give a spacing (padding or margin) around all of your images. If you do not know how to do this, then contact your template developer or template club providor.
  • install the free JCE Editor extension to your Joomla site. This extension gives you more flexibility in presenting your images as well as integrating pdf files to your site. Our preference is using the JCE Editor as it gives you way more flexibility on how you present your images & pdfs into your articles. Instructions on using this extension is on their website.

How do I add a link to my image?

On the Articles: Edit page for editing your article

  • Select the image in your editing window
  • Click the Insert/edit link icon of your Tiny MCE Editor  (You must know the complete URL address of the link.)
  • Or install the free JCE Editor extension to your Joomla site  as it makes adding links easily to Joomla articles, contacts, email addresses, images, pdf files and external links etc....  Follow their instructions on their website.

About Joomla Canada

Welcome to the Joomla Canada (joomla.ca) website!

Owned and operated by POPcliQ.com. We provide complete Joomla Web development services including technical support, training, hosting & template services. We hope you find what you are looking for.

Contact us if you have questions.

Joomla Canada Disclaimer

The content on this Joomla Canada website is provided in good faith so as to give useful information and resources to Canadians wishing to learn more about Joomla, as well as Joomla based businesses, non-profit organizations, and individuals who wish to know more about services and products by Joomla.

Publication on this site by any business, non-profit organization or individual including their services or products does not imply endorsement. Due diligence is suggested to anyone who wishes to use their services or products.

OSM, Inc. Disclaimer

Joomla Canada is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla!® name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries..