Skip to: Main Content Search Main Navigation Audience Navigation

Using Image Grid Elements

An image grid consists of a set of images that are grouped together on a page, either horizontally or vertically. An image grid is typically used as a navigational tool, so that each image is linked (to a specific place on the current page, to another page, to send E-mail, etc.). Because the image grid is a single element, you can copy and paste the whole collection of linked images in one step to save time. You might do this, for example, if you want to have those navigational choices at both the top and bottom of your page. Using an image grid instead of a table of individual images will improve system performance going into "Author" or "Edit" mode by reducing the number of CommonSpot tool icon menus that have to be constructed.

  1. Login, navigate to the page where you want to define the pop-up menu, and choose "Work on this Page" or "Work on this Page (All Changes).

  2. Select "Click to insert new element".

  3. Click to expand "Image Elements"; inspect the available options. 

  4. Click on "Image Grid".

  5. Click on "Click here to define the Image Grid element."

  6. In the resulting dialog box, click on "Add Image".

  7. Start the process of picking the image by clicking on the "Choose..." button or the "New..." button.

  8. Choose the image.

  9. In the "Image Properties" dialog box, type some appropriate text into the box, "Alternate Image Text (Flyover Text)". You can also control the white space around the image, although some browsers may not obey those commands. If you encounter that problem, please contact OIT by e-mail to or calling 3-1222 on campus.

  10. Click on the pencil tool button for the image; choose "Edit Item" from the menu; and then click on the "Edit" button near the bottom of the image properties dialog to set up the link appropriately (that will end with clicking on the "Save" button for the link-building process).

  11. Click on the "Save" button for the Image Properties lightbox.

  12. Go back to step 6 if you want to add more images to the grid. If you have made changes to one or more of the images in the grid, you will see yellow work-in-progress tools to submit individual images' changes for publication. When you have done any of those that you want to do, click on the "Save" button for the "Specify Image Grid Items" lightbox.

  13. If there are any unpublished changes to the grid, you will see the usual yellow work-in-progress tool to submit them all at once for that element.
  14. Once you have one or more images in the grid, then you can jump to step 6, above, in order to add more images, by clicking on the gear wheel and choosing "Images."

  15. Choose "Layout Properties" from the Image Grid's "Element Properties" menu in order to select vertical or horizontal alignment.