Creating a Photo Gallery in Drupal 7

tutuploadsmedia_1331060256061.png

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:

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.

tutuploadsmedia_1331060256061.png

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.

tutuploadsmedia_1331060521185.png

Step 4: Upload the photos

There’s a variety of ways to to upload enough photos to fill a photo gallery.

tutuploadsmedia_1331060694984.png

Step 5: Create the View

Go to Structure > Views > Add new view and let’s set up the view:

  1. Give your view a name such as Photo Gallery.
  2. Choose to show Content of type Photos.
  3. Check the create a page box.
  4. Choose the Grid display format and choose fields.
  5. Choose a number that will work well in a grid: 12 is the example used here.
tutuploadsmedia_1331060923047.png

Click Continue & edit.
Scroll down and you’ll see a preview of your photo gallery. The only thing missing? Photos.

tutuploadsmedia_1331060942549.png

Step 6: Improve the View

Let’s go and add the photo to our view. Click add next to Fields.

tutuploadsmedia_1331060960346.png

Search for and select the photos field that you created earlier.

tutuploadsmedia_1331062354345.png

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.

tutuploadsmedia_1331061075586.png

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.

tutuploadsmedia_1331061159450.png

You’ll now see a preview of the image resizing. Currently nothing is happening.

tutuploadsmedia_1331061180084.png
  • At the bottom of the page, choose Scale and crop.
  • Click Add.

tutuploadsmedia_1331062529803.png

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.

tutuploadsmedia_1331061232609.png

You’ll now see a fresh preview of the image resizing.

tutuploadsmedia_1331061251914.png

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).

tutuploadsmedia_1331061400126.png

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.

tutuploadsmedia_1331061620284.png

Author

  • Steve Burge

    Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

0 0 votes
Article Rating
Subscribe
Notify of
39 Comments
Oldest
Newest
Inline Feedbacks
View all comments
jaroslav
jaroslav
11 years ago

Finally, clear and simple. Thanks, man:)

Maaaarius
Maaaarius
11 years ago

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.

rakib
rakib
11 years ago

thats seems sound but after choosing Grid format add field button get disappear. any idea?

Oliver
Oliver
11 years ago

@rakib Try this: In your view check that Format > Show is not set to ‘content’. Probably want ‘fields’.

Devesh
Devesh
11 years ago

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.

Thanks

Muhamed Auda
Muhamed Auda
11 years ago

nice realy nice

good

many thanks

william mulholland
william mulholland
11 years ago

Brilliant!! You just saved me a day of research!

Andreas
Andreas
11 years ago

Very useful, indeed.

Just one question: I didn’t find a way to display the filename along with the image.

Any ideas?

Avitohol
Avitohol
11 years ago

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.

Marco uffa
Marco uffa
11 years ago

very good tutorial…

understand view and other things..

very thanks!

Rishabh
Rishabh
11 years ago

Thanks..

It was nice.

I want to add lightbox in grid view how it possible. Anyone can help me.

titta
titta
11 years ago

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.

Byron
Byron
11 years ago

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

Totora
Totora
11 years ago

Nice!

Finally a clear and simple Drupal tutorial… it’s not easy to find them!

Thanks a lot!!

Katja
Katja
11 years ago

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?

rohit
rohit
10 years ago

how to make everyimage as a url

Sam
Sam
10 years ago

Lol, great to see ‘Titanic II’ in there. Possibly the worst movie of all time!

YMVPS.COM
YMVPS.COM
10 years ago

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.

savitri
savitri
10 years ago

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. :’)

ibrahim
ibrahim
10 years ago

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.

thanks,

Niks
Niks
10 years ago

Is there any way to add a short description to each image in the gallery. ??

PsychWardResident
PsychWardResident
10 years ago

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.

steve
steve
10 years ago

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.

PsychWardResident
PsychWardResident
10 years ago
Reply to  steve

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.

Hector
Hector
10 years ago

Great tutorial! My gallery works like a charm!

nithee
nithee
10 years ago

clear and simple, but photos coming downward. how to float image ?

Solja Itstrue
Solja Itstrue
9 years ago

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.

wreckage
9 years ago

Hello there.
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.

pepperstreet
9 years ago
Reply to  Slartibartfast

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.

Janet Lingel Aldrich
Janet Lingel Aldrich
8 years ago

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?

jitinkajla
jitinkajla
7 years ago

Sir please tell me that how do i display the text on top or below the image as you have done above..?

daniel-pickering
7 years ago
Reply to  jitinkajla

Step 6
You need to add the field you want to display and arrange it in the order you want it to appear.

Shahid
Shahid
7 years ago

Hi Steve,

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.
Thanks

Shahid

daniel-pickering
7 years ago
Reply to  Shahid

Hi Shahid,
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.

Denis
Denis
7 years ago

Hi there,

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

Thanks

Denis

steve
steve
7 years ago
Reply to  Denis

Denis, yes, you need contextual filters [url=https://www.ostraining.com/class/contextual-views/]https://www.ostraining.com/…[/url]

Denis Rioux
Denis Rioux
7 years ago
Reply to  steve

Thanks Steve! I got it working once I figured it out 🙂

Grafik Designer
Grafik Designer
6 years ago

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

Nick
6 years ago

Glad we could help, Grafik!

39
0
Would love your thoughts, please comment.x
()
x