[Summary view] [Print] [Text view]

   1  <style type="text/css">
   2    .advanced-help-topic img {
   3      border: 1px solid;
   4    }
   5  </style>
   6  <h3>How to Create a SingleFrame Slideshow of Page Nodes</h3>
   7  <p>
   8    This tutorial requires Views Slideshow and Views Slideshow Singleframe
   9    modules to be enabled. It also assumes you already have some page nodes.
  10  </p>
  11  
  12  <h4>Create the View</h4>
  13  <ol>
  14    <li>
  15      Go to http://yoursite.com/admin/build/views
  16    </li>
  17    <li>
  18      Click "Add"<br />
  19      <img src="&path&images/admin/build/views/add-link.png" />
  20    </li>
  21    <li>
  22      Enter in the view name. "slideshow"<br />
  23      <img src="&path&images/admin/build/views/add/view-name.png" />
  24    </li>
  25    <li>
  26      Click "Next"<br />
  27      <img src="&path&images/buttons/next.png" />
  28    </li>
  29    <li>
  30      Select the "page" display<br />
  31      <img src="&path&images/admin/build/views/edit/x/display-type.png" />
  32    </li>
  33    <li>
  34      Click "Add Display"<br />
  35      <img src="&path&images/buttons/add-display.png" />
  36    </li>
  37    <li>
  38      Click the + next to "Fields"<br />
  39      <img src="&path&images/admin/build/views/edit/x/fields-add.png" />
  40    </li>
  41    <li>
  42      Under "Groups" choose "Node"<br />
  43      <img src="&path&images/admin/build/views/edit/x/fields-groups-node.png" />
  44    </li>
  45    <li>
  46      Select "Node: Body" and "Node: Title"<br />
  47      <img src="&path&images/admin/build/views/edit/x/fields-node-body.png" /><br />
  48      <img src="&path&images/admin/build/views/edit/x/fields-node-title.png" />
  49    </li>
  50    <li>
  51      Click "Add"<br />
  52      <img src="&path&images/buttons/add.png" />
  53    </li>
  54    <li>
  55      Select "Trim this field to a maximum length"
  56    </li>
  57    <li>
  58      Under "Maximum length" enter 100<br />
  59      <img src="&path&images/admin/build/views/edit/x/fields-node-body-trim-maximum-length.png" />
  60    </li>
  61    <li>
  62      Click "Update Default Display" twice<br />
  63      <img src="&path&images/buttons/update-default-display.png" />
  64    </li>
  65    <li>
  66      Click the up/down arrows next to "Fields"<br />
  67      <img src="&path&images/admin/build/views/edit/x/fields-sort.png" />
  68    </li>
  69    <li>
  70      Move "Node: Title" to the top<br />
  71      <img src="&path&images/admin/build/views/edit/x/fields-sort-node-title-node-body.png" />
  72    </li>
  73    <li>
  74      Click "Update"<br />
  75      <img src="&path&images/buttons/update.png" />
  76    </li>
  77    <li>
  78      Click the + next to "Filters"<br />
  79      <img src="&path&images/admin/build/views/edit/x/filters-add.png" />
  80    </li>
  81    <li>
  82      Under "Groups" choose "Node"<br />
  83      <img src="&path&images/admin/build/views/edit/x/filters-groups-node.png" />
  84    </li>
  85    <li>
  86      Select "Node: Published" and "Node: Type"<br />
  87      <img src="&path&images/admin/build/views/edit/x/filters-published-type.png" />
  88    </li>
  89    <li>
  90      Click "Add"<br />
  91      <img src="&path&images/buttons/add.png" />
  92    </li>
  93    <li>
  94      Select "Yes" for published<br />
  95      <img src="&path&images/admin/build/views/edit/x/filters-published-yes.png" />
  96    </li>
  97    <li>
  98      Click "Update Default Display"<br />
  99      <img src="&path&images/buttons/update-default-display.png" />
 100    </li>
 101    <li>
 102      Under "Node Type" select "Page"<br />
 103      <img src="&path&images/admin/build/views/edit/x/filters-node-type-page.png" />
 104    </li>
 105    <li>
 106      Click "Update Default Display"<br />
 107      <img src="&path&images/buttons/update-default-display.png" />
 108    </li>
 109    <li>
 110      Click "None" next to "Path" under "Page settings"<br />
 111      <img src="&path&images/admin/build/views/edit/x/page-settings-path.png" />
 112    </li>
 113    <li>
 114      Add a path.  "slideshow"<br />
 115      <img src="&path&images/admin/build/views/edit/x/page-settings-path-page.png" />
 116    </li>
 117    <li>
 118      Click "Update"<br />
 119      <img src="&path&images/buttons/update.png" />
 120    </li>
 121    <li>
 122      Click "Save"<br />
 123      <img src="&path&images/buttons/save.png" />
 124    </li>
 125    <li>
 126      Click "View Page" and verify it is listing out the images correctly<br />
 127      <img src="&path&images/admin/build/views/edit/x/view-page-link.png" />
 128    </li>
 129  </ol>
 130  
 131  <h4>Set up the slideshow</h4>
 132  <ol>
 133    <li>
 134      Edit the View
 135    </li>
 136    <li>
 137      Under "Basic Settings" click "Unformatted" next to "Style".<br />
 138      <img src="&path&images/admin/build/views/edit/x/basic-settings-style.png" />
 139    </li>
 140    <li>
 141      Choose "Slideshow"<br />
 142      <img src="&path&images/admin/build/views/edit/x/basic-settings-style-slideshow.png" />
 143    </li>
 144    <li>
 145      Click "Update Default Display"<br />
 146      <img src="&path&images/buttons/update-default-display.png" />
 147    </li>
 148    <li>
 149      Under "Slideshow mode" choose "SingleFrame"<br />
 150      <img src="&path&images/admin/build/views/edit/x/basic-settings-style-slideshow-mode-singleframe.png" />
 151    </li>
 152    <li>
 153      Click "Update Default Display"<br />
 154      <img src="&path&images/buttons/update-default-display.png" />
 155    </li>
 156    <li>
 157      Click "Save"<br />
 158      <img src="&path&images/buttons/save.png" />
 159    </li>
 160    <li>
 161      View the page and verify the slideshow is working.<br />
 162      <img src="&path&images/admin/build/views/edit/x/view-page-link.png" />
 163    </li>
 164  </ol>