DRAFT
Caltech Logo
Caltech Sites
Caltech Sites  /  Block Gallery  /  Image Carousel Blocks

Image Carousel Blocks

If you have a number of really great images, a nice way to show them off is to use an image carousel. The new Caltech theme offers a variety of carousels - some that display lists of thumbnails and some without. In nearly all cases you can mix images and videos in your carousel.

Default Behaviors

By default the images will show any caption or photo credit information that has been added to the image record; depending on the carousel type the caption will be below the main image or it may appear as white text in a black overlay gradient.

If you do not like the caption or photo credit that is attached to the image record, you may override this information by entering a new caption or photo credit in the form. If you do not want the caption/credit overlay to appear at all, check the "Do not show caption or credit" checkbox.

If the carousel you choose automatically changes the image (ImageCarousel, X, Y), you may control how quickly the images change using the "Cycle timeout" setting. Setting this to 0 will disable the auto-advance feature.

All of the carousels listed below have a "random" option that allow you to display the chosen items in random order. In all carousels except for the Person Spotlight Carousel, the items are chosen and then randomized. For the Person Spotlight Carousel, spotlights are chosen randomly from all spotlights matching your selection criteria. This was done so that all spotlights have an equal chance of being selected; otherwise spotlights created early would eventually cease to show up in carousels.

Available Image/Video Carousels

Block Name Image Source Thumbnails Caption Auto Advance
Centered Image Carousel Chosen by user No Below image No
Image with Side Thumbs Chosen by user On right Overlays image No
Bottom Thumbs Media Carousel Chosen by user Below Overlays image No
Image Carousel Chosen by user No Below image Yes
News Carousel Automatic - from new stories No Overlays Image Yes
Small News Carousel Automatic - from new stories No Next to image Yes
Person Spotlight Carousel Automatic - from spotlights No Next to image No

There are also large and small image carousels available in the Header blocks, as seen on the header block page.

Centered Image Carousel blocks display one image in the center, with controls on the sides to scroll to other images in the carousel.

TheCentered Image Carousel can be placed at the top level of any Interior Page, News Page, or Homepage. The location of the center image will automatically configure itself to line up with any Left Sidebar Layout block that might be a sibling within the body of the page.

The 4-inch thick, 10-inch diameter mirrors at the ends of the beam tubes recycle the laser light. The polished mirrors are coated with up to 35 layers of a purple dielectric coating designed to achieve the reflectance and transmission of light for the wavelengths used by LIGO.
Credit: LIGO
graphic: Black Holes of Known Mass Chart
LIGO has discovered a new population of black holes (blue) with masses that are larger than what had been seen before with X-ray studies alone (purple). The three confirmed detections by LIGO (GW150914, GW151226, GW170104), and one lower-confidence detection (LVT151012), point to a population of stellar-mass binary black holes that, once merged, are larger than 20 solar masses—larger than what was known before.
Credit: LIGO/Caltech/Sonoma State (Aurore Simonnet)
No, its not the Trans-Alaska Pipeline, but two-and-a-half miles of stainless steel tubing, protected by concrete arches, reaching across a desert in the Pacific Northwest. Inside, a laser beam, bouncing between mirrors on either end (and in the adjoining arm) will try to pick up an almost imperceptible signal, when the Laser Interferometer Gravitational-Wave Observatory turns on in the year 2002.
Credit: Benjamin Benschneider/The Seattle Times
Previous
Next

Image with Side Thumbnails

Image with Side Thumbnails blocks display a large image and a scrollable list of thumbnails to the right, allowing the user to click one to view it in full size. Captions (if any) will appear as overlays on the main image in the carousel.

Image with Side Thumbnails blocks can be placed at the top level of any Interior Page, News Page, or Homepage.

Shou-ou Shan
Shou-ou Shan
Credit: Caltech
Miller - MacDonald - Cormier Trio
photo of Jayme Stone and Folklife
Jayme Stone and Folklife
Credit: Alexandra DeFurio
Shou-ou Shan
Miller - MacDonald - Cormier Trio
photo of Jayme Stone and Folklife

Bottom Thumbnails Media Carousel features a large image (or video) above and a carousel of thumbnails below. When you click on one of the thumbnails, the full sized version of that image appears in the main image section.

Bottom Thumbnails Media Carousels can be placed in Centered One Column Layouts, as well as the main content column in either the Left or Right Sidebar Layouts.

Shou-ou Shan
Shou-ou Shan
Credit: Caltech
Lighsail
An artist's depiction of the Starshot Lightsail.
Credit: Breakthrough Starshot
Teddy Mekonnen
Jade Livingston
Shou-ou Shan
Lighsail
Teddy Mekonnen
Jade Livingston
Previous
Next

Image Carousel blocks can display one or more images with an optional title, caption, and link from the title to another page or site. In addition, custom links can be added to the caption of individual images. This block does not show thumbnails of the other images but does automatically cycle through the images at a rate determined by the "cycle timeout" setting.

Image Carousels can be placed in Interior Pages, News Pages, and Home Pages at the top level, and within either column of a Two Column Layout block.

Automatically Generated Carousels

In addition to carousels created by placing individual images in the carousel, we also have carousels that are automatically built from a set of configuration options. Specifically we have a carousel of people spotlights and large and small versions of our news carousel.

News Carousels

Before placing a news carousel on a page, you need to select a group of news articles you will want to display together. The steps for this are:

  1. Create a display location
  2. Map news articles to that display location (see below)
  3. Place a News Carousel or Small News Carousel block on a page, choosing the display location you used in step 2
News Management Dashboard
Mapping news articles to display locations on your own site

The full sized news carousels can be placed on the top-level of your Home Page or any Interior Page.

News Carousel Block

The small news carousel has images on the left and a blue box on the right. The blue box will display the title and summary for the news article. You may also choose to add links in that box; note the links are always the same no matter which news article is showing.

A small news carousel block can be placed on the top-level of your Home Page or any Interior Page.

Small News Carousel Block

Person Spotlight

Before you can place a Person Spotlight block on your page, you must first create the spotlights. To do this, you must first create a Person Spotlight Listing page on your site. This page does not have to be shown in your menu but it must exist and must be published.

Once you have created the listing page, a new menu item named "People" will appear in the admin menu. This has two items, "Spotlight Types" and "All Spotlights". On www.caltech.edu and the division sites, the spotlights are categorized (Faculty, Students, Alumni); if you want to similarly categorize your spotlights, create a handful of "Spotlight Types".

To create a new spotlight, go to People -> All Spotlights and then choose "Add Child Page".

Once you have created a handful of spotlights, you may place a Person Spotlight Carousel block on the top level of your Home Page or any Interior Page.

Person Spotlight