Node Gallery: The Easiest Drupal Photo Gallery
We have several different Drupal photo gallery tutorials on this blog. The most popular is Views Photo Galleries for Drupal 7, followed closely by an older tutorial, Node Gallery for Drupal 6.
However, although Views is powerful, it is too complex for many users. For this reason, Node Gallery remains very popular.
So we’ve realized that it’s time for an updated tutorial that covers Node Gallery in Drupal 7.
Node Gallery is still the easiest way to build a photo gallery in Drupal. It requires very little set-up and almost no configuration.
Create a Gallery
- Install the Node Gallery module (it does require some extra modules also)
- Go to Add Content > Gallery
- Choose a Gallery Name
- Click Save
- Click Upload New Items
- You’ll be able to upload your images one-by-one, setting a Title, Caption and choosing an image:
Here’s how your images will appear by default:
- You can re-arrange and manage the photos from the tabs at the top of the gallery:
Extra Options #1. Modifying the gallery layout
Node Gallery doesn’t need Views, but if you install it you will be able to edit your Node Gallery layouts:
Extra Options #2. Multiple image uploads
If you want to upload multiple images at once, try following our Plupload tutorial.
Extra Options #3. Images inside a lightbox
If you want to have your images pop-up in lightbox, we recommend Colorbox.
First, follow this tutorial to get Colorbox installed.
Next, the settings to integrate Colorbox and Node Gallery are a little tricky, so follow along:
- Structure > File types > Image > manage file display
- Click the Node Gallery FIle Thumbnail tab
- Check the Colorbox box
- Scroll down to the bottom of the screen, and set “Content image style” to “node_gallery_thumbnail”
- Save those settings.
- Go back to your gallery and the images will be inside a pop-up:
Hello there.
This is working quite well for me, but can somebody please advise me how to have ‘next image’ arrows appearing on the Colorbox images so the next picture in the gallery appears in a Colorbox?
It’s not user-friendly to have to click outside the Colorbox to close the image then select the next.
Thanks.
This answer I found on [url=http://drupal.stackexchange.com/questions/111913/node-gallery-lightbox]http://drupal.stackexchange…[/url] worked for me:
go to Admin->Structure->FileTypes->Image [Manage File Display]
Select Node Gallery File Thumbnail , select Per page gallery in the Gallery (image grouping) dropdown. Then Save Configuration.
Thanks, Erik. That sort-of works. I’m taken to the next image when I click the current one, but there are no arrows beside the images and only a ‘hand/finger’ cursor icon to let me know that I can click.
What I’m really after is < Previous and > Next arrows either side of the images which I have seen on other sites. Perhaps not in Drupal, though.
On we go….. more research. 😉
This is a simple an good way to create images gallery.
Unfortunately, I don’t understand how to integrate pupload to the items upload.
I cant change the “gallery media” field in the “Gallery item” content type to use pupload widget because it is not an image field but a file field type.
I installed Plupload integration module too, as required at the top of the “upload new items” tab (“To enable seamless bulk image uploading please install the plupload integration module”) but if i do so, the tab is blank !
I created a new image type field in “gallery item” content type (with plupload widget) but if i load multiple file, i have multiple file in one item and not separates items.
Is anybody know how to do ?
Thanx
Followed the directions for colorbox integration, but colorbox doesn’t seem to be doing anything at all. the libraries files are there, the colorbox options in the image file type is there, but the display of the gallery is the same old original gallery.
Hello,
thank you for the very useful article!
One question: what do I need to do in order Colorbox shows all photos in a gallery? not only photos from current page?
All files relating to each module should be in each (individual) folder. It seems you’re missing the swipestripe-gallery folder all together, meaning that the class in fact does not exist (When you get this error, just check that the class exists somewhere in your install.
I so miss this in Drupal 9. It was a rock solid, simple image filing system that did everything I needed with no drama.
In D9, I can upload the image into the core module but the oh-so-simple open a display page and then right-click to get the URL or token for a quick and dirty insertion into document simply isn’t there or, if it is, no one seems to be able to find it.
Hey D7 – check out this module: https://www.drupal.org/project/media_entity_file_redirect
See if that helps.