Using the Media Browser to Add Sections

Please review the information on the following pages before adding images to the page:

Image Files must be less than 100 MB.
Allowed file types: png, gif,  jpg, jpeg.
Images must be smaller than 1280 x 1280 pixels.

NOTE: The image formatting options within the Media Browser are limited, so ensure you edit your image using a Photo Editing application before you upload them.

Also, make sure you have named your images properly as per the naming conventions mentioned in the Best Practices pages.

The images below represent the various screens you will see when you click the Media Browser for each type of section:

When you click on any of the Browse buttons the Media Browser screen will open.

There are various locations to get your images from, and on the top right of the screen you will find tab options.  You can either Upload new images, or look in the Library or My Files to use images previously uploaded.

These are the 2 different upload files formats you may see in the content area when on the Upload Tab.
The options you see here will depend on which section type you have chosen, examples are shown below along with detailed instructions.


The first example is the most common and will be seen when only a single image can be used on a section.

Click Choose File and the explorer window will open and you can navigate through the files on your computer to find the image you want to use.

Click open, once you have selected an image to use.

The file name will show up in the Chose File box.  Click Upload to import the file to the web page.

Once the upload has completed you will see the file name and the button will now say Remove instead of Upload

Click Next to continue. (scroll past the multiple upload instructions to proceed with the NEXT STEP)

Upload Multiple Image Files for Image Gallery

The second example is what you see for the Image Gallery where there can be multiple images uploaded.  

You can either Drag files from your computer into the content area, or click the + Add Files option to browse for images. 

When you click Add Files, the browser window will open so you can navigate to an image folder on your computer.  Select the images you wish to upload. (Hold the CTRL key and click to select multiple images)

Click Open once all desired images are chosen, the files will show up in the Filename box and you will be able to see the file size.  You will notice that the Status is 0%, this is because they have not been uploaded yet.

If a file is too large, click the the minus sign in red circle icon, next the file size column to remove it from the list.
Resize the image file on your computer using an Photo Editing Software and then try to upload it again.

Once you are certain that you have all the files you need, Click Start Upload.

The files will be added to the web page and the Status will change to show that the file was added.

After all the images are uploaded you can click Next (proceed to the NEXT step)

Next Step

Once you have chosen your image(s) using either method shown above, and have clicked Next; the image details screen will open.
Fill out the fields as explained in the example below.  You do not need to add a Technology File Category, but Alt Text and Title Text are good to include.  You should also provide a proper file name so you can easily identify the image in the library:

Each image will have the same fields to fill in as shown above.  Scroll down to each one and enter the applicable details.
Once you fill out the information for all of the images, you should see a Save option at the bottom of the page.
After you click Save, the images will show up on the Images area of the Image Gallery section details or in the Image Area, for other section types:

image gallery done  

You will now see Edit and Remove buttons beside the images.  Use these buttons as needed.

Using Library and My Files tabs

If any of pages you have access to within the Drupal site already contain images, then you should be able to see all of those images when you click on the Library tab of the Media browser:

Use the navigation buttons to see more pages of images.

If you have added images to pages you have previously created, you will see those images on the My Files tab:

For either the Library or My Files tab, simply click on one more images depending on the type of section you are working with.  If you click on an image a second time it will deselect it.

Click Submit to add the image(s) to the section, then save the page to view how it looks.

NOTE: You will not get the image details page as with new uploads. If you need to change the details for the images you can use the Edit button next to an image to open the details for that image file.

Editing images

You can go back into the edit mode for the section,and choose to Edit the image to make small changes.

Keep in mind that each section may display the same image differently, and the changes you make will affect all uses of this image. So,if you have used the same image on other sections, changes made on this section may affect how the image looks on other sections.


Article ID: 2946
Mon 2/14/22 8:56 AM
Tue 2/22/22 11:35 AM