Making a page with Views

magnifier screenshot

Now that I've got Views giving me a list of links to Magnifier nodes that I've put into a Block on the home page, I think I want to have Views make a page as well. The Block just lists the Titles but the page can be richer... a thunbnail of the image, the title, and a teaser, as shown in the screenshot. (Note: this can be done by utilizing the Taxonomy system, but like many things in Drupal, there's many ways to skin the cat!

So let's head back to Views. If you're logged in as user/1 you can go to the View quickly by clicking on the little Edit linkk that pops up when you mouse over the Block.

Let's take this step by step. (This calls for an ordered list.)

  1. On the page "Edit view mag_view", add a Page display.
  2. Under Basic Settings, click on the word "none" after the word Title, and give it a title like "Magnifier Gallery". (IMPORTANT: in this and all subsequent steps, you want to OVERRIDE the default view - which you do by clicking the "Override" button. That way these settings will apply only to our Page View, and won't affect our original Block View.)
  3. Under Page Settings, click the word "none" after Path, and name the path magnify. This is the URL that goes to our new page. (No override for this one, since Path doesn't apply to Block Views.)
  4. Next, click the plus sign next to fields and add the fields for the image and the description. The Node Title field should already be in there from the Block. (Specifically, click the checkbox next to "Content: Image (field_img5) File - Appears in: Magnifier" and "Content: Description (field_desc5) Text - Appears in: Magnifier". These are the name I gave them when I created the fields in the Content type.) For the image choose no label and the format "pic180 linked to node". (You may need to create this image setting in Image Cache.) By clicking on the arrows icon next to Fields, you will get an interface that will let you set their order. The order I chose was image, title, description.
  5. Check the Preview at the bottom of the page and you will see it's ready!

Now go to the page using the path you set earlier. (i.e. .../magnifier.) It didn't look exactly like I wanted to so I edited my stylesheet. (Here is the first secret of Drupal: you put your custom theme in /sites/all/themes/. And inside your custom theme folder you put style.css.)

Here is the styling I added:


/* Styles for magnifier listing page */

body.page-magnifier #main-holder h1.title {
  background-color: #eee;
  margin-bottom: 12px;
}

body.page-magnifier #main-holder div.views-field-field-img5-fid  {
  float: left;
  margin-right: 18px;
  margin-bottom: 12px;
}

body.page-magnifier #main-holder div.views-field-title  {
  font-size: 1.2em;
  margin-bottom: 12px;
}

body.page-magnifier #main-holder div.views-field-field-desc5-value  {
  color: #888;
}

body.page-magnifier #main-holder div.views-row  {
  overflow: hidden;
  clear: both;
}

Note that the css selectors are quite specific - I just use the ids and classes that Drupal gives me. Basically all I have done is float the image to the left and adjust the sizes of the title and text. The last little bit uncollapses the divs that contain each row and keeps everything from bumping into everything else.

Once again, things have gotten more complex and tangential than originally anticipated, but that's pretty much it.