Karla News

Joomla Tutorials: How to Add, Edit and Manage Images in Joomla

File Manager

To keep a web site of text content interesting, it helps to add images. There are several ways to add images to the articles on your Joomla web site.

How to add images to content pages on your Joomla web site:

To add or Edit Pictures within a page, you must make sure the pictures are added to the site storage area. You will have to add them to the storage area before you create a page or before you edit a page.

To upload images to use on content pages, follow the instructions below.

1) Log in to your administration area at www.yoursitename.com/administrator

2) In the top row of menus go to “Content”

3) Choose “all content” or “Static content” depending upon where you are editing or adding an article.

4) Choose the article you wish to add the image to (or create one)

5) Put your cursor in your text where you wish for the picture to show up

6) After clicking the name of the content you want to edit, click “Upload” button at the top right of the page. (A small window will appear).

7) Search for the file on your computer by clicking “browse”

8) Choose the file and click “open”

9) After a pop up messages says “File uploaded successfully”, you can upload more pictures or click the red x of the small upload window if you are finished.

10) Now, click the “Apply” button, which looks like a red check mark.

11) In the editing area (where you type) place the cursor where you want to place the picture.

See also  How to Transfer Files to Your Android Device Over Wi-Fi

12) Click the “Insert Image” button, which is under the editing area and to the left. If it is not apparent, you can type {mos_image} where you want the picture to show up instead.

13) On the right there are tabs for Parameters, Publishing, Menu and Images. Click the tab for Images.

14) In the list of images, click on the file you want to put into the page and then click the >> button.

15) Now that file is on the left. Click on it and a preview will show up below.

16) Below the preview, you must choose an alignment. (captions are optional, but alignment is a must. Choose left, right or center.

17) Click “apply” at the bottom of the image options.

18) Click the disk icon to save your changes.

How to upload images to your Joomla stories directory

You can upload images using an Ftp program or file manager on your server or you can upload images one at a time within Joomla. To upload with your file manager or FTP, the folder to upload images to (so you can use them in your content) is public_html>name of folder you installed joomla to>images>stories. You may create folders inside of stories if you wish to separate images into different folders.

To upload images one at a time within your Joomla web site administration area:

1) Log in to your administration area at www.yoursitename.com/administrator

2) In the top row of menus go to “site”

3) Choose Media Manager in the drop down menu.

See also  Installing the Viper Guestbook on Your Website

4) Click the folder that says “stories

5) At the top left of the page use the “browse” button to find the image you want to upload.

6) Click upload at the top.

You would follow these same instructions to upload banners for advertising, but you would click the banners folder instead of the stories folder.

How to use images hosted elsewhere and insert them in content on your Joomla web site:

If you have pictures hosted elsewhere that you would like to insert into your article:

19) Log in to your administration area at www.yoursitename.com/administrator

20) In the top row of menus go to “Content”

21) Choose “all content” or “Static content” depending upon where you are editing or adding an article.

22) Choose the article you wish to add the image to (or create one)

23) Put your cursor in your text where you wish for the picture to show up.

24) Click the picture icon in the row of editor buttons. If you’re not sure which one that is, you can roll your mouse over the buttons and their name will pop up.

25) Enter the direct URL that your picture is hosted at into the field where it asks for the picture URL.

26) Close that box and click the disk icon to save.

How to display an image in a module position on your Joomla web site:

The easiest way to do this is to upload the picture to your server and use embed html code.

See also  How to Make Love to Your Wife or the Woman in Your Life

1) Log in to your administration area at www.yoursitename.com/administrator

2) In the top row of menus, go to “Site”

3) Choose media manager from the drop down menu.

4) Use the browse button to upload the image you want in a module position.

5) Click Upload in the top right corner.

6) Find the image in the directory of images in the center of the page.

7) Click the pencil icon beneath the image.

8) At the top right of the page, an “Image source code” should appear.

9) Copy the image source code.

10) In the top row of menus, choose “Modules”.

11) Choose “Site modules”

12) Click the “new” button on the top right.

13) Type in the name of the module.

14) Choose whether you want the title to show up on your site.

15) Choose the position for the module such as right, left, top, etc.

16) Click “yes” next to “published”

17) Scroll down to the editor and click the “Html” button.

18) Paste the image code.

19) Click the “Html” button again. The image should show up in the editor.

20) Click the disk icon to save.

Reference: