Category Archives: Images

Writing Good ALT Tags

ALT tags (also known as Image Descriptions) are a very important feature involving all images on any given website. Moz does a good job of explaining what ALT tags are. Please take a moment to read up on what ALT tags are and why they are important. Moz also provides some tips for how to write good ones.

There are many uses for ALT tags. The most well-known ones are:

  1. Screen readers will speak the ALT tag of an image for users who cannot see
  2. If an image cannot be loaded due to some sort of network or IT error, the ALT tag will display instead
  3. ALT tags boost search engine rankings and can help your website’s images display in Google search results

Continue reading

Images with Pop-up Gallery

In the top navigation CMS template you can display images on a page, with or without captions, that pop-up into a gallery of images that the user can click through. Creating these galleries involves some code editing.

  1. Create your images using the Image Editor in the CMS. You will need to create the size that you will display on the page and either a 765 Banner, 1024 Feature, or 1600 Feature for the pop-up.
  2. Insert the images inline on your page or highlight using the screen shot of the inline image icon icon.
  3. Select each image and link it to the 765 Banner, 2014 Feature, or 1600 Feature size of itself using the CMS link icon (screen shot of the inline link icon).
  4. Access the code using the Source Code button (<>).

Continue reading

Image Captions

In the top navigation CMS template you can add captions to images displayed inline on a page. Creating these captions involves some code editing.

  1. Create your image using the Image Editor in the CMS. Note: This feature will add a gray box around the image and caption that will extend the entire available width. Be sure to use the appropriate size image for the space the picture and caption will be using. Refer to the Suggested Use of Image Sizes to determine the appropriate size to crop.
  2. Insert the images inline on your page or highlight using the screen shot of the inline image icon icon.
  3. Access the code using the Source Code button (<>).
  4. If your image is linked, look for the link tag (<a …>), otherwise find the image tag (<img … />).
  5. Continue reading

Enhanced Image Sizes in Preparation for New Templates

As a part of the new CMS template upgrade, the image editor sizes have been enhanced—some sizes added, existing sizes made larger, and some sizes phased out. These changes can be seen in different size options in the image editor, different slot names, and different template names.

Existing images will continue to work. The new sizes will provide greater flexibility and quality and the new names will be more intuitive and consistent across the system. Although vertical images are difficult to use on the web, any ‘horizontal’ image can be cropped vertically if needed.

Continue reading

Deleting or Removing Content and/or Links

The time may come to remove or delete content or links from your website. This can be done quickly and easily once you understand what scenario you are facing:

Continue reading

Using the Image Editor

The image editor is a powerful tool within the CMS. We use it to create and edit images of specific sizes.  Please scroll to the bottom of this post to see common Image Editor errors. Here is a listing of the available Image Editor images with their corresponding sizes and suggested uses:

Image Type Name Dimensions Suggested Use
170 Square 170 x 170 •In content, supplements short paragraphs, to add visuals
•Can be used in the Personnel Image slot within Profile items (be sure to crop the 250 square also) or within content
250 Square 250 x 250 •Supplements longer paragraphs, to add visuals•Can be used in the Personnel Image slot within Profile items (be sure to crop the 170 square also) or within content
Personnel Image 170 x 230 •Faculty and staff listing photos
•Can be used in the Personnel Image slot
350 Sidebar 350 x Variable(175px height recommended) •Images that fit in the right sidebar
•Can be used in a highlight in the Right Sidebar Slot – Boxed or Right Sidebar Slot – No box or within content in a 3- or 4- column layout
515 Sub-Banner 515 x Variable(250px height recommended) •Images that fit between the left navigation and right sidebar
Image Callouts
•Can be used in the Sub-Banner slot or within content in a 2-column layout
765 Banner 765 x Variable(300px height recommended) •Images at the top of a page that are the full page next to the left navigation or right sidebar
•Can be used in the Banner Image slot
1024 Feature 1024 x Variable(375px height recommended) •Homepage mediazone images, banner images that take the full content width
•Can be used in the Featured Images slot or a Mediazone item
1600 Feature 1600 x Variable(520px height recommended) •Homepage mediazone images
•Can be used in the Featured Images slot or a Mediazone item

Continue reading

Aligning Items

You can align paragraphs, divs, tables, images and other elements using CSS classes. Alignment options include left align, center align, and right align. You may align items using the following classes in ePhox code view:


<p class="right">Right aligned paragraph.</p>

This is an example of a right aligned paragraph.


<img src="test.jpg" class="center" />

Centered Image
Centered Image

Continue reading

Add/Update Banner Images

Your department’s website is most likely filled with photo banners to liven up its look and feel. Photo banners appear at the top of webpages and include a border around them. We generally make sure each level 1 webpage (main left navigation links) has a full banner. Level 2 webpages (sub-navigation to main left navigation links) may use banners or sub-banners depending on content and preferences. The use of banners and sub-banners varies by department and website section.

Banners come in two sizes: full banners and sub-banners. Full banners span the width of the entire content area of a webpage and go above the right sidebar (if one exists) while sub-banners appear to the left of the right sidebar in the content area. Banners should be no more than 130 pixels tall, so the image does not move your webpage’s content too low on the screen for your users to instantly read.
Continue reading

Staff Directory (Personnel Items)

Updating your staff directory can involve a number of steps. We’ll walk you through the steps involved for a Personnel Item in your faculty/staff directory.

1. Create new
2. Update existing
3. Remove from website

There are a few steps involved in creating a new Personnel Item. You must:

1. Create an Image Editor content item for your staff photo,
2. Create a Personnel Item with contact information, and
3. Slot the Personnel Item into its appropriate Grouped Item, so it will show up on your directory web page (not necessary for alphabetized listings).

Continue reading