Adding / Editing Images

There are a few sections to this page:

• Adding images to your site
• Keeping images organised
• Resizing and cropping images
• Adding image captions
• Choosing images from other sections of the site
• Advanced notes
• Copyright

Adding images to your page. 

1. Click on the image button (the picture frame). This will display your image filesystem.
2. On the left choose the correct folder to add an image. There is a folder for each subdomain site (eg /ca for Canada). Inside this folder ,you can upload and delete images. You can browse images in other subdomain folders to add them to your page, but you can't add them there.
3. To upload an image, use the Upload button and select the image from your desktop. 
   
4. To add to an image to your page (either a freshly uploaded image or one that existed already), select that image and press the 'Add to ckeditor' button.

Keeping Images Organised.

We have kept the existing Plone structure of images, so you will find images already existing in subfolders. However, you may want to create more subdirectories to organize your images, e.g

• ca/images/meditation
• ca/images/people
• ca/images/size-250

To do this, navigate to the subdirectory /ca/images. Then click on the 'Manage directories' button, and type in a name (e.g. 'small') then click Add. You can now add images into this subdirectory /ca/images/small.

You can also use the 'Manage directories' button to remove directories

Resizing and Cropping Images

• You will achieve better results if you resize and crop images using Photoshop or Picasa before you add them to the site. However, there is basic functionality for cropping and resizing inside the file manager.
• To resize images, select the image, press the 'Resize' button and select the width and height. If you wish to change the width and keep the proportions, just change the width and then click in the height box - the new height will automatically be calculated.
• To crop images - select an image and press the 'Crop' button. In the bottom window, you will see the image inside a green square, and a tiny pink window. Hover around on the small pink window, and hold and drag. (Holding and dragging when there is a hand cursor will move the square, when there is a crosshair will change the square size)

  

  Note: to change the size of the cropping window, don’t try to change the size of the pink square (it wont work). Instead, click and drag to create a new pink cropping window. When you are happy, press ‘crop’. You can choose to crop the existing image or create a new, duplicate image.

Adding image captions

After you have added the image, press 'Source' and find the HTML for the image - we need to add a title attribute.

Changing it is relatively straightforward. The basic code for the image will look something like

<img src="/files/members/asprihanal.png" alt="" />

We change this by adding a title attribute:

<img src="/files/members/asprihanal.png" alt="" title="Asprihanal"/>

Once this is done, then click Source again, then click on the ‘Styles’ dropdown and add one of the 3 styles there (‘Align image to left, Align image to right, Unaligned image with caption’). You won’t see the caption immediately, but you will see it once you’ve finished editing and pressed ‘Save’.

Choosing Images from Other Sections of the Site.

• Suppose you like images in the UK section. You can browse in the left to  files/uk/images. You can then select the image you want, press Send to CKEditor, and use it in your page.
• Example: If you liked the lotus image on http://uk.srichinmoycentre.org/meditation. To see where the image is located: right-click on the image and then select 'view image'. This shows the image is at: http://uk.srichinmoycentre.org/files/uk/images/flower.jpg. Then, when you are editing your page, you can go into the filesystem, navigate to /uk/images and send this image to your page.

Browsing Other Sections to Find Images

Advanced Notes for Images

• To increase the speed of page load, it is important to keep the size of images low. When adding new images the size should be less than 100k.
• If an image greater than 900 by 600 pixels is added, it will automatically be resized.
• Some images in Plone were added without the .jpg suffix at the end. This means the text editor can't calulate their size and will add them as a link instead of an image.
• Linking Images. You can make a link into an image. Just click on an image and then select the link button. For example, the above image links to the main help page. Visitors often expect images to be links.

Copyright

• Please make sure you are not breaking copyright law before uploading images from google image search. We have thousands of beautiful images available on the Sri Chinmoy Centre Gallery to use, if possible try to use these instead of from some external site.