Open Source Software Technical Articles

Want the Best of the Wazi Blogs Delivered Directly to your Inbox?

Subscribe to Wazi by Email

Your email:

Connect with Us!

Current Articles | RSS Feed RSS Feed

A Simple Image Gallery Plugin for Drupal 7

  
  
  

Drupal is a hugely popular content management system, but for all of its flexibility and power it's missing a key component: an easy way to manage image galleries. If you need to create and manage image galleries in Drupal, here's an easy approach that won't cost too much of your sanity.



I'll presume you already have Drupal installed; if you need some help with that, From Zero to Drupal in 30 Minutes should get you up and running.



Verify that you can install new modules in your Drupal 7 installation by going to your Module administration page and ensuring there's a tick in the box next to the Update Manager module. After you click the Save Configuration button at the bottom, you should see a new "Install new module" link near the top of the Module page.



Drupal has several sets of add-on modules for managing image galleries. Most are complex and vexing, and many require some additional coding. If I wanted to write code I wouldn't be looking for Drupal modules! I've found a better approach in the Media Gallery module, which sets up a nice point-and-click interface.



Media Gallery's Readme.txt file warns that Media Gallery is still in beta, and that it depends on other modules that are also in beta, so you should not use it on a production system "unless you're able to tolerate bugs, maintain frequent database backups of your site, and keep up-to-date on the module's development so that you can quickly apply any patches if security issues are discovered." I haven't run into any serious issues on my sites, but your mileage, as they say, may vary.



To give Media Gallery a try, first find and install all the required modules:











Visit each site and copy the download link from its right-click menu. Go back to your Module page, click "install new module," paste the link into the "Install from a URL" box, then click the Install button. Drupal will ask whether you want to enable the new module; don't bother with this until you have installed all of them. Installing all these modules is rather tedious, but it's less tedious than managing image galleries manually. The Drupal module installer downloads and unpacks each module into the correct directory, which saves some steps.



The ColorBox jQuery plugin is not a module but a code library. You must have access to the Drupal installation on your web server so you can copy it to the correct directory, sites/all/libraries, and unpack it. If the libraries directory does not exist then you must create it. If your site is on a hosting service, you can use either cPanel or plain old FTP to install ColorBox.



Now you can enable the Media Gallery module, which will also activate all of its dependent modules.



When you activate your new modules you may get a message like this: "Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 76 bytes) in /home/madread/public_html/drupal/includes/menu.inc on line 3604." This means that Drupal wants more memory. Even though Drupal claims it's a fatal error, your modules should be enabled anyway.



You can see how much memory is allocated for your installation on your Reports -> Status Report page. If you're on a shared hosting service you may not have direct control of this, so you'll have to work with your service provider. If you do have control of your server resources, you have a number of ways to increase Drupal's memory allocation. The easiest way is to edit or create a file name php.ini in your Drupal root directory, and make sure it contains a line like this:




memory_limit = 64M


How much memory does it need? Drupal 7 needs 32MB just for its core module set. Image galleries and additional modules use more memory, but you don't want to give them a giant whack of memory because that can hurt performance when you have a lot of connections at the same time. Read the Drupal System Requirements page to learn how to calculate memory requirements, and how best to configure memory.



Creating and Editing Galleries



At last we can get to the fun part, which is creating an image gallery. First create a gallery on the Add Content administration page, then add your images to the new gallery. Your Add Content page should look the figure below, with a Gallery item.



[caption id="attachment_172474" align="alignnone" width="683" caption="Create a new image gallery from the Add Content administration page."][/caption]

After you create a new gallery it will appear on your Content administration page, just like any other content on your site:



[caption id="attachment_172475" align="alignnone" width="604" caption="Finding your image galleries on the Content administration page."][/caption]

When you want to add or remove images from your gallery, click on the gallery name on the Content page. If you click "edit," Drupal takes you to the gallery metadata page, where you can edit the title and other settings.



Let's quit faffing around and upload some images. Go to your new gallery and click "Add media":



[caption id="attachment_172476" align="alignnone" width="414" caption="Uploading images to your new gallery."][/caption]

You can upload images from your local computer and from the Web. Every uploaded image becomes part of your Drupal Library, so you can reuse images in multiple galleries without having to reupload them. The uploader supports a wide variety of file formats for still image, video, and audio. Sadly, the image uploader does not support batch uploads; you must enter only one at a time. However, you can install a batch uploader, as we shall in a moment.



Drupal creates a master Galleries page with thumbnails of all of your galleries. The figure below shows two galleries on my test site: one has images, and one doesn't.



[caption id="attachment_172477" align="alignnone" width="286" caption="Two example galleries, one populated with images, one empty."][/caption]

Removing images from a gallery is tricky: while there is a nice obvious Add Media link, there's no obvious delete button. The delete buttons are concealed on each image thumbnail; click on the top right corners of the thumbnails to see them.

19a98812-f823-48dc-841e-bf029c63c6d7


If you expect to install lots of files at one time, check out Plupload, which supports batch uploads. Unfortunately I find it to be unreliable; sometimes it works for me, sometimes it doesn't. It's easy enough to try. Just download and unpack the Plupload GPL2library into your sites/all/libraries directory, then download and enable the Plupload widget. It gives you a nice batch uploader:



[caption id="attachment_172478" align="alignnone" width="404" caption="The Plupload batch uploader."][/caption]

One final bonus: Your new Drupal image galleries have a simple slideshow feature. Click on any thumbnail to bring up the full-sized image, and use the slideshow controls at the bottom of the image to move from image to image.




This work is licensed under a Creative Commons Attribution 3.0 Unported License
Creative Commons License.


This work is licensed under a Creative Commons Attribution 3.0 Unported License
Creative Commons License.

Comments

Any chance the graphics are online somewhere for this article?
Posted @ Tuesday, November 27, 2012 7:35 AM by David Simmons
Thank you. After searching the whole ecosystem of Drupal, finally a decent way to build a gallery.
Posted @ Saturday, December 01, 2012 10:07 AM by AK
Please upload the images for the tutorial so we can see what you are referring to...
Posted @ Wednesday, December 12, 2012 1:08 AM by Terence
thanks, worked (even without the images) :-)
Posted @ Saturday, May 11, 2013 8:46 PM by Andrew
I downloaded the file colorbox-master.zip and extracted it in sites/all/libraries so the path of colorbox is sites/all/libraries/colorbox-master 
 
I am able to create gallery but effect of colorbox is not visible. please tell me what extra I have to do to make gallery photo as like overlay. 
 
in short my question is how to enable colorbox effect in my gallery? 
 
thank you
Posted @ Monday, June 03, 2013 11:55 AM by Alok Singh Mahor
PLUpload is very convenient but buggy in internet explorer. I require Firefox to use the plugin and it works great.
Posted @ Thursday, July 25, 2013 12:50 PM by Azelia Best
Will this plugin solve the image slider issues with Drupal? 
 
The only issue that most of us face are with the image sliders(many images)
Posted @ Monday, September 23, 2013 10:25 AM by Ayesha
Post Comment
Name
 *
Email
 *
Website (optional)
Comment
 *

Allowed tags: <a> link, <b> bold, <i> italics