phone:866-728-9100  /  fax:866-728-9100  /  email: info@sagetree.net
How to make a simple or complex gallery for Drupal 7?

Since D7 came out, many are skeptical about how easy it is to manage media types and files. What if we want to make a gallery for only images or a gallery of videos? What modules are best to use to make this job simple?

Some modules needed to make simple image galleries for D7 are already part of core: Image cache as Image styles, CCK as fields, and views. To make the gallery more robust, follow these steps:

  1. Install the media module to manage all files accessible at /admin/content/media
  2. For a lightbox gallery, install colorbox. It has views integration as well as a colorbox trigger where you can make any fields pop up into a lightbox easily.
  3. For a video gallery, install videojs, an html5 video player. This module makes sure that the video is playable in all browsers.
  4. To easily add videos from youtube, download an add-on called media youtube.
  5. To make the videos UI display like how youtube does, install views slideshow.
  6. Putting it all together, create a new content type called gallery or videos. Add an image/video field and a thumbnail for the video.
  7. Make a new view called gallery using the type above. If we want a lightbox type of gallery:
    1. Add the fields you want to be displayed in the gallery and exclude all of them.
    2. Add the colorbox trigger in the field > Replacement Patterns and include the thumbnail as the trigger, the entities (ex: video field, image field, description) on the popup and the title on caption.
    3. The width and height will need to be tested depending on how much content is placed on the popup and theme.
    4. Add views paging, and sorting if you want and save. Now you have a simple image/video/mixed contents gallery.
  8. For a video gallery with slideshow or to get it close to Youtube UI:
    1. Add the fields you want to display in the slideshow and exclude all of them.
    2. Add the global custom text > Rewrite > Replacement patterns and include the title and entities (ex: description, extra fields).
    3. On Style Settings of the view, click on Slideshow then its gear.
    4. For slideshow settings, make slideshow type as cycle and choose the effect transition.
    5. Click on View Transition Advanced Options:
      1. To make it auto rotate, make timer delay have a value more than 0 (preferably 5000)
      2. To make it like Youtube UI, make timer delay = 0.
    6. Make sure Sync is checked, Pause on hover, Pause on click.
    7. To have paging like Youtube, on Top Widgets, click on Pager > Weight of Paper = 1 > Pager Type = Fields > Pager Field = thumbnail image.
    8. To have optional controls (play, pause, previous, next), check control > Weight of control = 1 > Control type = text.
    9. Add views paging and sorting if you want and save.
  9. All of these require css tweaking to make it look nice and match your theme.
  10. Populate the contents and voila, now you have an all in one media gallery.
Share this

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

Type the characters you see in this picture. (verify using audio)
Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.

 

Authorize.Net


 

 
More Info

Our Mission

Sage Tree Solutions develops elegant, effective, and high-quality web sites and web applications.  We provide web development, design and marketing services, empowering our clients and helping them achieve their goals. Our commitment is to service, integrity and engineering excellence.

Additional Resources

Looking for additional help outside of web development?

Get the help you are looking from our list of trusted professional business associates.

FREE Tips & News

Sign up for our FREE newsletter that includes tips and information on how to grow your business.

Your email address will NEVER be shared or sold to outside parties.

Get Started Today

Are you ready to take your business to the next level? We are.