Generic Block: Image List

Break up your sections with great images and a robust layout.

Laid out in lines of an image paired with text, a Generic Block: Image List component is great for visually breaking up content or illustrating each section with a related image.

Use them for things like:

  • student interns and their bios
  • ongoing programs
  • topics of interest

You can use calls to action to highlight and connect users with the next thing they’ll need.

Generic Block: Image List can be added standard or full width.

The list defaults to one image block, but you can add additional blocks by clicking Add Generic Block at the end of the list.

Generic Block: Image List Options

Display mode with style 1 default

Select a display mode from the drop-down list. This applies to all blocks in the component.

You can display your image blocks one of two ways:

  • “Style 1 (Yellow CTAs, No Borders)” displays the calls-to-action as yellow buttons.
  • “Style 2 (Red Borders)” displays the calls-to-action as text with a small arrow and places a red border at the top of each block.

You cannot mix and match these within the same Generic Block: Image List, although you could add a second list with a different style on the same page.

Background color field dropdown list

Background Color defaults to “Light (white).”

Select “Dark (gray)” to add a slight gray tint behind the entire component.

This applies to all blocks in the list.

Section header field which is not required

Enter an optional header that will appear above the first image block. It is a heading 2.

plain text box labeled Intro

Provide more context by entering it in Intro. It will appear below any section header but above the image blocks.

text field labeled eyebrow

The eyebrow appears at the top of the text of an image block in a distinct font, different from most styles on the page.

Title text field

Enter a title. It will appear under the eyebrow and above the body of the image block as a heading 3. Use Title URL if you want to link the title to another page.

title link url look up field

If you want the title to be an active link, enter a URL. This is a look-up field.

  • To link to a node on our site, begin typing its title and select it from the drop-down list that appears.
  • To link to anything else, add the full URL, including https://.

Note: Titles that are linked are styled differently from those that aren't. If you are using the title field in multiple columns, we recommend being consistent in their use — make all titles links or none — so it doesn't look like an error.

You can also add links in the Body, or as a call-to-action (CTA) link at the bottom of the column.

Body field

The body field is a limited WYSIWYG editor.

You can style text with:

  • headings (start with a “Heading 4” if you used Title, and a “Heading 3” if you didn't.)
  • bolding and italics
  • lists

You can also add links and special characters, as well as mark up text in non-English languages..

Image position dropdown defaulting to left

Select either right or left. The image will appear on that half of the page, with the content you added in the Body on the other half of the page.

Add Image button and text that says you can add one media item

Technically, images aren't required. However, this component is specifically designed for them, so add them.

Add an image that is at least 800x800 pixels.

Click Add Image to open an Add Image dialog box. Images will normally display as a square unless the content in Body is extensive.

Once you add an image, two buttons will appear:

  • Click Edit to update the image or change the alt text.
  • Click Remove to completely remove it.

See Images for detailed instructions.

video text field

Enter the URL for an unlisted or public YouTube video.

You must also add an image in the Image field.

The image will display as normal, but with a play button superimposed on it. When a user clicks on the button, the video will open.

Example with Optional Section Header, Style 1

This is what the intro for the list looks like. This image list includes examples with and without eyebrows, titles, titles with links, and CTA links.

  • Student listens with hand on chin

    Diverse Perspectives [eyebrow]

    Hearts and minds wide open. [linked title]

    Our community is built on awareness and respect. So you’re encouraged to explore issues of purpose, ethics, and social responsibility both here on campus and beyond. To have tough conversations with your peers and discover the power in embracing socioeconomic, cultural, and intellectual differences. This not only creates a welcoming environment for all students, but it provides an essential part of your education and influences how your curriculum takes shape. For more information about campus policies and resources for students, please visit the Office of Diversity and Inclusion or International Student Affairs.

    [body]

  • child points at painting in gallery

    Go forth from Grinnell. And take your education further. [unlinked title]

    Grinnell College has a rich tradition of preparing its students for graduate study in a wide range of disciplines and degree programs. Inquiry-based learning, individualized advising, and the rigorous curriculum provide students with an exceptional academic foundation on which to build in graduate or professional school. Among Grinnell alumni, 51 percent hold an advanced degree within 10 years of graduation.

    [body]

     

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Praeteritis, inquit, gaudeo. Sint modo partes vitae beatae. Sed potestne rerum maior esse dissensio? Quae hic rei publicae vulnera inponebat, eadem ille sanabat. An hoc usque quaque, aliter in vita? Quod ea non occurrentia fingunt, vincunt Aristonem;

    Duo Reges: constructio interrete. Nec vero intermittunt aut admirationem earum rerum, quae sunt ab antiquis repertae, aut investigationem novarum. Bork Quo modo autem philosophus loquitur? Facile est hoc cernere in primis puerorum aetatulis. Ne tum quidem te respicies et cogitabis sibi quemque natum esse et suis voluptatibus?

    Videamus igitur sententias eorum, tum ad verba redeamus. Sin tantum modo ad indicia veteris memoriae cognoscenda, curiosorum. Ratio enim nostra consentit, pugnat oratio. Quod quidem nobis non saepe contingit. Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Quae diligentissime contra Aristonem dicuntur a Chryippo. Neminem videbis ita laudatum, ut artifex callidus comparandarum voluptatum diceretur. Falli igitur possumus.

  • Eliza Willis, Professor of Political Science

    Video Instead of Image

    This block shows the use of a video instead of an image.

Display Mode Style 2 and Background Color Gray

This image list has style 2 with a gray background selected.

  • Elisa Carrasco Lanusse

    Lorem Ipsum [Eyebrow]

    Dolor Sit Amet [Title]

    This block has a linked title.

     

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Praeteritis, inquit, gaudeo.

    Sint modo partes vitae beatae. Sed potestne rerum maior esse dissensio? Quae hic rei publicae vulnera inponebat, eadem ille sanabat. An hoc usque quaque, aliter in vita? Quod ea non occurrentia fingunt, vincunt Aristonem;

    Duo Reges: constructio interrete. Nec vero intermittunt aut admirationem earum rerum, quae sunt ab antiquis repertae, aut investigationem novarum. Bork Quo modo autem philosophus loquitur?

    Facile est hoc cernere in primis puerorum aetatulis. Ne tum quidem te respicies et cogitabis sibi quemque natum esse et suis voluptatibus?

    Videamus igitur sententias eorum, tum ad verba redeamus. Sin tantum modo ad indicia veteris memoriae cognoscenda, curiosorum. Ratio enim nostra consentit, pugnat oratio.

    Quod quidem nobis non saepe contingit. Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Quae diligentissime contra Aristonem dicuntur a Chryippo.

    Neminem videbis ita laudatum, ut artifex callidus comparandarum voluptatum diceretur. Falli igitur possumus.

  • Fitsum Getahun

    Image List

    Second block of Second List

    this one shows an un-linked title and no CTA.

We use cookies to enable essential services and functionality on our site, enhance your user experience, provide better service through personalized content, collect data on how visitors interact with our site, and enable advertising services.

To accept the use of cookies and continue on to the site, click "I Agree." For more information about our use of cookies and how to opt out, please refer to our website privacy policy.