Types of Image Galleries

You can create image galleries for any of your web pages.  Creating an image gallery involves two steps:

  1. Create the image gallery as an asset within OU campus
    1. upload and resize images
    2. add captions, titles or hyperlinks to the images
  2. Choose the Gallery Type: how you want the images to be displayed on the page (rotating, with captions, clickable, etc)

---------------------------------------- Video Tutorials --------------------------------------

video creating an image gallery
Adding an Image Gallery to Your Page

We currently have 15 different "Gallery Types" or display formats for any given image gallery.  The links below will show you what the image galleries look like and provide the specific information you need to create the particular gallery type for your page.  Click the following links for details and screenshots of each gallery type.

Galleries for 1 Column Pages only

Galleries that will fit in 2 Column Pages

All Galleries:

Fancy Box | Rotating Gallery (Small) | Rotating Gallery (Medium) | Gallery with Thumbs (Bottom) | Gallery with Thumbs (Left)

Large Slider - Auto (Bottom Captions) | Large Slider - Auto (no Captions) | Large Slider - Auto, Curved (no Captions)

Large Slider - Auto (Side Captions) | Medium Slider - Manual (Side Captions + Descriptions)

Boxee Slider - Manual (Captions+Descriptions) | Apple Style Gallery with Thumbs (Bottom) |

3-D Carousel - Manual (Captions + Descriptions) | Smooth Scroller - Auto (No captions) |

**Billboard Slider - Auto (Captions) | **Shadow Box

  ** Not implemented yet

Gallery Type:  Fancy Box (see a sample page using this gallery)

fancy box fancy box

Description: Thumbnails of all images will be displayed in rows on the page and when the user clicks the image, it will open up in a modal or framed window in front of the current page content

Specs:  Thumbnails can be any size, full sized Images will be automatically resized.

  • Asset Title: Optional, will be displayed if used
  • Asset Description: Add, used for screen readers and will be displayed if used
  • Asset Caption: Optional, will be displayed if used

 

Gallery Type: Rotating Gallery (Small) (see a sample page using this gallery)

Description: Images will rotate automatically.  Images are display only and can not be hyperlinked. Sized to fit in the right column of a page, or can be used in the center column with text wrapping around it. 

rotate small

Specs:  Images should be sized to 235px X 235px

  • Asset Title: Must add, not displayed but used for screen readers
  • Asset Description: not used or displayed
  • Asset Caption: not used or displayed
 

Gallery Type: Rotating Gallery (Medium) (see a sample page using this gallery)

Description: Images will rotate automatically and can be hyperlinked.  Sized to fit in the center column of a 2 column page, or can be used in the center column of a 1 column page with text wrapping around it. 

rotate medium

