HandsOn Gallery View

We now have the process for uploading an image pretty much finished, and display of individual photos isn't looking too bad either. The shortcoming of our site right now is the display of thumbnailed images on a single page. It would be preferable if the images were laid out in a grid-like fashion, allowing many images to be displayed in a small area. To accomplish this task, we can set up a view using the Views module. When complete, this section will look as pictured in Figure 7-23.

Figure 7-23. Completed gallery view

1. Go to at AdministersSite buildings-Modules (admin/build/modules) and enable the following:

—Advanced Help

2. Go to the Views administration page at AdministersSite buildings Views (admin/ build/views). Click the Add tab at the top of the page to make a new view. Create a new view using the settings from Table 7-11.

Table 7-11. Basic Information for the gallery view

Field Value

View name gallery

View description A gallery display of images

Field Value

View type Node

3. Configure the Basic settings of the new view using the information from Table 7-12. Table 7-12. Page settings for the gallery view

Defaults: Basic settings Value Title Galleries

Style Style: Grid

Number of columns: 4 Alignment: Vertical Use pager Full pager

Items per page 20

More link Create more link: Checked

Empty Text No photos yet!

4. Find the Fields section of the view, click the + (plus) icon, check the "Content: Image: Image (field_photo)" field and click Add. Configure the field with the settings in Table 7-13 and click Update.

Table 7-13. Default fields for the gallery view Defaults: Fields Values

Content: Image: Image (field_photo) Format: thumbnail image linked to node

Label: None

5. Because we want only published photos to show up in our listings, we'll add a few filters to the view. Click the + (plus) icon in the Filters sections, check the following filters, and click Add:

• Taxonomy: Vocabulary

6. Configure the fields using the information from Table 7-14, clicking Update to move between configuration forms.

Table 7-14. Default filters for the gallery view Defaults: Filters Value Node: Published Check "Published"

Node: Type Is one of "Photo"

Taxonomy: Vocabulary Is one of "Gallery"

7. To put the photos in some kind of order, we'll list the newest photos first. Click the + (plus) icon in the "Sort criteria" section and add "Node: Post date."

8. When finished, the View should look as pictured in Figure 7-24. Click the Save button to save your view.

Figure 7-24. Gallery view settings

This completes the setup of the default display for our gallery view. Click the Live Preview at the bottom of the view configuration page—your view should appear similar to Figure 7-25.

Figure 7-25. A preview of the grid-style image gallery

However, this view is currently not visible anywhere on the site, and none of the photos are categorized by their gallery names. To correct both of these problems, we'll add a new page display to the view:

1. If you've left the configuration for the view, return to Administers Site buildingsViews (admin/build/views) and click Edit on the "gallery" view.

2. Select Page from the list of display types on the left side of the interface and click the "Add display" button.

3. Give our new page a URL and menu item by configuring the page settings for the new display. Find the "Page settings" area and enter the settings from Table 7-15.

Table 7-15. Page settings for the gallery view Page: Page settings Values Path gallery

Menu Type: Normal menu entry

Title: Galleries

4. To display the photos in a particular gallery, our page view is going to use an argument. Click the + (plus) icon in the Argument section, check Taxonomy Term ID, and click Save. Use the configuration from Table 7-16 to configure the new argument, and click Update.

Table 7-16. Argument settings for the gallery view Page: Arguments Values Taxonomy: Term ID Title: %1

Action to take if argument is not present: Summary, sorted ascending Validator: Taxonomy term Vocabularies: Gallery

Set the breadcrumb for the term parents: Checked

5. You will be prompted to configure the various options. Click Update to choose the default settings.

6. When finished, the view configuration screen should look as pictured in Figure 7-26. Notice that the settings inherited from the Defaults display are italicized and grayed out. The overridden values for the Page display show unitalicized.

7. Click the Save button at the bottom of the form to save your view.

After building your view, you should notice a new item in your navigation for "Galleries." Go to this page (Galleries) to see your new Photo gallery! Make sure there are at least a few photos uploaded, and you'll have a page like that shown in Figure 7-27.

Figure 7-26. The Page display of the gallery view
Figure 7-27. The summary view of our gallery

This is the "Summary" version of our gallery. This is displayed when we visit the gallery URL directly, with no further arguments in the URL. Clicking on one of the galleries in the list will take you to a URL at gallery/(term id), where (term id) is the term for a gallery that we set up in our Gallery vocabulary.

Once a given gallery is chosen, you should see a page much like Figure 7-23 at the beginning of this section. The title on the page "Barcelona vacation" is pulled from the taxonomy term we're currently viewing, courtesy of the %1 value we set up in Table 7-16 for the Arguments section of the gallery view.

0 0

Post a comment