Tag Archives: images


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


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:

Paragraphs

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

This is an example of a right aligned paragraph.

Images

<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