Specs:  Images should be sized to 525px X 325px.  Add hyperlinks (if applicable) to the "title" field in the asset to create clickable images.  "Caption" field and "description" field will display on the top of each image.

  • Asset Title: Value must be hyperlink (http://www.somedomain.com) or left blank
  • Asset Description: Must add, displayed under caption and for screen readers
  • Asset Caption: Must add, will display over image

Gallery Type: Gallery with Thumbs (bottom)  (see a sample page using this gallery)

Description: Images can be advanced manually, or user can start/stop automatic scroll.  Sized to fit on ONE column pages only. 

thumbs bottom

Specs:  Image widths should be sized to no wider than 800 px. The height of the image will be automatically sized. 

  • Asset Title: Must add, not displayed but used for screen readers
  • Asset Description: Must add, not displayed but used for screen readers
  • Asset Caption: Not used
 

Gallery Type:  Gallery with Thumbs (left) (see a sample page using this gallery)

Description: Thumbnails are arranged in 3 columns and 5 rows (per thumbnail segment) to the left and the full size image displays to the right of the thumbnails.  The gallery can be "played" or moved previous and next using controls above the full size image.  Clicking a thumbnail will also display the full size image.

Sized to fill full width of  ONE column page only.  Great to display a large group of images from an event or related to a specific topic.

thumbs left

Specs:  Thumbnails should be sized to 75x75 and Images should be sized to 475 px (wide) x Any height <= 510px

  • Asset Title: Must add, displayed under image and for screen readers
  • Asset Description: Must add, displayed under image
  • Asset Caption: Not used

.

Gallery Type: Large Slider - Auto (bottom captions)  (see a sample page using this gallery)

Description: Images will rotate automatically and can be clickable.  Sized to fill full width of ONE column pages only.  Great to use on the homepage of a site.

large slider, bottom captions

Specs:  Images should be sized to 745px X 300px.  Add hyperlinks (if applicable) to the "title" field in the asset to create clickable images.  "Description" field will display on the bottom of each image. Max number of slides: 11.

  • Asset Title: Value must be hyperlink (http://www.somedomain.com) or left blank
  • Asset Description: Must add, displayed under caption and for screen readers
  • Asset Caption: Not used

 

Gallery Type: Large Slider - Auto (no Captions) (see a sample page using this gallery)

Description: Images will rotate automatically, and can be hyperlinked. Sized to fill full width of ONE column pages only.  Great to use on the homepage of a site.

large slider no captions

Specs:  Images should be sized to 745px X 275px.  Add hyperlink (if applicable) to "title" field in the asset to create clickable images, "description" is not visible but used for screen readers

  • Asset Title: Value must be hyperlink (http://www.somedomain.com) or left blank
  • Asset Description: Must add, not displayed for screen readers
  • Asset Caption:  not used

 

Gallery Type: Large Slider - Auto, Curved (no Captions) (see a sample page using this gallery)

Description: Images will rotate automatically, and cannot be hyperlinked. Sized to fill full width of ONE column pages only.  Great to use on the homepage of a site.

large slider, curved

Specs:  Images should be sized to 745px X 325px.  Add "title" field in the asset, which is not visible but used for screen readers

  • Asset Title: Must add, displayed under image and for screen readers
  • Asset Description: Not used
  • Asset Caption: Not used.

Gallery Type: Large Slider - Auto, (Side Captions) (see a sample page using this gallery)

Description: This slider will hold a maximum of 10 images.   Images will rotate automatically but the entire slideshow can be paused. Each image MUST have an associated hyperlink. Sized to fill full width of ONE column pages only.  Great to use for news related items on any page of a site.

large slider, side captions

Specs:  Images should be sized to 470px X 340px.  Add a URL for the image in the "title" field in the asset, this will also be used for the "read more" link under the description.  Add a caption for the image and a description.  The caption and description will appear to the right of the image

  • Asset Title: Value must be hyperlink (http://www.somedomain.com) or left blank
  • Asset Description: Must add, displayed to right of image under caption
  • Asset Caption: Must add, will display to right of image and for screen readers

.

Gallery Type: Medium Slider - Manual (Side Captions + Descriptions) (see a sample page using this gallery)

Description: Images are advanced manually. Images can be hyperlinked.  Sized to fit in the center column of a 2 column page, or can be used in the center column of a 1 column page with text wrapping around it.  Captions and descriptions should be added for each image.

medium slider side captions

Specs:  Images should be sized to 170px wide x175px high. Add a URL for the image in the "title" field in the asset.  Captions and descriptions will display to the right of the image.  Descriptions cannot have html markup.

  • Asset Title: Value must be hyperlink (http://www.somedomain.com) or left blank
  • Asset Description: Must add, displayed to right of image under caption
  • Asset Caption: Must add, will display to right of image and for screen readers

 

Gallery Type: Boxee Slider - Manual (Captions + Descriptions) (see a sample page using this gallery)

Description: Images are advanced manually. Images can be hyperlinked.  Sized to fit in the center column of a 2 column page, or can be used in the center column of a 1 column page with text wrapping around it.

boxee slider

Specs:  Images should be sized to 500px wide. Add a URL for the image in the "title" field in the asset.  Captions and descriptions will display below the image.  Descriptions cannot have html markup

  • Asset Title: Value must be hyperlink (http://www.somedomain.com) or left blank
  • Asset Description: Must add, displayed under caption
  • Asset Caption: Must add, will display under image and for screen readers.

Gallery Type: Apple Style Gallery with Thumbs (bottom) (see a sample page using this gallery)

Description: Images will rotate automatically.  Sized to fill full width of ONE column pages only.  Great to use on the homepage of a site. 

apple thumbnail gallery

Specs:  Images should be sized exactly to 745px (wide) X 350px (high), Thumbnails should be sized to 30px X 30px.  This gallery can hold up to 10 images.

  • Asset Title: Must add, displayed under image and for screen readers
  • Asset Description: Not used
  • Asset Caption: Not used

Gallery Type: 3-D Carousel - Manual (Captions + Descriptions)  (see a sample page using this gallery)

Description: Thumbnails are setup in a carousel, which can be rotated manually.  This gallery will look best with 4-10 images. Clicking a thumbnail will enlarge the image in a lightbox.  Hovering over the image will display the title and description.  Sized to fit in the center column of a 2 column page, or can be used in the center column of a 1 column page with text wrapping around it.  Images cannot be hyperlinked.

3-D Gallery

Specs:  Full size images can vary in size, but each image should be less than or equal to 600px wide and less than or equal to 500px high.  Set thumbnails in the asset to whatever size is desired.  Enter title and description.

  • Asset Title: Must add, displayed over image and for screen readers
  • Asset Description: Must add, displayed over image and for screen readers
  • Asset Caption: Must add, displayed below the image when user clicks an image to open it in a lightbox.

Gallery Type: Smooth Scroller - Auto (no Captions) (see a sample page using this gallery)

Description: Images will sit side by side and slide across the page automatically.  Images cannot be hyperlinked. Sized to fill full width of ONE column pages only.  Great to use on the homepage of a site.

smooth scroller

Specs:  Images should be sized to 350px X 275px.  Add "title" field in the asset, which is not visible but used for screen readers.  Caption and description not used.

  • Asset Title: Must add, not displayed but used for screen readers
  • Asset Description: Not used
  • Asset Caption: Not used

Gallery Type: Billboard Slider - Auto (Captions)

Description: Not implemented yet

Specs: 

  • Asset Title:
  • Asset Description:
  • Asset Caption:

Gallery Type: Shadow Box

Description: Not implemented yet

Specs: 

  • Asset Title:
  • Asset Description:
  • Asset Caption: