Entries tagged with “Image” from CMS

Picture Perfect!
Creating A Photo Gallery For Your Website.


starry-night.jpg
 
mona-lisa.jpg
dogs-poker.jpg



As the old saying goes, “A picture is worth a thousand words.” Whether those words and pictures are a masterpiece, like the "Mona Lisa" or "Starry Night" or something else, like Dogs Playing Poker"; this is very true no matter what collage, department or program they are for. Pictures can spruce up  your website and help it stand out from the rest. 

So you’ve got some great photos you want to add to your website – now what? That depends – on how many you have, and where you want them to go.

The University’s policy on photos can be found in the web policies section of our website, as well as in the Style Guide. We also have three detailed blog entries explaining everything you wanted to know about photos and Collage.

Please keep these points in mind:
  • 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). This is because 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. Please contact a member of the Web Content Team via e-mail or by phone at 978-934-3875 to set up a photo gallery.

    gallery.jpg


    • 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.
    • Please include a Word document (or some sort of text file) with captions for as many images as possible. Also include information about the event the pictures are from (to be used for the title of the Photo Album), the date they were taken, and other pertinent information.
    • Please also include a name and address for return on the photos after they are uploaded.

Once your photos are uploaded to the Gallery, the photo album can be linked to from your website. We have a blog entry on help creating a link if you need it.


THE END

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 II: Using Photoshop

Earlier we covered the University's policy on photos, how many and what size and much more. Part three of this trilogy explains how to upload your photos into Collage.

So how do you re-size your photos and optimize them? It depends on what program(s) you have. We use Photoshop, but you are welcome to try another program. If you don?t have Photoshop or a similar program you can contact us, or upload the images in a task in Collage and then we will re-size them after the fact. If so skip ahead to part 3. If you have Photoshop, you can read this blog entry on how to re-size, etc. images.

Using Photoshop

1.    Open the photo in Photoshop – right click on the photo and select Open With and then the program you wish to open it with – in this case Photoshop.
open-with.jpg 

2.    Left click on Image in the top menu, and then select Resize and Image Size.
resize-photoshop.jpg
 

3.    In the pop-up window, make sure that Scale Styles, and Constrain Proportions are checked. Then change the resolution to 72. Chances are this will change the width and height.
resolution-photoshop.jpg 


4.    Once you’ve changed the resolution, change the width to 200 (or 160 for a Bio picture) and hit ok. This should also change the height. In this case the picture is a perfect square – so the width and height match. This will not always be the case.
change-width-photoshop.jpg
 

5.    Once you hit ok, the photo should shrink down.
smaller-image-photoshop.jpg
 

6.    Now click on File and then Save for Web.
save-for-web-photoshop1.jpg
 

7.    In the pop up window, make sure the images look fine and that the Quality is set to 50. Then hit ok.
save-for-web-photoshop2.jpg
 

8.    In the pop up window, select the destination you wish to save the picture to (I like to save it to the Desktop to make it easy to find) and name it.
save-to-desktop.jpg
 

9.    Now repeat this process for any other photos you wish to upload. For a bio thumbnail go up to step #4 and change the width to 64, and then repeat the steps that follow it – saving it with a different name so you can tell the smaller from the bigger image.
thumbnail-size-photoshop.jpg


thumbnail-size-photoshop-smaller.jpg

Photoshop Elements is a fairly inexpensive product (around $50) that is perfect for tasks like optimizing photos. If you do not have Photoshop or another photo software please contact a member of the Web Content Team (email: webcontent@uml.edu) at 978-934-3875 to discuss your options. Again: you can also upload the original photos in a task and we will re-size them after the fact.




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.

Up Up And Away! How to UPload Images in a task.

up.jpg

Having trouble uploading your images into Collage? Wondering why it takes so long for your task with new pictures in it to be approved or why they are a different size afterward? Let me explain and hopefully we can help each other.

Photos for the web should be: 72 dpi, 200 pixels wide (64 for a thumbnail), optimized for web, saved as a jpeg (.jpg) according to the University’s Standards Guide.

That said, if you don’t have Photoshop or a similar image manipulation program, this may be a little difficult for you to do. So you have a couple of options:

