Image Blocks

The new Caltech theme provides a wide variety of blocks to display images - with or without associated text and / or links. You should almost always use one of the blocks below to include images on your site. If you are using the 'image' or 'video' buttons inside the rich text editor, you are almost certainly doing it wrong.

The major advantage of using the provided image blocks is that your images will automatically be "responsive" which means they will look good on phones, tablets and regular web browsers.

The workhorse of our image blocks is the "Hero Image" It displays a single image, filling the entire page or column it is in. Hero images may be placed at the top level of an Interior Page or within any layout block.

The hero image may have an optional (and customizable) caption and photo credit, which appear over top of the image in a translucent box. For example, the image below is a hero image that has an associated caption and photo credit. 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 you want users to be able to see the image in a full width lightbox, check the "Show Zoom Control" checkbox. The lightbox will offer users the option to download the full resolution image.

Most blocks that allow you to display an image will also allow you to display video - or a mix of the two. For example almost all of the carousels will allow images and video. But sometimes you just want to embed a single video - so use the Video Block.

The video block allows you to embed videos hosted on YouTube and Vimeo. If your videos are hosted on some other platform, please email templates@caltech.edu to see if we are able to support your video platform of choice.

To embed videos from YouTube, go to the video on YouTube.com, click on the "Share" button and copy the url for embedding videos; the embed link for the video below is https://youtu.be/zxt9wGJp4_s. Embedding video from Vimeo is similar and their embed urls look like https://vimeo.com/24506038.

If you have a question regarding protecting your video, please visit the FAQ page on "How to password protect my videos?"

Image Card blocks place an image next to (or above) a text blurb. The image can be given a custom height, and the blurb can have a title, a body, and an optional set of links to various targets.

Image Card blocks can be placed at the top level of Interior Pages, and within the sidebars of Left Sidebar and Right Sidebar Layouts (including on News Pages), as well as the columns in a Two Column Layout.

The Promotions block allows you to create a number of image/title pairs that will be automatically laid out within the column where you place the block. You may also add an optional caption and optionally link the image to a page, document, or other url.

The Promotions block may be placed in the main content area of the Left Sidebar block, either column of a Two Column block, or at the top level of your home page or an interior page. As you see below, the images have a landscape aspect ratio and if placed inside a column, display two items per row and any orphaned items will be centered in the last row. When placed at the top level of the page, the block will have three images across when the browser window is wider than 1024 px.

Image Link Grid blocks display a customizable grid of images that are linked to local pages, local documents, or external URLs.

They can be placed at the top level of Interior Pages and Homepages, and within Tab blocks, Left Sidebar Layouts, and Two Column Layouts.