Entries tagged with “Alignment” from CMS

thering.jpg

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.

cartoon.jpg 

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
So how do you re-size your photos and optimize them? Please read Part II of this blog trilogy for how to use Photoshop to do so. You can also read Part III for a  step by step guide on how to upload a photo into Collage.
 

thering.jpgThe Lord of the Picture Part III: Uploading Photos In Collage

Earlier we covered the University's policy on photos, how many and what size and much more. Part two of this trilogy explains how to re-size and optimize photos using Photoshop.

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.

select-file-name.jpg


 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.
hit-new-image.jpg
 


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.
image-plus-sign.jpg 
 
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.
navigate-image-folder.jpg 


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.
select-image-folder.jpg
 


7. You’ll then see the contents of that folder – in this case all of the images in the Veterans folder.
new-image-added-to-folder.jpg 


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).

width-proportions-alt.jpg 

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).
allignment-and-padding.jpg
 


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 –
new-image-button.jpg
 

12. You’ll get a pop up window – hit browse.
browse-new-image.jpg

 
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.
select-new-image-desktop.jpg 


14. Then hit Ok to upload the image.
image-upload-hit-ok.jpg
 

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.
 
new-image-added-to-folder2.jpg


16. Make any more edits to the pages in your task, save them and mark the task done. For help on how to mark a task done please go to step #11 in this blog entry.

Subscribe to feed Subscribe to this blog's feed

Subscribe to feed Search results matching “Alignment”

Tags