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:
In the edit view, select“Add Image - Flow Text”
Optional: Add a heading that will appear as an H2-size heading
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
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
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.
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
Optional: Add a caption and photo credit.
It’s recommended to put the photo credit within parentheses. For example:(Photo by Jessica Photographer)
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.
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.
Why Use Image - Flow Text
How to Add Image - Flow Text
Using Image Flow Text Effectively