Overview

You can add and position images to pages on your Drupal 8 10 site where there is a text editor. This works very similarly to our Drupal 7 sites, but it is easier to align images and add captions now. 

Table of Contents

Option 1: Inserting

Images

Step 1: Place Image

• Within the text editor, place your cursor where you want your image to appear.
• I'm putting this image at the beginning, above my text.

Image Removed

• Place your mouse over the picture frame icon and 'Insert Image' will pop up.
• Click on the

• picture frame

When you mouse over it, it reads "image."

Image Removed

Image Removed

C. Select a photo from your computer.

Image Removed

Image Removed

This image is 800 pixels wide by 621 pixels tall. 

For this particular theme, if the image is larger than 720x720, the text editor will automatically resize it to fit within those dimensions.

Image Removed

I see that the image has been resized. (For some reason the message appears twice. Ignore that for now.)

D. Add alternative, or "alt" text.

Image Removed

I wrote, "Young Margaret Hamilton adjusts some dials on Apollo II in a historic black and white photograph."

• button

Image Added

Step 2: Upload File from your Computer

Select the file you want to upload from your computer and then click on the  'Upload' button

Image Added

Step 3: Add Alternative, or "alt" Text

A box will automatically appear and you can add alternative text for the image you just uploaded.

Image Added

I wrote, "Students standing on rocks and posing for a photograph in Study Abroad in Korea"

About Alternative Text:

Alt text allows people who have visual impairments to understand what the image is about. You don't need to say "image of" or "picture of," but in this example I mention that it is an historic photograph, because I think that helps explain the significance of the photo.

If this were an artist's rendering of the planet Venus, I would say "An illustration of the surface of Venus..."

Modern headshots head shots generally don't require alternative text, because the alt text would not provide any information that is missing to someone who can't see. I would just enter two quotation marks, which signals blank alt text.

E. If desired, align your image and select 'Caption' for captions.

Image Removed

Because this image is at its max size, 720px, I'm not going to align it. The image will fill the column. I'll show you how to align images that are smaller next.

You can add a caption, which is different than the alt text, if you wish. Once we save the image, we will see a place to add a caption beneath the image.

F. Click the 'Save' button

You will now see your image with your content.

Image Removed

G. Add a caption beneath the image if you selected that option.

Image Removed

H. Save your page and see what the image looks like with the theme.

Image Removed

The image resizes automatically no matter what device someone views the page with. 

Image Removed

This image is rather large and takes up a lot of space at the beginning of my content.

Remember, for this theme the maximum dimensions are 720x720. I'm going to go to resize my image to be half the size of that.

Option 2: Inserting and Aligning Smaller Images

I'm going to click edit and add a resized version of this photo of Margaret Hamilton.

A. Within the text editor, place your cursor where you want your image to appear.

Again, I put my cursor where I want the image to appear-- this time, beneath the first paragraph-- and click on the picture frame icon.

Image Removed

B. Click on the picture frame icon.

Image Removed

C. Select a photo from your computer.

I select the resized image from my computer.

Image Removed

This image is less than half the width of the maximum width of 720 pixels. 

Image Removed

D. Add alternative text.

E. Align your image and, if desired, click to add a caption.

Image Removed

Notice that I don't get the green box telling me that Drupal and the text editor have resized my image.

I've added my alt text again, and I'm going to make this image float, or align, to the right. The text will wrap to the left.

I'm going to add a caption too, so you can see what it looks like.

F. Save

Here's what it looks like in the text editor.

Image Removed

Tip: If you need to go back and edit the photo's alignment or alt text, simply double click the photo within the text editor. 

G. Add a caption

Image Removed

H. Save your page and see what the image looks like with the theme.

I've saved everything, and here's how the image looks at a width of 350 pixels instead of the maximum 720. 

Image Removed

And here's how it looks compared to the first image I added, which was as large as it could be.

Image Removed

Step 4: Resize Image

If you fill the image you are working with is too large, you may want to resize it. Once it's resized you can align it and have text wrap around it. To resize the image, you click on the image and grab the little blue box in the corner and drag it to the size you like. 

Image Added

Your image is now ready to be formatted and can have text wrap around it, if you like:

Image Added

Step 5: Formatting the Image

Click on the image and a menu bar will appear below it. You can put your mouse over each icon and it will tell you what function it will perform. You can align the image (with text wrapped around it), add a caption and link the image.

Image Added

Step 6: Adding a Caption

Add a caption beneath the image by selecting the caption icon:

Image Added

Type in the caption and you will have a caption for the image.

Image Added

Step 7: Aligning the Image

You can align the image by clicking on one of these buttons. 

Image Added

I want to align the image to the right. To do this I click on the button that says "Align Right" when I hover over it.

Note: If you want the image to be aligned with the second paragraph, you simply move the cursor to the beginning of the second paragraph when placing the image.

Image Added

Step 8: Save and View Page

Image Added

Click on the 'Save' button at the bottom of the page and you can now view the page:

Image Added

The image resizes automatically no matter what device someone views the page with. 

Image Added

Option 2: Inserting an Image Already on the Website

Step 1: Reusing

Images in

Fields Specifically for

Images

If you are uploading an image using a field specifically for images, it is possible to use an existing image on the site.

For example, the Article content type has an image field specifically for the thumbnail.

Image Removed

Image RemovedImage Added

I can either use "Choose File" to select a file from my computer, or I can use the "Open File Browser" link to access all images (and files) on the site.

Image Added

I found the image of Margaret Hamilton that I previously uploaded to the Basic Page in the above examples, and I am using it for this article's thumbnail.

As when I insert images with the text editor, I need to include some alt text.

I've saved my Article with my thumbnail image.

Because this image was uploaded with an image field, there are some automatic alignments placed on the image to make it go to the right. 

This image appears cropped and resized in the preview version of the article on the News page.

Step 2: Reusing

Images (and

Files) in the

Body Text Fields

However if you want to insert an existing image into a body text field, it is more complicated.
The easiest thing to do is upload another copy of the image from your Desktop. 

Please Note: We do have documentation on another option, but as it involves working with html source, it is an Intermediate topic : What if I want to insert an image or file that is already on the website somewhere?Inserting an Image or File That is Already Being Used on the Website