Djuma Weblog | Uploading Photos

Help | Uploading Photos to the Weblog


Add a New Item with Images
Make sure you are logged into the weblog. Click on “Add New Item” in the Navigation panel. In the “Add New Item” pop-up window, enter a title for your article and an introduction. See Posting Articles for help on adding a new article. In the tabbed menu, select "Body" [A] and add the main content of your article along with your images. Please do not add images to the “Intro Text” box, as this will compromise the layout of the weblog. To add an image, click inside the “Body” box where you would like your image to appear [B] and then click on the "Add Images" button [C] in the toolbar (on the right hand side of the toolbar).

Adding an Image

A new pop-up window will open called "Insert Image". You will be inside your personal folder which has the same name as your membership ID number. Below the big display box [D] you will see a field called "Upload" with a "Browse" button [E] and an "Upload" button [F] next to it. Use the "Browse" button to search your hard drive for the photo you want to upload. Once you have selected your photo, click the "Upload" button [F]. Please note that it is not advisable to upload high resolution images to the weblog as these will use up valuable server space and take a long time for users to download. Please ensure that your photos are no larger than 700 x 700 pixels and optimized for the web (max 250 KB). If you do not have a program to do this, upload the high res photo to the server and use the edit tool to make the photo smaller.

Uploading your Image

Editing your photo on the server
You only need to follow this procedure if you do not have an image editor on your computer and the largest side of your photo is greater than 700 pixels or the file size is larger than 250 kb. Select your photo in the folder window [D] after it has uploaded and click on the pencil icon [G] under the thumbnail of your photo to open the edit tool. A new window will open with the image editing tools. Wait for the image to load completely, then select the resize tool [L] from the menu and change the width or height of your photo (depending which side is bigger) to 700 pixels in the size fields [M] at the top of the window. Make sure the "Constrain proportions" check box is ticked. Click on the green tick icon and you should see the other side adjust automatically to maintain the aspect ratio. Wait while your image reloads. If you are happy with the size, click the "Save" button [N] at the bottom of the left side toolbar.

Resizing your Image

You will be asked to choose a format and quality setting. If you are uploading a JPEG, selecting JPEG medium from the drop down menu [O] will usually do the trick. If you are happy with the new image, click the green tick [P]. Close this window and click refresh [H] in the insert image window. You should see your high res image and your new optimized image in the thumbnail window now. Delete the high res image by clicking on the trash can icon [I] under the thumbnail, so as not to take up unnecessary space on the server and in your personal folder.

Saving your Image

Click on your new optimized image and it will be added into the "Image file" field [J] along with its dimensions. Don't make any changes here, simply click the "OK" button [K] and the window will close.

Now you should see a piece of code that looks like this in your “Body” text:

Code:
<%LightBox2(13/leopard.jpg|Image Title|Photo Group 1)%>


Ensure that this code is on its own line, as this is where your image will appear. Don't delete any of this code!

Insert Image Code

Description of the code:
"LightBox2" [Q] calls the photo gallery application. The first part inside the bracket is the path [R] to your image on the server. Make sure that your member ID number and a forward slash appears before your filename (13/leopard.jpg) so the program can find your image inside your personal folder. The text after the first vertical line is the title or description [S] of your photo. Change this to whatever you want, but don't delete the vertical lines. The last piece of text refers to the group of photos [T]. You need not change this if you want the user to be able to skip through all your photos without returning to the article each time.

Adding more Photos
If you want to add more photos, repeat all these steps above, inserting the new code directly after the previous code. If you have many photos to add, you can upload all your photos before you start the repetitive step of inserting the code for each photo. When you are done you can click the "Preview" button in the menu to view the layout of your article. You won't see the photos yet though. If you are happy with it, click on "Add Item" in the menu and you should get a success message. Close the window and refresh your browser to see your new article. You should be left with the layout and functionality of the photos below... If you want to make any changes, click the "Edit Item" button above your article.

IMPORTANT NOTE:
Please do not delete any images in your personal folder or subfolders that are still being used in your previous articles! If you do delete them, your images will no longer be displayed in your articles! The only thing weblog users will see is black squares instead of your thumnbnails.

Tip:
You can create new folders within your personal folder to organise your images. Don’t move existing images though, unless you go back to all your previous articles and add the new folder into each line of code.

Vuyatela - Room Interior Vuyatela - Boma Bush Lodge - Bed Bush Lodge - Boma Lazy Lioness - Djuma Game Reserve Leopard - Djuma Game Reserve

Next Topic >>

Help Index: