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
Go to Administer > Content types > Add content type
Create a new content type called Photo Gallery.
Step 2: Add a Photo Field
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
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.
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:
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:
Click Add.
Set Label to None and set Format to Image:
Click Update.
Click the plus icon next to Fields once more.
Check the box next to Node: Body.
Click Add then you'll see a Label field. Remove the text in that field.
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:
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
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.
Go to Site building > Views > click on Edit next to your new view. Make sure you click Page on the left-hand side.
Click Save and visit your Photo Gallery. It will now look like the image below:
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.
