Environment: Drupal 9 User
Purpose: Guide on how to add an image to a basic page
Article Contents:
- Getting Started
- Adding an Image
- Resizing an Image
- Moving an Image
- Removing an Image
- Adding a Link to an Image
- Responsive Images
Getting Started
Log in and navigate to the page where you wish to add an image if you are not already there. If you need help logging in, see the Logging In and Out article.
Click to edit the page.
Adding the Image
Scroll to the Body field WYSYWIG. Within the editor, click the area where you want your image to go. For example: If I want to add my image after the first paragraph, I would click within the body here:
Once you have selected the area for your image, click on the photo button in the toolbar of the WYSYWYG editor.
This is the window that will pop up:
Here, you can either upload your image or select one that is already in the site
To upload a new image, click Select file and then browse the image you want in your local files
If you want to search for an existing image, you can enter the image's name in the search bar under Name and start searching. There are other various filters that you might find helpful as well.
The you have to select your image. It will look as checked
And finally, click Insert selected
Resizing the Image
For resizing an image you click Edit media, from the image you've just inserted
In the next window, you there is a dropdown menu under Display. You click it
There are multiple ratios you can select for the current image
Moving the Image
There is also a box with a crosshair in the top left corner of the picture:
Clicking and dragging this box will allow you to move the image if you want to place it in a different area.
Removing an Image
To remove an from the body you can simply click the image from within the editor and hit the BACKSPACE key.
Adding a link to an Image
If you want people to be able to click your image and have that take them to another page, first add the image as explained above. Then, while still in the editor, click on the image to select it and then click the link button in the toolbar:
You will see a pop-up window asking for a URL:
Add the link as either an absolute link for an external website or a relative link for a page within your department website. For more information on linking, see the Linking article.
Responsive Images
The images in the D9 environment are Responsive. This means that their size will change to match the size of the display they are on. The image will not expand larger than what you have defined through the editor, or larger than the original image size.
For example: here I have added an image of the campus into the editor.
t appears very large here. If I view the page however, it shrinks to match the width of the body and my monitor display:
And if I shrink my browser window as if viewing on a mobile device or other smaller display, the image will continue to shrink to match the size:
