Media Gallery | Kent State University

Add a Photo Gallery to Your Website

Create the Photo Album on Flickr

  1. Create the photo album on Flickr.
  2. You will need some URLs from your Flickr album so keep it open.

Create a  Drupal Media Gallery

  1. Open a new tab or window in your browser.
  2. From your black menu bar, select Group Actions>Create Content>Media Gallery.
  3. Complete these fields in the form that will open (shown below):
    1. ​Title - Enter a title for your gallery.
    2. Flickr Resource - enter the Flickr URL of the Flickr album to be used. For example, https://www.flickr.com/photos/134021162@N06/albums/72157686920158650.  Change "albums" in the URL to "sets."  The URL will be https://www.flickr.com/photos/134021162@N06/sets/72157686920158650.
    3. Flickr Cover Image - Enter the Flickr URL of the Flickr image to be used as a cover image for this gallery. For example, if you go to Flickr, click on one of your albums, and click on an image, the resulting url will be similar to https://www.flickr.com/photos/kentstate/14412076318/in/set-72157645540334113.
      Media Gallery Edit Mode Screenshot
    4. Save the gallery.
    5. Copy the gallery's node ID.

Add the Drupal Media Gallery to Your Page

  1. On the basic page you are adding the gallery to, click the Customize this page button located in the bottom black bar.
  2. Click the plus sign in the area you are adding the gallery.
  3. Select Media Gallery from the left navigation list.
    Adding the Media Gallery from the list of content in Customize this page screenshot
  4. Select Flickr Photo Gallery from the available options.
  5. Complete these fields in the form that will open (shown below):
    1. Check the box to Override title.
    2. Enter the Gallery Title - Enter the node ID of the Drupal media gallery your created earlier. Drupal will locate the title.
    3. Number of Items to Display - The default is 6.  Leave blank if you want all the images to be displayed or enter the number (+1)  if you want to use a specific number.  For example, if you want to show only the first 20 photos, you would enter 21.
    4. Select the Gallery Display -
      1. Grid - The images will be displayed in a grid.  When an image is selected the image will open in the upper left corner of a new window.
      2. Owl Carousel - The images will be displayed in a slide show.  The user will click the arrows or dots to progress through the images.
    5. Select image Formatter - Selecting Large will show the gallery as large as possible.
      Configure Flickr Photo Gallery Screenshot

Add a Video Gallery to Your Website

CREATE THE YouTube or Vimeo Videos that will be featured

  1. You will need the videos URLs.

CREATE A  DRUPAL MEDIA GALLERY

  1. Open a new tab or window in your browser.
  2. From your black menu bar, select Group Actions>Create Content>Media Gallery.
  3. Complete these fields in the form that will open (shown below):
    1. ​Title - Enter a title for your gallery.
    2. Video Gallery - Enter the video URL in the Video URL field. Click Add another item to add additional videos.
      Media Video Gallery Screenshot
    3. Save the gallery.
    4. Copy the gallery's node ID.

ADD THE DRUPAL MEDIA GALLERY TO YOUR PAGE

  1. On the basice page you are adding the gallery to, click the Customize this page button located in the bottom black bar.
  2. Click the plus sign in the area you are adding the gallery.
  3. Select Media Gallery from the left navigation list.
    Adding the Media Gallery from the list of content in Customize this page screenshot
  4. Select Video Gallery from the available optons.
  5. Complete these fields in the form that will open (shown below):
    1. Check the box to Override title.
    2. Enter the Gallery Title - Enter the node ID of the Drupal gallery your created earlier.  Drupal will locate the title.
    3. Select the Gallery Display -
      1. Grid - The videos will be displayed in a grid.  When the play button is selected the video will begin.
      2. Owl Carousel - The videos displayed in slide show style.  The user will click the arrows or dots to progress through the video selections. When the play button is selected the video will begin.
        Video Gallery Configuration Screenshot