Image Blocks

Overview

The Image Block layout is a navigational tool which allows you to create a grid of images with overlaid titles and captions underneath. These images may be linked to additional content. It will work with any number of picture/caption pairs.

Links

Each image may be linked, so think about where the user should end up after clicking on the image. If they’ll be going to other pages on this site, make sure those pages have been created so you’ll know their URLs for the next step.

Demo

Title One
This is the caption for the first image block.
Title Two
This is the caption for the second image block.
Title Three
This is the caption for the third image block.
Title Four
This is the caption for the fourth image block.

Preparing the Images

This format works best if you pre-size all of your images to the same height & width before uploading them to WordPress. The tinted black bar at the bottom won’t show up well over images with black backgrounds, so try to avoid those.

Recommended size:

  • 375 px wide
  • 200-250 px tall

 

Creating the Blocks

Each block consists of an image, a title overlay, and optionally a link and/or caption. You can set up a block in two ways:

  1. Using the Shortcode Builder interface in visual mode (recommended)
  2. Using the media library to set up media attachment & display options for an image

Select a tab below for the corresponding instructions.

  • To use the Shortcode Builder interface, you will need to have the Williams Shortcode Builder plugin activated, and be using the visual editor.

    To create an individual the shortcode, which represents a single picture-overlay-blurb unit:

    1. If you want a blurb below the image, write it and select the text in the editor. If you don't want a blurb, just place your cursor in the visual editor where you'd like the grid unit to appear.
    2. Click on the "Shortcodes" button, located in the 2nd row of your visual editor's toolbar (outlined in orange below). If you only see 1 row of tools, click on the kitchen sink (outlined in green below) to reveal the 2nd row.
    3. Hover over the "Format Content" menu to reveal its submenu, and select "Image Block Layout", outlined in red below.
      Shortcode Builder Image Block menu location
    4. Fill out the form in the dialog popup box. Hovering over the input boxes will reveal hints, helping you fill out the form. Clicking “OK” will insert the shortcode into the visual editor.sc-dialog-quad
      Select image: Required. Click on the empty box next to “Select Image” (red arrow above) to access your media library or upload a new image. See above for recommended images size.After selecting your image, click on the blue "Choose Image" button in the bottom right of the screen. This will close the window, and bring you back to the shortcode builder. The "Select Image" box should now contain the full URL of the image you just chose, as shown below.sc-dialog-quad2Click-through URL: Required. This needs to be a full URL, starting with http. When the user clicks on the image, this is where they will go.Title: Required. The text that will be placed on top of the image. Keep it short.Caption: Optional. The text that will be placed below the image. If you highlighted text before selecting the "Image Block Layout" tool, the selected text will appear as the value in the blurb box . For best results, all blurbs on the page should have a similar length.
    5. Rinse and repeat until you have as many blocks as you'll need for your grid.

    Editing the shortcode

    In the editor (in both visual and text modes), the shortcode will look something like this:
    [quad image="http://wordpress.williams.edu/files/2015/02/wp-banner.png" url="http://www.williams.edu" overlay="This text goes over the image"]This text goes below the image[/quad]

    You can edit the shortcode attributes (the values inside the quotes above) directly, or you can delete the shortcode, and create a new one using the shortcode builder tool again.

    1. While editing the page/post, place your cursor in the visual editor.
    2. Click the "Add Media" button.
    3. Select an image from the media library, or upload a new one from your computer. You'll need to enter the correct options in the "Attachment Details" sidebar of the media upload interface to make this page layout work.
    • Caption: the text you want underneath the picture, in regular text. To create a caption-less layout, cut and paste this text into each caption field: <span class="hidden">caption</span>
    • Alt text: the text you want to overlay the picture
    • Link to: select Custom URL, then in the box below it, enter a URL - this is where clicking on the image will take you
    • Size: select full size, since you've already cropped your image to be 375px wide.

    These settings will result in an Image Block that looks like the one below:4block-img-settings
    4block-unit

    Set the page style

    Note: this is not necessary in the Meerkat16 theme.

    1. Scroll down below the visual editor to find the "Page Options" section. "Add page style" is the last item in that list.
    2. Select "4 block" from the pulldown menu, as shown below. This will apply the CSS that formats the captions & images on the page. This only needs to be done once for the page, not for each block.
      add-page-style

     

Related Content