Drupal-lovers

Who love to Drupal

Creating a Photo Gallery in Drupal 6

Posted by drupallovers on March 30, 2012

This tutorial will show you how to create a photo gallery in Drupal 6.

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

You will need to install and enable at least the five modules listed below. Several of these do depend on other modules so your final list of installed modules will be longer.

Step 1: Create a content type

tutuploadsmedia_1319216976361_1f2fe1c78e0920de1ea5ba7a5ff8f583.png

Go to Administer > Content types > Add content type

tutuploadsmedia_1319217177397_844bbc12d125fb9fad4865972d717676.png

Create a new content type called Photo Gallery.

Step 2: Add a Photo Field

tutuploadsmedia_1319217290277_b01fda4505f98c5957126e6f8e0212c7.png

Click Manage fields next to Photo Gallery and we’re going to add a photo field.

  • Label: Photo
  • Field name: photo
  • Type of data: File
  • Form element: Image

Click Save twice to create the field.

Step 3: Upload the photos

tutuploadsmedia_1319217497427_5ac7feb4089391f3506882690d31a23d.png

Go to Create content > Photo Gallery and upload the photos you would like in your gallery. Each photo will be it’s content item.

Go ahead and upload at least four photos so that we have something to work with.

Step 4: Creating the View

Go to Site building > Simple views > Add view.

tutuploadsmedia_1319218260634_19f84ecf8319f259206e523973e53756.png

Enter the following settings:

  • Title: Dog Photo Gallery
  • Path: dog-photo-gallery
  • Display: Photo Gallery posts
  • Sorted: Newest first
  • As a: List of titles

Click Submit when you’ve finished.

Step 6: Improving the view

Go to Site building > Views > click on Edit next to your new view which will be called simpleviews_1 if this is your first time using Simple Views.

Make sure to click Page on the left-hand side as in the image below:

tutuploadsmedia_1319219922899_c90800417f2a421f501fddb7d7253d0a.png
Click on HTML List under Basic settings:
tutuploadsmedia_1319218867382_d2a2115530d9f4f03e17a7b0a6cfaa82.png
Choose Grid and click Update:
tutuploadsmedia_1319218798006_455e520b2212a6c60f10fe3448242ed7.png

Set the number of columns to 2 on the next page.

Now we’re going to add the photo and caption. Click the plus icon next to Fields:

tutuploadsmedia_1319218909521_51aa7c428a60eee55535af00ed09c655.png
Check the box next to Content: Photo.
tutuploadsmedia_1319218931915_275905a89c24ca0c3602dc22130c4e90.png

Click Add.

Set Label to None and set Format to Image:

tutuploadsmedia_1319218966333_ba86a5516d6eb715adb41eb81b8ddf75.png

Click Update.

Click the plus icon next to Fields once more.

Check the box next to Node: Body.

tutuploadsmedia_1319218991684_5d105ec5860ec528cd391fac1c66b679.png

Click Add then you’ll see a Label field. Remove the text in that field.

tutuploadsmedia_1319220198814_8b493852ff1d099fbef6f2b14ba537c4.png

Click Update.

Click Save at the bottom of the page make sure your changes aren’t lost.

Click View “Page” in the top-right corner to visit your Photo Gallery. It will look like the image below:

tutuploadsmedia_1319219304319_b7b14308967e3c95966034d338606b50.png

Those photos are clearly too big. We’ll need to fix them. That is why we also have the ImageCache module installed …

Step 6: Resizing the images

 

tutuploadsmedia_1319219530623_e9e13617c7e31b8f07b88544ff811a83.png

Click Add Resize enter the maximum height and width that you would like for the images on the main page of the photo gallery.

300 pixels wide and high might be a good choice to start with.

tutuploadsmedia_1319220329218_05016b22ae1d2a43978a5e1b32f0bfe6.png

Go to Site building > Views > click on Edit next to your new view. Make sure you click Page on the left-hand side.

tutuploadsmedia_1319220125486_780a5d79bb67e03e7753a378271fd8f4.png
tutuploadsmedia_1319220154418_e5c4c97fb0df0c4ca3d4e1d12b4eb674.png

Click Save and visit your Photo Gallery. It will now look like the image below:

tutuploadsmedia_1319220412413_f200f43eba07c6afe4d99a2c20450d83.png

Step 8: Resizing the individual images

You can also create presets for individual photos so that they will not go over the edge of the page, no matter how big they are.

Go to Site building > ImageCache > Add new preset.

Create a new preset called individual photo.

Click Add Scale and set both the width to 700. That means that no photos will be wider than 700 pixels but they can be as high as necessary.

Click Save Preset.

Go to Content management > Content types > manage fields next to Photo Gallery > click Display fields at the top of the page.

Click on the Full node dropdown and choose the individual photo image that you just created. That will apply the 700 pixels maximum width to all of the photos when they are shown individually.

Click Save.

tutuploadsmedia_1319220882379_55226e993b028c7df3dead2670614758.png

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: