How to Use Image - Flow Text

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. 
 
An example of Image - Flow Text with the Image Position set to “Left”
 
 
An example of Image - Flow Text with the Image Position set to “Right”
 

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” from the dropdown menu of content options.

  • The default option may be "Add Text" or "Add Intro"

A screenshot of the menu interface

2. Optional: Add a heading that will appear as an H2-size heading at the top of your new paragraph.

3. Choose an image file to upload

  • Images can not exceed the 10 MB limit
  • Images must be 320x240 pixels or larger
  • Allowed image types: jpg, jpeg, png, gif

4. 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.

5. 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. 

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

  • Image Position is required
  •  

7. Optional: Add a caption and photo credit.

  • It’s recommended to put the photo credit within parentheses. For example: (Photo by Jessica Photographer)

8. 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. 

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

Print Article