Adding Media to Drupal Pages

Intended Audience

This Quicknote is intended for faculty and staff who would like to learn some basic and commonly used functions within Drupal.

Requirements

To follow along with this Quicknote you must have an active University account, have had Drupal training, access to Drupal and administrator rights to make edits to the Drupal page. You can request a Drupal training session by clicking the following link: Drupal Training

What is Drupal?

Drupal is a powerful content management system used to create, edit, and update university website pages. UM-Flint faculty and staff members can log in and access this service using their uniqname and current password.

Table of Contents:

• Uploading an Image
• Uploading a Google Form
• Uploading a Google Calendar
• Uploading a Video

Uploading an Image

1. From within the Drupal page, click on the Customize this Page button at the bottom of your screen.
2. From within the Drupal customization page, click on the Plus symbol to create a new widget in the corresponding column.
   • Note: If you wish to add the image to a pre-existing widget, click the Edit button denoted by the gear icon and continue to step 4.
3. Next click on Add Text or any of the desired widgets listed in the Add Widgets section.
4. Now give the text box a title and click the Image icon, which is located along the top of the Body section.
5. From the Image Properties box, you can provide a link to the image or click the Browse Server button, choose your uniqname on the left-hand side, and click Upload at the top left to upload an image from your computer into Drupal.
   • Note: You may need to adjust the width, height or other properties to achieve the desired look for the image.
6. Once all adjustments are made click OK. This will close the Image properties box. Now click on the Finish button.
7. Lastly, click the Save button at the bottom of the screen.

Uploading a Google Form

1. From within the Drupal page, click on the Customize this Page Button at the bottom of your screen.
2. From within the Drupal customization page, click on the Plus symbol to create a new widget in the corresponding column.
   • Note: If you wish to add the form to a pre-existing widget, click the Edit button denoted by the gear icon and continue to step 4.
3. Next click on Add Text or any of the desired widgets listed in the Add Widgets section.
4. Now give the text box a title and click the IFrame icon,which is located along the top of the Body section.
5. From the IFrame Properties box, you can provide a URL link to the form.
   1. To get the Google form link, go to forms.google.com
   2. Click Send in the top right, then Link near the top
   3. Copy the link provided in the Link box, and paste it into the IFrame Properties box.
   4. Note: You may need to adjust the width, height or other properties to achieve the desired look for the form.
6. Once all adjustments are made click OK. This will close the IFrame properties box. Now click on the Finish button.
7. Lastly, click the Save button at the bottom of the screen.

Uploading a Google Calendar

1. From within the Drupal page, click on the Customize this Page button at the bottom of your screen.
   • Note: If you wish to add the Calendar to a preexisting widget, click the Edit button denoted by the gear icon and continue to step 4.
2. Next click on Add Text or any of the desired widgets listed in the Add Widgets section.
3. Now give the text box a title and click the IFrame icon, which is located along the top of the Body section.
4. From the Image Properties box, you can provide a link to the calendar in the URL field
   1. To get the calendar link, go to calendar.google.com
   2. Click the gear icon in the top right, then Settings
   3. Select the calendar you want to share in the left menu
   4. Copy the Public URL to this calendar and paste it into the URL field in IFrame properties
   5. Note: You may need to adjust the width, height or other properties to achieve the desired look for the calendar.
5. Once all adjustments are made click OK. This will close the IFrame properties box. Now click on the Finish button.
6. Lastly, click the Save button at the bottom of the screen.

Uploading a Video

1. From within the Drupal page, click on the Customize this Page button at the bottom of your screen.
   • Note: If you wish to add the video to a preexisting widget, click the Edit button denoted by the gear icon and continue to step 4.
2. Next click on Add Text or any of the desired widgets listed in the Add Widgets section.
3. Now give the text box a title and click the IFrame icon, which is located along the top of the Body section.
4. From the Image Properties box, you can provide the embed code link to the video
   • Note: You may need to adjust the width, height or other properties to achieve the desired look for the video.
5. Once all adjustments are made click OK. This will close the IFrame properties box. Now click on the Finish button.
6. Lastly, click the Save button at the bottom of the screen.

Additional Information

• Google Forms
• Forms General Information
• Google Calendar Navigation
• Security and Privacy in the M+Google Environment

Troubleshooting

If you have any questions or experience any issues not covered by the information in this Quicknote, please contact the ITS Helpdesk for assistance.

Locations: 206 Murchie Science Building or 3174 William S. White Building
Phone#: (810) 762-3123 (option 1)
Email: flint.its.support@umich.edu