Entries tagged with “Alignment” from CMS

The Lord of the Picture Part I: Everything You Wanted to Know About Photos & Collage

People use pictures for everything, including sprucing their websites. As the old saying goes, “A picture is worth a thousand words.” Thankfully in our case you don’t have to write and put into collage 1,000 words before you can put a picture in. This guide will not only walk you through how to get your photo optimized and uploaded into Collage, but will also explain the University’s policy on photos – “Why can I have only three photos per page?” and much more.

First of all let’s start with some ground rules. The University’s Graphic Standards Policy can be found here, including logos and power point backgrounds available for download. There’s also a CMS FAQ with photo information.

Here’s what you need to know:

Adding pictures and graphics to your website is encouraged. Clip art, while good for blogs and other informal communications, is not allowed on web pages.

Only three pictures are allowed per page (with some rare exceptions). The main reason for this is that the more photos on a page, the longer it takes to load, and it has been determined that three photos is the optimal amount for a quick load.

If you have more than three photos you’d like to include, an on-line gallery can be created here. Please contact a member of the Web Content Team via e-mail at 978-934-3875 to set up one of these.

Photos can be hand-delivered on a CD, disk, flash drive, etc., to the Public Affairs Office in Cumnock C-7. You can also upload and send them to us via the Dropbox.

On some occasions photos can also me e-mailed to the Web Content Team. Please contact a member of the Web Content Team (e-mail: webcontent@uml.edu) at 978-934-3875 to discuss your options.

For the Web photos should be 72 dpi, 200 pixels wide, optimized for web, saved as .jpg. There’s one exception – bio (Faculty and Staff) photos should be 72 dpi, 160 pixels wide for the image on individual bio page, 64 pixels wide for the thumbnail on the faculty listing page, optimized for web, and saved as .jpg

O.k. so
now that you’ve got the image sized and optimized correctly, its time
to upload it in Collage. This step by step guide will help you do just that.

1. Create a new task. If you’re
fuzzy on how to do this please follow the directions in this
blog entry.

2. Once you’ve created the task and opened it
- Go into Overview in your task, Select the page you want to add the
picture on and click on the file name. In this example we’re using a
Student Affairs Veterans task.

3. For example let’s use the
Resources page. Once inside the editor, put your mouse cursor where you
want to add the picture and click on image.

4. You’ll get a pop-up window
that looks something like this . Click on the little plus sign next to
the images folder to see all of the folders.

5. Please keep in mind you may see a
lot less folders than I do depending on your permissions. Use the arrows
to get down to the folder the pictures are in that you want to use.

6. In this case it’s
the Veterans folder. Click on the blue name of that folder. This is the
folder where the images will live later in Collage – in case you ever
want to use them again.

7. You’ll then see
the contents of that folder – in this case all of the images in the
Veterans folder.

8. Select the photo you
want by clicking on the little square to the left of the file name.

9.
Remember: for photos other than Faculty Bios, the largest you can have
is a width of 200, or 160 for a bio photo. Also make sure that the
Constrain Proportions box is checked. You’ll also need to fill out the
Alt: space with a caption of what the photo (is).

10. You can also select an
alignment and put in padding for horizontal and vertical if you want to
have text wrap around the (photo).

11. If you’re
uploading a new photo – follow these same steps, but once you get to the
folder you want to put it into – select the new photo button –

12.
You’ll get a pop up window – hit browse.

13. Find
where you saved the photos too (I always put them on my desktop to make
it easiest to find) and click on the file and then hit open.

14.
Then hit Ok to upload the image.

15. It will add it to the folder, and you’ll
need to fill out all of the boxes, including width, alt etc. When you’re
done hit ok and the image should appear on your page.