Add Image - Flow Text in Drupal

Add Image - Flow Text in Drupal
Image-Flow Text allows content managers to add images that will occupy half the width of their pages at larger screen sizes (desktops, computers, some tablets), with text “flowing” on the other side. At smaller screen sizes (some tablets, smart phones), the image will appear above the associated text. 

This  paragraph type is available on the following options in Drupal:
  • Page
  • News 
  • Person Spotlights 
  • Expert Spotlights

On October 7, 2019 an update was released that allows content managers to select whether the image appears on the right or left side of the associated text. 

Why Use Image - Flow Text

This option is the preferred choice when adding images that are in portrait orientation (the longest side is vertical), or square. Such images would take up the full width of the page and occupy too much screen real estate if added using the basic Image paragraph type. 

However, images in landscape orientation (the longest side is horizontal) look great using this option, as well. 

How to Add Image - Flow Text

To add Image - Flow Text to new or existing Pages, News stories, or Spotlights, follow these steps:

  1. In the edit view, select “Add Image - Flow Text”

  1. Optional: Add a heading that will appear as an H2-size heading

  1. Choose an image file to upload
  1. Images can not exceed the 10 MB limit
  1. Images must be 320x240 pixels or larger
  1. Allowed image types: jpg, jpeg, png, gif

  1. Optional: Move the + cursor that appears over the image to the most important spot. This will set the focal point to define which area of the picture is displayed on various screen sizes

  1. Add alternative text, describing the image for screen readers

  • Remember: Good alternative text is meant to be short but descriptive. It is not meant to contain the same information as a caption. Imagine you’re providing a general description of the image to someone without sight. 

  1. Choose the Image Position to set whether the image appears to the left or right of associated text when viewed on larger screen sizes. 

  1. Optional: Add a caption and photo credit. 
  1. It’s recommended to put the photo credit within parentheses. For example: (Photo by Jessica Photographer)

  1. Add text to be displayed next to the image. Image - Flow Text looks best when there are at least two or three paragraphs associated with the chosen photo. 

  1. Scroll down to the bottom of the page and press Save.

Using Image Flow Text Effectively

Below is a wireframe model of how this design is intended to be used down a page. Note that using fewer images increases the visual impact of each image without cluttering the page. They should enhance and add context for the reader, not distract from the story itself.