Adding Images

Cropping Photos for Snippets

To ensure that images display properly within each snippet, they must be cropped to specific height and width ratios. To crop your photos appropriately you should use Adobe Photoshop.

Installing Adobe Photoshop

To install Adobe Photoshop, fill out a TechHelp ticket:

1. From Software/Applications scroll to the bottom of the page and select Computer Software
2. Click “Open a Ticket”
3. Fill out the form fields as needed (subject can be “Install Adobe Creative Cloud”). The description field should include brief text describing the Adobe Creative Cloud software request and also please add the computer name and property tag number (found on a sticker on your physical computer).
   
   
   1. On a PC the computer name can be found by going to the Start Menu → Towson System Information → Asset Records → Computer Name
   2. On a Mac the computer name can be found by going to System Preferences → Sharing → Computer Name
4. Once access to the software has been granted you can install the Adobe CC Desktop App (OTS will provide installation instructions). From inside the CC Desktop App, you can install whichever pieces of the Creative Cloud suite that you need.

Adding Crop Presets to Adobe Photoshop

The easiest way to get photos cropped to appropriate sizes is to use crop presets. To set up crop presets first select the cropping tool. Then add the following dimensions by filling out the height, width and resolution size (72 dpi).

• sq = 700 x 700 pixels 
• m = 1040 x 650 pixels 
• l = 1440 x 576 pixels  
• xl = 1440 x 650 pixels (used for the top hero image in the Featured News Template and the "full width callout")
• s (small) 470 x 376 pixels (used ONLY for the “full width gallery” snippet)
• ic (or in content to wrap text around photo) = adjustable but suggested sizes are 360 x 280 or 360 x 450

Next use the crop selection drop down menu (in the top tool bar) and select “New Crop Preset” and then save the newly created crop preset as the appropriate image code (see above) for each photo crop.

Snippet Library

The Snippet Library provides a visual guide to available snippets and image crops needed for each snippet. Follow these Steps for Incorporating Photography for more guidance on how to add images to the various snippets.

File Naming Conventions

Name image files with all lowercase letters, separate words with hyphens, and add image code at the end:

• name-name-code.jpg → stephens-hall-m.jpg 

Optimizing Photos for Web

To ensure that images are optimized for the Web, photos should be saved close to 200 kb. After cropping your photos in Adobe Photoshop, go to:

• File → Export → Save for Web (Legacy)
• under the preset dropdown menu, select “JPEG High”
• click the “progressive” checkbox and change the quality to 75

This will change your preset to “Unnamed.” Under the “Optimize Menu” dropdown click “save settings” and save it as “TU Settings” (now whenever you use this setting it will default to the parameters you adjusted, if it changes for some reason you can always select TU settings as your preset).

You will see the file size in the bottom left corner of the “Save for Web” pop-up menu (under the file type, i.e., “JPEG”); always aim for around 150 – 200 kb. You can adjust the quality percentage above from 75 to higher or lower to change the file size.
  
Then click “save” and name the file.

Adding Images to the News Images Folder

Upload and publish images for news stories to the “Images” folder in the “News” section. 

Adding a Hero Image to the Newsroom w/Categories Template

After you create a Newsroom w/Categories article, the page opens. Click on “Edit” [in the top toolbar] and then click on the “Main Content” pencil icon to add content. You can add a top hero image into the default snippet called the “Image Block Hero w/caption.” This snippet requires an image with the “–m” code. 
  
To add an image, right click the image row and select “Insert/Edit Image.” Add a description of your image for ADA purposes. You can also add a caption but it's not required.

Adding a Hero Image to the Featured News Article Template

The featured news article template has the option to add a large hero image that needs to be cropped as an “-xl” image (1440 x 650 pixels). The image can be added using Modern Campus CMS’ Multiedit functionality (note: for more about Multiedit, see Using Multiedit in Web Editor Resources). Here's how to add a hero image to a featured news article.

1. Log in to your Modern Campus CMS webpage by clicking on the copyright symbol, as you normally would.
2. Click the Multiedit button in the upper right corner of the page to access the Multiedit interface.
3. Under the header labeled “Full Width Hero,” you will see fields for adding overlaying text, adding the image and optional video embed.
4. To update the image, first click the file finder icon to the right of the “Hero Image” field.
5. After clicking the finder icon the file chooser pop-up window will open. Locate the image you wish to link by navigating to your sites images folder and locating a top hero image that has an “–xl” file extension.
6. Click ”Choose File.” 
7. Click “Save” and then publish your updated webpage.