Images

---

---

Add New Images

To the Page

Adding images in Drupal 7 | Adding images in Drupal 8/9+

• In the Content Editor box, click your cursor where you want the photo to be inserted.

Adding images in Drupal 7:

• Click on the double photo icon on the right-hand side of the formatting bar (Disregard the other image icon on the left side).

• This will bring up a pop-up box.
  NOTE: If you have already uploaded the image you want, or have used it previously on your site, skip down to the Add previously uploaded images section.
• Browse your computer to find the image you want to add to your content, click on it, then click the Open button.

 

• Once the title of the photo appears in the box next to Browse, click on the Next button.
• If you have a Destination screen, leave the setting on "Public local files served by the webserver" and click Next again. Otherwise, continue on to the next step:
• When you upload an image, the next screen will have Alt Text and Title Text fields for the image. After you have filled out the Alt Text and Title Text fields, click the Save button, and then click the Submit button.
• The image will now be inserted into the Content Editor box.
• To make size or padding changes see the Edit Image Properties section below.

Adding Images in Drupal 8/9+ versions:

• Click the Media Library button in the center of the editor that looks like this: 

You will now see the Media Library window:

• Click the "Choose file" button, then browse your computer until you find the image you want to upload.
• Add the Alt Text for that image.
• Click the "Save and Insert" button to insert your image where your cursor was.
• A pop-up window will appear where you can set the "Left" or "Right" alignment to have the text wrap around the image, or choose "None" or "Center" to not have text wrap around one side of the image. "Center" is the default setting but can be changed at any time by clicking the "Edit media" button near your images.
• You can also select a crop ratio and and size.  Crop Custom is the original ratio and size the image was when uploaded.

 

To the Library

Note: If you need to add more than 5 images, it could be easier to add them all at once. See Upload Multiple Images for more information.

Click on Manage Files in the Admin menu in the gray bar at the top of your page.
Note: in Drupal 8/9+ versions, this is listed as "All Media" in the white bar.

 

Click on the + Add file link (or + Add media in Drupal 8/9+) located below the Content title at the top left of the page.

 

This will give you the same screen that appears in the pop-up box when you are adding a photo while creating a page.

---

Add Previously Uploaded Images

Adding Existing Images in Drupal 7 | Adding Existing Images in Drupal 8/9+

• To insert an image previously uploaded to your library, click your cursor where you want to insert your image.

Adding Images in Drupal 7

• Click on the same double-image icon: on the far right side of the Content Editor menu that you use for adding a new photo. This will bring up the add an image box.
• Click on the Library tab on the right: 

 

• The contents of the pop-up box will change to show thumbnails of all the images that have been uploaded to your site:

 

• If you know all or part of the filename for the image you are looking to add, you can type it into the File name box and click the Apply button to filter the thumbnails.
  NOTE: You do not have to type in the exact filename. If you don't remember the exact filename, you can type in the first few letters and it will show you all of the filenames that contain those letters. As an example, entering in "image" will also bring up any files with "image" or "images" in the name.
• You can also filter the Library content by Type (Audio, Document, Image, Video) or change the Sort by method.
• If you don't see the image you want to use on the first page of content, scroll down to the bottom and click the next or previous links to view additional thumbnails. There are 25 thumbnails per page and you can also use the numbers to jump to a different page of thumbnails:

 

• Once you find the image you want to insert, click on the image, then scroll down and click the Submit button at the bottom to add the image to your content.
• After the image has been added to your content, you can make changes to it the same way you would for a new image.

Adding Existing Images in Drupal 8/9+

• Click the Media Library button in the editor:
• Search or Browse your library until you find the image you wish to insert and click on it, then click the "Insert selected" button at the bottom:

• From here, you can right click on the image to bring up other editing options, such as padding or width, or click the "Edit media" button to bring up the original pop-up window.

Note about Using the Same Images Multiple Times on a Page

If the same image appears 20 times or more on a page, it could stop rendering and may not appear. This can occur when the same image is being used as a placeholder in multiple areas on the page. If this happens, try using different images as placeholders.

---

Replace an Image

Replace an Image in the Editor

While editing your content, all images should have a yellow image icon in the bottom right corner of the image.

 
Click on that icon to bring up the media browser popup box that you see when you add new images and will function exactly the same, except you are replacing the existing image with a new one. Follow the same steps as adding a new image and the old image will be replaced by a new one.

NOTE: If you do not see the image swap button as shown above, you will need to right-click on the image and choose the "Swap image" option to select or upload a new image.

 

