Image Blocks

The standardized Caltech theme provides a wide variety of blocks to display images - with or without associated text and 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"; they will look good on phones, tablets, and regular web browsers with no additional effort on your part.

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. An example of a hero image that has an associated caption and photo credit is below. 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 to be interleaved. But when you just want to embed a single video, 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 can accomodate you.

To embed videos from YouTube, go to the video on YouTube.com, click on the "Share" button and copy the url that you're given. For example: 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 display 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 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. If they are placed inside a column, they display two items per row, and any orphaned item 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.