1.    Email the photos to webcontent@uml.edu and request that they be re-sized and optimized – make sure to tell us where you want them to go and what the name of the task in Collage that they are associated with.

2.    Another option is to do #1 but also upload and place the original (non-optimized photos) on to a page in Collage – that way we know better where you want the new versions to go in the context of your page(s).

3.    You can call the Help Desk @ 4357 and inquire about getting Photoshop installed on your computer and you can then re-size and optimize the pictures yourself and then upload them.

Once you’ve re-sized your photos it’s easy to upload them like any other file. For those directions check out this blog entry on uploading files within a task.

For further help with images please see these three blog entries that explain in further detail how to work with images in Collage:


The End.


Uploading a New File Within A Task


upload.png

Having trouble uploading new documents, pictures etc. inside a task? Or adding pages and files that are already inside Collage to a task. Here are some easy steps to make this a breeze.

1.    Go to your Inbox in Collage and select a task you’ve already created by clicking on the blue highlighted name under the Task Name column. Otherwise create a new task by clicking on the New button.
Thumbnail image for go_to_inbox.jpg

Thumbnail image for task_name.jpg


2.    Once inside the task click on Assets and you’ll see the screen with a list of assets (pages, files etc.) associated with your task. This will be empty until you add these to it.

Thumbnail image for click_on_assets.jpg

This is what the empty assets list looks like.

empty_assets_list.jpg


3.    To add a page or document that’s already in Collage click on Add. If you’re uploading something new skip ahead to # 8.

add.jpg


4.    A pop up window will open and you’ll then navigate through the files to the appropriate page/file. Notice once you click on the file it will be added to the box on the bottom of the page.

add_file.jpg


5.    Once you’ve selected all of the pages/files you wish to add click on OK. You will get a message saying the file(s) were successfully added to the task and they will show up under the assets list.

asset_list.jpg

6.    Now click on overview and then select the file you wish to edit from the Assets box by clicking on the file name highlighted in blue.

click_overview.jpg
 

edit_file.jpg


7.    A pop up window will open with your file. Make the changes, save and preview them and when you’re done editing all of your files mark the task done and send it along for approval. You can mark it done by clicking on the done button, or by clicking on the little arrow to the right of the task name and then selecting done.

mark_done1.jpg


mark_done2.jpg

8.    To UPLOAD A NEW DOCUMENT into the task first go into the assets page (see step #2)

9.    Then click on upload. A pop up window will open.

upload.jpg

10.    From the new window, select the deploy folder you wish the new document to be uploaded to by clicking on the button at the end of that box. (This folder is where you’ll be able to find it in the future after you’re done using it in this task). Notice there is a RED ! and the end of the deploy folder line signifying that this step must be completed before continuing.

deploy_folder.jpg

11.    A new window entitled Select Deploy Folder will open. Navigate through the folders to the appropriate folder and select it. Keep in mind the files need to go into the appropriate folders in order to work – PDF’s etc. into documents folders, pictures into images folders etc.

deploy_folder_pop_up.jpg


deploy_folder_pop_up2.jpg
12.    Once you select the folder you’ll notice it’s added to the Deploy Folder line and the red! becomes a green check mark.

green_check_mark.jpg


13.    Now you need to actually upload the new document/image/file. Click on Add files.

add_files.jpg

14.    Another window will open and you’ll need to click on Browse (next to another red !).

browse.jpg
15.    Yet another window will open, and you’ll need to navigate around on your computer to wherever the file you wish to upload has been saved. To make this easy you may just want to save the files to your desktop and always upload them from there.

desktop.jpg

16.    Select the file and hit open.

select_file_open.jpg

17.    Then hit "ok" on the Upload file screen.

upload_file_ok.jpg

18.    Then you’ll need to hit upload on that first pop up window. However if you’re uploading more than 1 new file TO THE SAME FOLDER, click on add files and go back to step #13. Once you’re done click on upload.

upload_file_upload.jpg

19.    The file will then be added to the assets list.

assets_list_with_pdf.jpg


20.    If you need to upload more new files, but to different folders, go back to step #9 and re-start until you have all of the files uploaded you want to.

21.    (Go to step #6) Make your edits and mark your task done and send it along for approval.


Subscribe to feed Subscribe to this blog's feed

Subscribe to feed Search results matching “Image”

Tags