Steps for Incorporating Photography

Adding Photos to Your Website

Using great photography on your site is a excellent way to add visual interest to your webpages. While one or two carefully selected photos can enhance the presentation of your web content, overusing photography can distract your audience. It’s important to remember that less is more when adding photos. 

Photo Cropping for Design Snippets

Photos must be added to snippets in order to function properly within Modern Campus CMS, our content management system (CMS). Using snippets will ensure that your photos are sized appropriately on your website for desktop and mobile viewing. 

After selecting your website photography, you will need to choose the type of snippet you want to use to display your photos. Each snippet has an intended cropping size (or image code). There a lot of variations, for example, some snippets use rectangular images (image code “m”), others use square images (image code “sq”) and still others were intended to be used within a paragraph of text (image code “ic”).

You will need to note the image code of each photo when filling out a project request form so that Creative Services knows what size to crop your photos. Be sure to review what you need to do to get your photos cropped for your chosen snippet.

Finding Your Photos in the CMS

After your photos have been cropped and added to the CMS, you will need to locate them. Photos are typically added to a folder within the root level of your website section. For example, if you are a web editor for the music department your photos would be within the image folder for the College of Fine Arts and Communication. You can then search the images folder by file name using the filter tool.

Two other areas where you’ll find photos are the images folder off of the main directory and the headshots folder within that main images folder. The main image directory contains iconic images of the Towson University campus that are open to all web editors; the headshots folder contains portrait images for faculty profiles and staff listing pages.

Adding Images into a Design Snippet

This example shows how to add a hero image to the top of your web page. After adding the design snippet “Image Block Hero w/Caption,” you are ready to add an image.

1. Within the snippet, right click on the image in the “Image” row, select “Insert/Edit Image,” and click the finder icon (magnifying glass) in the “Source” field.

2. Change the server from “Staging” to “Production” and navigate to your image folder to  select an image, then click “Insert.”

3. After you have selected the image, you will need to add an image description for accessibility purposes.

4. Click “OK” to add your image to the page.

Resizing In-Content (ic) Images

The design snippets “Image Block Left (w/Caption)” and “Image Block Right (w/Caption)” have a special cropping requirement. Images cropped for these components are cropped as in-content (or “ic”) because they are meant to be used in the main content region with the option to have text flow around the image. Depending on the orientation, images cropped as “ic” might be cropped as a square, horizontal or vertical image. 

Depending on the shape and use of these images — and how text flows around the image — you may need to resize the image within the snippet. Instructions for how to resize these images are below:

1. After adding the design component and your image, right click on the image and select “Insert/Edit Image.” The “Insert/Edit Image” pop-up box will appear.

2. Reduce the first dimension size in the “Dimensions” field and then hit the tab (the second dimension will resize automatically). Click “OK.”