Replacing an Image Globally from the Files Section

Please note, there are no UNDO or revision options available for this method so use with caution.

Occasionally you may need to replace an image you have uploaded previously, such as if a logo has changed. See the Drupal 7 global image replacement instructions and the Drupal 8/9+ global image replacement instructions.

Replacing an image globally in Drupal version 7

Go to the "Files" section of your site:

Find the image you want to replace, either by scrolling, or filtering based on the file properties, then click the "Edit" link on the right:

Once you are on the Edit page, click on the "Replace File" box, which will work similar to when you upload an image:

If you do not want the original image available at all, you can overwrite the file name with your new image by checking the "Keep original filename" box shown below:

Click the "Save" button at the bottom and your new image version will be live on your site.

 

Replacing an image globally in Drupal version 8/9+

Go to the "Media" section of your site by clicking the "All media" link in the top "Shortcuts" menu and click the pencil icon at the top right of the image you need to replace:

 

Scroll down until you see the "Remove" button just below the crop options for that image:

 Then insert your image using the "Choose file" inserter as if you were inserting the image for the first time:

Fill out the Alt text for the image and then scroll to the bottom of the page and click the "Save" button to update your image on all of your content.

As a reminder, there are no UNDO or revision options available for this replacement method so make sure any file you are replacing has been backed up before you choose this replacement option.

 

---

Edit Image Properties

• To adjust the properties of a photo you can click the left-hand image icon in the Content Editor box:

 

• Or, you can right-click on the image, then select the Images Properties option:

 

From the Image Properties pop-up box you can change the image size, padding, and alignment.

• To adjust the size of the photo, click on the Width field and type in the pixel width you want the photo to appear.
• To the right of the Width and Height boxes is a lock ( ). When it is locked (right lock icon), the height will adjust automatically in proportion to any change in the width.
  NOTE: If the lock is unlocked, the width will adjust independently of the height and can cause the image to be distorted.
• If you need to reset the image size, click on the circle with an arrow ( ) located to the right of the lock.
   
• Padding (HSpace and VSpace) adds extra space around the images so that the text and other items are not touching or too close to an image.
• 8 is a commonly used number for the HSpace, but anything between 5 - 10 px (pixels) will work for the HSpace, although some situations may need more or less, depending on the content.
• 8 is also a commonly used number for the VSpace, but again, anything between 5 - 10 px will work, although on rare occasions you may find it necessary to use 0-2 px for the VSpace.
   
• The last Image Property option is Alignment. Alignment allows you to wrap the text and other objects around the photo and have the image aligned to the left or right of the page.
• If you'd like the image to stand alone (not included with paragraph text), leave the alignment to the default setting of <not set>.
• If you'd like the image to align left or right with the text wrapping around it, choose either left or right from the Alignment drop-down.
  NOTE: Make sure that the image is at the very beginning of your paragraph to ensure that it will allow the text to wrap properly.
   
• Click the OK button to commit the changes.

Additional information on how to format and resize images can be found on the Non-Web Tools page.

---

Upload Multiple Images

On the Add File page, click the Archive link located at the top right of the page under the UPLOAD tab.

• Click on the Browse button and find the compressed file folder that you want to add to your site.
  NOTE: The only compressed file formats that can currently be uploaded are .zip, .tar, . tgz, .gz, and .bz2.
• The best practice is to only have just the files you want to upload in your compressed file. Although, should you need to single out a specific type of file to upload you can do so in the Pattern text field box. Type .* followed by the file type you want to batch upload.  .*jpg for example, would cause only the jpg images to be batch uploaded. However, it is strongly recommended that your compressed folder contain only the files you want to batch upload as it will make the process much easier for you.
• After clicking the Submit button on the Archive upload page, it will process your compressed folder file and upload it to your site. It will automatically take you to the main Content page and a green banner will appear at the top of the page with a successful upload message. In the example below the message is: Extracted test-zip.zip and added 3 new files.

 

---

Changes Multiple Images

• Occasionally you may need to make updates to several images at the same time. 
• From the Files page, you can check the boxes to the left of the images that need updating.

 

• Select the relevant choice from the UPDATE OPTIONS dropdown menu. 
• The most commonly used choice is the Delete selected files option which will, as it states, delete the files. 
  NOTE: There is no undo button for these updates so make sure you really want to choose that update option.

 

• You are very unlikely to use any of the other three options, and unless you know what you are doing, it is not recommended to use them.