CMS Made Simple Help

Please note: This document is still under construction. If you find you require an omitted section or need help doing other tasks, let us know!

1. How do I resize my pictures for the web?
2. How do I upload my pictures to my website?
3. How do I add pictures to my photo albums?

1. How do I resize my pictures for the web?

   Prerequisites:

   NONE

   Steps:

   We want to resize our images to a maximum size of 400 pixels high and 700 pixels wide. This is so your images are small enough to fit on small screens and big enough for high resolution monitors. If you want larger images that will be too big for people with the smallest of monitors (800x600, which is uncommon) replace the heights in these instructions with 600 pixels and widths to 900 pixels. If you already know how to resize your images to this size you can skip the rest of this section.

   There are many ways you can resize your images. Windows has a 'resize for email' option and some photo programs allow you to resize when you import your images. We recommend using Adobe Photoshop to resize your images, but if you don't have Photoshop, you can use an online tool. Click here for Photoshop instructions
   There are two online tools we recommend:

   • Picresize PicResize Instructions
   • Or for a more comprehensive tool: Picnik Picnik Instructions

   For Photoshop users:

   These instructions should work no matter your version of Photoshop.

   1. Open your image in Photoshop.

      This will display your image in photoshop. If you don't know how to do this you might be better off using one of the online tools.

   2. Go to File-> Save For Web

      This will bring up a large dialogue window giving you various options on how you want to save your image for the web. It should like the image below:

      
   3. Set the image quality settings.
      • We have set the format to JPEG
      • We have set the quality to High . Though you can set this to anything lower if you want your images to load faster on the web, at the cost of slightly lower image quality.
   4. Click on the Image Size Tab on the right

      You can see this in the image above. Here is where we adjust the image size settings.

   5. Make sure the 'Constrain Proportions' checkbox is ticked and 'Quality' is set to Bicubic Sharper.

      This will ensure your image stays the same shape and is resized accurately.

   6. Set the image to be a maximum of 400 pixels high and 700 pixels wide.

      You can see this in the image above. Here is where we adjust the image size settings. Change the width to 700 pixels. If you have 'Constrain Proportions' checked, the height should change too. If not, Check Constrain proportions. When the height changes, if it is larger than 400 pixels, we want to set the height to 400 pixels. This ensures that the image is a maximum of 400 pixels high and 700 pixels wide. In the example image above we would have to set the 533 pixels high to 400 pixels.

   7. Click Save and choose a file name that ends with _web.(+file extension)

      So if your file name is originally myartwork1.jpg, the new file name will be myartwork1_web.jpg.
      REMEMBER TO ADD .jpg. Now you're done! You may want to Upload your images to the cms now.

   For Picresize users:

   
   
   1. Go to http://www.picresize.com
   2. Click Browse and select the image you want to resize.
   3. Click Quick Resize This is under the browse button. The page should look something like the image below:
      
   4. Check the option circle next to the words: "Custom Size" and set the image width to 700 pixels unless you have already resized your image to 700 pixels, in this case you will need to set the height to 400 pixels, leaving the width blank. You will need to change 'Percent' to 'Pixels'
   5. Click Resize Pic! The website will now resize the picture for you.
   6. Click View Resized Image, wait for the new window to open, right-click and select 'Properties'.

      This will display the new resized image then we're finding out the new image dimensions by viewing the properties.

   7. Check that the image height is LESS than 400 pixels.

      If so, you will need to close the properties box, close the new image popup window that was opened when you clocked View Resized Image. You will need to click the Back Button in your browser and redo steps 2 through 5 making sure you set the height to 400 pixels (NOT Percent) leaving the width blank.

   8. Click "Click Here to Download/Save As" and save your image somewhere on your computer.

      You may want to Upload your images to the cms now.

2. How do I upload my pictures to my website?

   Prerequisites:

   1. Pictures are Resized
   2. Logged into CMS Made Simple Admin

   Steps:

   • Go to Content -> Image Manager

     This will open the Image Manager where you can upload and delete images and folders on the web server.

   • Create a new folder if this is an image for a new photo album.

     Folders are a great way to organise your images and makes adding photos to photo albums a lot easier. Type the name of the new folder in the textbox beside 'New Folder:' and click 'Create'. You want to click on the icon above the new folder name when the page reloads so any files we upload are uploaded to this folder.

   • Click browse and find the file you want to upload

     The file you are going to upload should be resized for the web. If you haven't already done this, you'll have to follow these instructions.

     Once you have selected the image you want to upload, click 'Send' and the image will be uploaded to the server, and you're DONE.

     You may want to add pictures to your photo albums.

3. How do I add pictures to my photo albums?

   Prerequisites:

   1. Resize your pictures for the web.
   2. Upload a picture to your website.

   Steps:

   1. Go to Content -> Photo Albums.

      This will display a list of all the photo albums that are being used throughout your website.

   2. Click on the name of the photo album you want to add the picture to.

      This will allow you to edit the photo album's images and settings.

   3. Click 'Add Pictures'

      This will display the contents of the images folder on your website

   4. Find the picture you uploaded and make sure the checkbox beside the file name is checked.

      This will add this picture to the photo album. If you cannot find your image, you may have not uploaded your image file, if so, find out how to Upload Pictures. If you want to add all or most of the pictures in a folder, click the words "Select All" then uncheck the images you DON'T want displayed.

   5. Click Submit

      You are finished. Your image is now added to the album! Go to the page where those images are displayed to see the changes. You may want to Add a comment. to the image. If the image is too big or takes too long to load, you may need to Delete the Image then Resize your pictures for the web.