Media Blocks

This platform includes several customized media blocks to let site editors display content in a visually appealing way.

System ref: Media blocks


Overview

This platform includes several custom blocks, that allow you to easily present content in a well-designed layout. These blocks include a variety of multimedia, including images, videos, buttons, quotations, and API feeds from the GSD website. These blocks, in combination with global settings and layout blocks, provide site editors with the ability to create a customized site that has a unique look and feel.

Image Blocks

There are several blocks that allow you to present images in interesting and functional ways. These include:

  • Hero Banner: Provides to hero banner options for your page.
  • Image with Caption: Includes an image and accompanying text, along with an optional button.
  • Media & Text: Includes an image and accompanying text.
  • Gallery: An image gallery that allows for numerous images in a grid layout.
  • Overlay Image: Introduces dynamic overlays when a user hovers over an image.
  • GSD Image Collage: Creates a stacked effect with two images.

Integration with GSD API

Several of the custom blocks integrate with the GSD website’s API. This allows site editors to automatically pull in content from the GSD’s site. These blocks include:

Other Blocks

Additional blocks include:

  • Video Block: Embeds a YouTube or Vimeo video directly into your page.
  • Recent Posts Block: Provides a link and preview for news stories that are published on your site.
  • 1.13 Caption No Image: Offers a structured layout for a content area without an image.

Tips for Using Media Blocks

  • Think about your content first. If you have a lot of multimedia files available to you, consider how they can work together to present your content in a logical manner. If, however, you do not have many images and videos, then make a bold statement with what you have. A single image, when used well, can bring life to a page.
  • Consider sizing. If you are using more than one of these blocks on a page, think about how they will all look next to each other. Size your images consistently for a clean layout. Consider using columns when you want to limit the width of a block, or when you want to line up media blocks next to each other.
  • When in doubt, wireframe first. Roughly sketch out the layout you want on a piece of paper, then try to recreate it using the blocks.
  • Experiment with different global settings and layout blocks until you find the combination that works for you.