I must admit, it does not look like a nice image gallery. But now, we want to add a view that collects all images in this image gallery and displays a clickable thumbnail view of the images in this gallery below the body text.

So, go to admin/build/views/add and add a view named “gallery” (or any other name you like). Select “node” as the view type. Click “next”.

On the next complex page you configure the view. We will start with the construction of the SELECT statement:

First we want to define the relationships: Click on the plus-sign near “Relationships” and then check “Book: Parent”. Click “Add”.

Then we want to define the arguments for the view: Click on the plus-sign near “Arguments” and then check “Node: Nid” and click “Add”. Then select “Book parent” as relationship, Action to take if argument is not present: “display empty text”, “Node” as validator, “image gallery” as allowed types and “Node ID” as argument type. Click “Update”.

Now we define the field to display: Click on the plus-sign near “Fields” and check “Content: field_image” and click “Add”. Then select “Do not use a relationship”, Label: “none”, and as Format select the "small_quadrat image linked to node” (the preset you defined on the image cache configuration page). Click “Update”.

Then we define the sort sequence of the images: Click on the plus-sign near “Sort criteria”, check “Book: weight” and click “Add”. Then select “Do not use a relationship”, Sort order: “Ascending”. Click “Update”.

Last but not least we define Filters: Click on the plus-sign near “Filters” and check “Node: published” and “Node: type” and click “Add”. Select “Do not use relationship” for both criteria, Published: “Yes” for “Node: published”. For “Node: type” check Operator: “is one of” and Node type: “Image”. Do not forget to click “Update” for each criterion.

Now we will define the display mode of the selected data in section “Basic settings”:

Click the tag “Unformatted” near “Style” and select “HTML List” (you can also select “Grid” if you do not want to add extra css for displaying the thumbnail list. But Grid is fixed width, whereas the HTML List can be floating, see below). Then select Grouping field: “<None>” and List type: “unordered list”. Click “Update”.

Further select Use pager: “Mini”, Items per page: “50” (or any other number, as you like).

Now we can test the view: At the bottom of the page enter the node id of the gallery created before into Arguments: and press “Preview”. If you use Grid display style, you are ready now, if you use HTML List, you will see a vertical list of small quadrat images. We will style it in the next step.

If you are happy with the view, don't forget to click “Save” to save the view!

Comments

vegantriathlete’s picture

The steps above will set the defaults. You have not created a "Page" display type. On the next set of instructions you say to select gallery - Page, which will not be possible without the Page display type. You may only select gallery - Defaults.