Creating a Photo Gallery in Drupal 7
This tutorial will show you how to create a photo gallery in Drupal 7.
It won’t create the world’s flashiest or most impressive gallery, but it will work. This tutorial is designed for beginners so that they can understand the key concepts behind creating a gallery in Drupal 7.
If you’re still using Drupal 6, we have a tutorial for you also.
Step 1: Install modules
You will need to install and enable the only modules listed below:
- CTools: http://drupal.org/project/ctools
- Views: http://drupal.org/project/views
Step 2: Create a content type
First, we’re going to set up a photos content type. Go to Structure > Content types > Add content type and create a new content type to use for the photo gallery.
Step 3: Add a Photo Field
Now we’re going to add an image field to our new content type so that we can actually upload photos. Go to Manage Fields and create a field using the Image data type.
Step 4: Upload the photos
There’s a variety of ways to to upload enough photos to fill a photo gallery.
- You can go to Add content > photos and upload them all manually.
- You can use the Devel module to automatically generate images: http://drupal.org/project/devel.
- You can use one of Drupal’s import modules such as Feeds: http://drupal.org/project/feeds.
Step 5: Create the View
Go to Structure > Views > Add new view and let’s set up the view:
- Give your view a name such as Photo Gallery.
- Choose to show Content of type Photos.
- Check the create a page box.
- Choose the Grid display format and choose fields.
- Choose a number that will work well in a grid: 12 is the example used here.
Click Continue & edit.
Scroll down and you’ll see a preview of your photo gallery. The only thing missing? Photos.
Step 6: Improve the View
Let’s go and add the photo to our view. Click add next to Fields.
Search for and select the photos field that you created earlier.
Click Apply (all displays) twice. Now your preview at the bottom of the page will look like the image below. The only thing wrong now is that the images are all different sizes.
Step 7: Resizing the Images
Drupal comes with a way to automatically resize images. Let’s see how.
- Go to Configuration > Image styles > Add style.
- Enter a name of your new resizing option.
- Click Create new style.
You’ll now see a preview of the image resizing. Currently nothing is happening.
- At the bottom of the page, choose Scale and crop.
- Click Add.
Choose how wide and high the photos will be. In our example we have four photos across the page, so we’ll choose a width that will allow us to fit four photos in. Click Add effect to finish.
You’ll now see a fresh preview of the image resizing.
Now let’s go and apply the resizing to our photos.
- Go to Structure > Views > Photo Gallery > edit.
- Click Settings next to your photos field. You can now go to Image style and choose the style that you just created.
- You might also want to uncheck the Create a label box so that the field name doesn’t show.
- Click Apply (all displays).
Click Save to finish your view and go to visit it on the front end of your site. Voila! Your Drupal 7 photo gallery is complete.
Finally, clear and simple. Thanks, man:)
Nice to see a clear, clean and simple example of how to make a gallery using just a few modules. Still, the only way I can make things work is if I use the default image uploader that comes with Drupal. If I use IMCE or manually upload the images using FTP, I’m not getting the thumbnails to show, even when I know they’re in the right folder. Maybe the problem is in the way IMCE adds the images, or the HTML code displaying them. The image itself in the post shows fine, but not the thumbnail in the gallery page. I only get links to the original image in my gallery.
Anyway, thanks for a great tutorial.
thats seems sound but after choosing Grid format add field button get disappear. any idea?
@rakib Try this: In your view check that Format > Show is not set to ‘content’. Probably want ‘fields’.
Its very nice post, really really helpful.
thanks a lot for the post.
I wanted to have a jQuery image galley, could you plz help me for that.
nice realy nice
Brilliant!! You just saved me a day of research!
Very useful, indeed.
Just one question: I didn’t find a way to display the filename along with the image.
Very good description. The gallery is still simpe though.
I need to have multiple galleries, or categories, or nested galleries (whatever you like to call it) like galleries for the different years (2010, 2011, 2012….) with subgalleries for the different months and then the photos.
very good tutorial…
understand view and other things..
It was nice.
I want to add lightbox in grid view how it possible. Anyone can help me.
Very good tutorial.
Any suggestion for create a view page with different photo dimension to overwrite the grid layout as in [url=http://magazine.foxnews.com/]http://magazine.foxnews.com/[/url] where the grid doesn’t appears?
Thanks in advance.
I followed instructions to set up gallery. Now that I am adding photos I do not see those photos on my gallery wall. All I see is the image I uploaded during instructions that suppose to show when there are no photos
Finally a clear and simple Drupal tutorial… it’s not easy to find them!
Thanks a lot!!
Hey. I have followed your awesome tutorial. And i have been able to get a kind of a gallery with 6 images but the pictures are been placed to the right side instead of in the middle. How do i fix this?
how to make everyimage as a url
Lol, great to see ‘Titanic II’ in there. Possibly the worst movie of all time!
I have tried 2 times,these images on homepage still the origin size,and on step 6 finished,it”s same like your shows.I don’t know where i’m wrong.
Thankyou for ur tutorial, but i have followed all steps. But idk how to show the page “my gallery photo”. Is it about the block?
And yes, how to add other efect that use JQuery or CSS.
Please reply me 🙁
Thankyou so much. :’)
thanks for article. i want to learn about how can we change backgroud color from lightgray to white. i try to find but not yet. can we make this “rewrite results” property of views? or we find total views and change it background-color…
any comment make me help.
Is there any way to add a short description to each image in the gallery. ??
How does on get by the limit of file size when uploading photos to content in Drupal? Limited to 2 MB files is not conducive to sharing the quality of photos of today’s cameras.
2 MB is often a limitation imposed by your hosting setup, rather than by Drupal. However, do check the photo field settings in Step 3.
Thanks for the response. Considering the age of the thread I did not expect to do anything but vent my frustrations!! lol I am actually working on a site on my local machine using Acquia Dev Desktop at the moment. It is my first real project though. So I have a lot of learning to do.
Yes, I created a new content type. I added the image field as well as tags and term reference. I set the image size limit to various sizes including 5 & 10 MB. Regardless, when I selected an image that was within those parameters it failed saying the file was over 2 MB.
Great tutorial! My gallery works like a charm!
clear and simple, but photos coming downward. how to float image ?
Everything was going along smooth until it was time to upload a photo. There is no “Photos” under “Add Content” in number 4. I surely missed something important. lol Anyone have an idea? I have a blank page.
I have a problem with the View. I’ve followed the tutorial faithfully (after working out the missing bits), and I don’t know whether it has anything to do with having IMCE and CKEditor installed, but my gallery is not formatting correctly.
My photos are aligned vertically and left (one under the other).
I have set my grid to have 4 columns and align horizontally, and indeed the preview at Structure > Views > edit displays the grid correctly.
However when I Save and close the admin. overlay, the View is displaying the images vertically. From there, when the ‘edit’ tab is clicked and the ‘Preview’ button is clicked at the bottom of the overlay, the images show to be aligned vertically, as in the real page View. I’ve checked everything I can think of but can’t find a solution. It’s not that I want to use this method of making a gallery, but I’m trying to learn as much about Drupal and how to trouble-shoot problems as much as possible. If you have any suggestions I’d be grateful.
I’ve also tried to add Plupload but it doesn’t work from the edit View, Browse and Upload interface. Would you have any ideas on that? I’m using Acquia Desktop and have the Plupload library (1.5.8) installed. I have deleted the ‘examples’ folder as advised, installed the Plupload Integration module and also the IMCE_Plupload module which is supposed to integrate plupload into the IMCE file browser. Does that mean that it won’t work using the ‘Browse and Upload’ buttons from the View edit overlay?
Thanks in advance.
Did you check your final markup/code output? Most likely this is just a CSS/formatting issue. Maybe your site template CSS is responsible for the vertical layout.
That worked really well. Now, I need a way to create a list of galleries that keeps upgrading itself when someone adds a new gallery to this site. Any ideas or suggestions?
Sir please tell me that how do i display the text on top or below the image as you have done above..?
You need to add the field you want to display and arrange it in the order you want it to appear.
I am in a trouble and can’t being able to find and fix the problem even testing lot of hacks and image styles.
What i want, I have images of very large dimensions and my client want to scale those images to 360 by 240,
When i apply those styles then images are being cropped from top and bottom and my client want a whole image to be resized in that small box.
So can you help me here by creating a suitable image style.
Looking forward to hear from you and waiting for your response.
Image scaling can always be an issue I would recommend you scale them yourself with an image tool to ensure they are the correct size and nothing is cropped of by accident.
I would like to know if there is a way to setup a VIEW (photo gallery like above) but it would filter the photos according to the site/page that you’re looking at? We have multiple photo albums on our sites which has been setup with Colorbox. The pictures are all on a vertical list (1 column) and we want to change the look. I was asked to try to use the VIEWS feature to improve the photo albums’ look.
Is there an easy way to do this without installing modules? As this would be a last resort.
Let me know
Denis, yes, you need contextual filters [url=https://www.ostraining.com/class/contextual-views/]https://www.ostraining.com/…[/url]
Thanks Steve! I got it working once I figured it out 🙂
I agree !!! finally i could publish this gallery i tried several tutorials about 20 and this one really help me to solve it ! in a clear way . Thanks a lot for your work
Glad we could help, Grafik!