[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 Images</h3>
   7  <p>
   8    This tutorial requires these modules to be enabled:
   9    <ul>
  10      <li><a href="http://drupal.org/project/views_slideshow">Views Slideshow and Views Slideshow Singleframe</a></li>
  11      <li><a href="http://drupal.org/project/cck">cck (content)</a></li>
  12      <li><a href="http://drupal.org/project/filefield">FileField</a></li>
  13      <li><a href="http://drupal.org/project/imagefield">ImageField</a></li>
  14    </ul>
  15  </p>
  16  
  17  <h4>Create the content type</h4>
  18  <ol>
  19    <li>
  20      Go to http://yoursite.com/admin/content/types
  21    </li>
  22    <li>
  23      Click "Add Content Type"<br />
  24      <img src="&path&images/admin/content/types/add-content-type-link.png" />
  25    </li>
  26    <li>
  27      Enter a name. "Slideshow Item"<br />
  28      <img src="&path&images/admin/content/node-type/x/name.png" />
  29    </li>
  30    <li>
  31      Enter a type. "slideshow_item"<br />
  32      <img src="&path&images/admin/content/node-type/x/type.png" />
  33    </li>
  34    <li>
  35      Click the "Submission form settings" fieldset<br />
  36      <img src="&path&images/admin/content/node-type/x/submission-form-settings-fieldset.png" />
  37    </li>
  38    <li>
  39      Clear the "Body" text from the "Body field label" field<br />
  40      <img src="&path&images/admin/content/node-type/x/body-field.png" />
  41    </li>
  42    <li>
  43      Click the "Workflow settings" fieldset<br />
  44      <img src="&path&images/admin/content/node-type/x/workflow-settings-fieldset.png" />
  45    </li>
  46    <li>
  47      Uncheck "Promote to frontpage"<br />
  48      <img src="&path&images/admin/content/node-type/x/promoted-front-page.png" />
  49    </li>
  50    <li>
  51      Click the "Comment settings" fieldset<br />
  52      <img src="&path&images/admin/content/node-type/x/comment-settings-fieldset.png" />
  53    </li>
  54    <li>
  55      Set "Default comment setting" to disabled<br />
  56      <img src="&path&images/admin/content/node-type/x/default-comment.png" />
  57    </li>
  58    <li>
  59      Click "Save Content Type"<br />
  60      <img src="&path&images/buttons/save-content-type.png" />
  61    </li>
  62    <li>
  63      Next to your new content type click "manage fields"<br />
  64      <img src="&path&images/admin/content/types/manage-fields-link-slideshow-item.png" />
  65    </li>
  66    <li>
  67      Under "New Field" enter a label. "Slideshow Image"
  68    </li>
  69    <li>
  70      Enter a field name. "field_slideshow_image"
  71    </li>
  72    <li>
  73      Select the "File" field type.
  74    </li>
  75    <li>
  76      Select the "Image" form element.<br />
  77      <img src="&path&images/admin/content/node-type/x/fields/field_slideshow_image/new-field-slideshow-image.png" />
  78    </li>
  79    <li>
  80      Drag the new field using the cross handle to below the "Title" field.<br />
  81      <img src="&path&images/admin/content/node-type/x/fields/field_slideshow_image/move-new-field-slideshow-image.png" />
  82    </li>
  83    <li>
  84      Click "Save"<br />
  85      <img src="&path&images/buttons/save.png" />
  86    </li>
  87    <li>
  88      Under "Global Settings" check "Required"<br />
  89      <img src="&path&images/admin/content/node-type/x/fields/x/check-required.png" />
  90    </li>
  91    <li>
  92      Click "Save field settings"<br />
  93      <img src="&path&images/buttons/save-field-settings.png" />
  94    </li>
  95    <li>
  96      Create some Slideshow Items
  97    </li>
  98  </ol>
  99  
 100  <h4>Create the View</h4>
 101  <ol>
 102    <li>
 103      Go to http://yoursite.com/admin/build/views
 104    </li>
 105    <li>
 106      Click "Add"<br />
 107      <img src="&path&images/admin/build/views/add-link.png" />
 108    </li>
 109    <li>
 110      Enter in the view name. "slideshow"<br />
 111      <img src="&path&images/admin/build/views/add/view-name.png" />
 112    </li>
 113    <li>
 114      Click "Next"<br />
 115      <img src="&path&images/buttons/next.png" />
 116    </li>
 117    <li>
 118      Select the page display<br />
 119      <img src="&path&images/admin/build/views/edit/x/display-type.png" />
 120    </li>
 121    <li>
 122      Click "Add Display"<br />
 123      <img src="&path&images/buttons/add-display.png" />
 124    </li>
 125    <li>
 126      Click the + next to "Fields"<br />
 127      <img src="&path&images/admin/build/views/edit/x/fields-add.png" />
 128    </li>
 129    <li>
 130      Under "Groups" choose "Content"<br />
 131      <img src="&path&images/admin/build/views/edit/x/fields-groups-content.png" />
 132    </li>
 133    <li>
 134      Select the image field you created. "Content: Slideshow Image"<br />
 135      <img src="&path&images/admin/build/views/edit/x/fields-content-slideshow-image.png" />
 136    </li>
 137    <li>
 138      Click "Add"<br />
 139      <img src="&path&images/buttons/add.png" />
 140    </li>
 141    <li>
 142      Under "Label" choose "None"<br />
 143      <img src="&path&images/admin/build/views/edit/x/fields-label-none.png" />
 144    </li>
 145    <li>
 146      Under "Format" choose "Image"<br />
 147      <img src="&path&images/admin/build/views/edit/x/fields-content-slideshow-image.png" />
 148    </li>
 149    <li>
 150      Click "Update Default Display"<br />
 151      <img src="&path&images/buttons/update-default-display.png" />
 152    </li>
 153    <li>
 154      Click the + next to "Filters"<br />
 155      <img src="&path&images/admin/build/views/edit/x/filters-add.png" />
 156    </li>
 157    <li>
 158      Under "Groups" choose "Node"<br />
 159      <img src="&path&images/admin/build/views/edit/x/filters-groups-node.png" />
 160    </li>
 161    <li>
 162      Select "Node: Published" and "Node: Type"<br />
 163      <img src="&path&images/admin/build/views/edit/x/filters-published-type.png" />
 164    </li>
 165    <li>
 166      Click "Add"<br />
 167      <img src="&path&images/buttons/add.png" />
 168    </li>
 169    <li>
 170      Select "Yes" for published<br />
 171      <img src="&path&images/admin/build/views/edit/x/filters-published-yes.png" />
 172    </li>
 173    <li>
 174      Click "Update Default Display"<br />
 175      <img src="&path&images/buttons/update-default-display.png" />
 176    </li>
 177    <li>
 178      Under "Node Type" select the content type you created "Slideshow Item"<br />
 179      <img src="&path&images/admin/build/views/edit/x/filters-node-type-slideshow-item.png" />
 180    </li>
 181    <li>
 182      Click "Update Default Display"<br />
 183      <img src="&path&images/buttons/update-default-display.png" />
 184    </li>
 185    <li>
 186      Click "None" next to "Path" under "Page settings"<br />
 187      <img src="&path&images/admin/build/views/edit/x/page-settings-path.png" />
 188    </li>
 189    <li>
 190      Add a path.  "slideshow"<br />
 191      <img src="&path&images/admin/build/views/edit/x/page-settings-path-page.png" />
 192    </li>
 193    <li>
 194      Click "Update"<br />
 195      <img src="&path&images/buttons/update.png" />
 196    </li>
 197    <li>
 198      Click "Save"<br />
 199      <img src="&path&images/buttons/save.png" />
 200    </li>
 201    <li>
 202      Click "View Page" and verify it is listing out the images correctly<br />
 203      <img src="&path&images/admin/build/views/edit/x/view-page-link.png" />
 204    </li>
 205  </ol>
 206  
 207  <h4>Set up the slideshow</h4>
 208  <ol>
 209    <li>
 210      Edit the View
 211    </li>
 212    <li>
 213      Under "Basic Settings" click "Unformatted" next to "Style".<br />
 214      <img src="&path&images/admin/build/views/edit/x/basic-settings-style.png" />
 215    </li>
 216    <li>
 217      Choose "Slideshow"<br />
 218      <img src="&path&images/admin/build/views/edit/x/basic-settings-style-slideshow.png" />
 219    </li>
 220    <li>
 221      Click "Update Default Display"<br />
 222      <img src="&path&images/buttons/update-default-display.png" />
 223    </li>
 224    <li>
 225      Under "Slideshow mode" choose "SingleFrame"<br />
 226      <img src="&path&images/admin/build/views/edit/x/basic-settings-style-slideshow-mode-singleframe.png" />
 227    </li>
 228    <li>
 229      Click "Update Default Display"<br />
 230      <img src="&path&images/buttons/update-default-display.png" />
 231    </li>
 232    <li>
 233      Click "Save"<br />
 234      <img src="&path&images/buttons/save.png" />
 235    </li>
 236    <li>
 237      View the page and verify the slideshow is working.<br />
 238      <img src="&path&images/admin/build/views/edit/x/view-page-link.png" />
 239    </li>
 240  </ol>