Image with Text

To add a block of copy with an accompanying image to your page, you will select “Add Image with Text” in the components tab toward the bottom of the page.

Screenshot showing image with text component options in Drupal

When you are ready to add your image and text, your options will include:

  • Adding a new image (new media), or an existing image (existing media)
  • Adding the image to the left of the copy or adding the image to the right of the copy

“New Media” is a file you have on your computer or another location you will need to upload to the site. “Existing Media” is a file you have already saved to the website and can find with the media files on the site.

By selecting new media, you will be able to browse your computer to find the image and upload it to the site. By selecting existing media, you will be taken to a listing of all the media (images, video, audio files) that already exist on the site and you may choose your image from that list.

Once you’ve added your image, you will be prompted to name your photo and add alternative text. Alt text is text that describes the image. Sometimes, web pages cannot load an image, or a visitor is using assistive technology (such as a screen reader) to read the website. Alt text is needed to describe the image in these cases and will show instead of the photo.

You may also give your image a caption and/or photo credit, though these are not required fields.

Next, select “Create New Media”.

To add copy, you will type into the WYSIWYG editor, as you would when adding text or two column text.

Once you have reviewed your copy and image, select the blue “Save” button at the bottom of the page.

Image with text component as it appears live