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