A Dynamic Slideshow with CCK & Views
If the featured content in your slideshow needs to be updates frequently, you should consider building a dynamic set-up rather than the more static approach that is explored in this tutorial. If you have bought a premium theme that comes with the SOOPER FeatureKit, a demo site is included with an example setup of this dynamic slideshow.
End result of this tutorial:
- We will we have an ImageField on a nodetype so that we can easily upload slide images to go with our featured content.
- We will have added a checkbox to a nodetype to allow us to mark nodes as featured.
- We will have a Views block that loads the 4 most recent story nodes that were marked as "featured".
Modules Used
Step 1: Installing the modules
Download the modules to your modules folder (probably /sites/all/modules) and enable them. For more information about installing contributed modules please refer to the drupal handbook: Installing contributed modules
Step 2: Adding a "featured" switch to the story node
Similar to the way Drupal allows you set "promoted to frontpage" and "sticky at top of lists" we're adding a checkbox to set a node as "Featured".
- Using admin menu navigate to the following link: "Content Management > Content Types > Edit Story > Manage fields".
-
Fill in the fields for a new integer field using the values in the following image and click the save button at the bottom of the page:
- On the next page fill in a description, for example:
"Check this off to feature this node in the SOOPER FeatureKit slideshow". Further down in the allowed values textarea you enter in the following lines:0|Feature This 1|Feature This
Lastly, you hit the save button at the bottom.
Step 3: Adding an ImageField to the story node
- Again, using admin menu navigate to the following link: "Content Management > Content Types > Edit Story > Manage fields".
-
Fill in the fields for a new imagefield using the values in the following image and click the save button at the bottom of the page:
- On the next page just you can leave the default settings and skip to the save button at the bottom
Step 4: Hiding the slideshow content from regular node views
We don't want the slideshow image and the featured checkbox data to show up on the frontpage and on the node pages, we need to hide them.
- Using admin menu navigate to the following link: "Content Management > Content Types > Edit Story > Display fields".
- Check all 4 "Exclude" boxes in the ImageField and "feature this" rows.
Step 4: Creating a Block View
For the unexperienced, this is the tricky part of this tutorial. The Views interface is intimidating to new users and it takes some effort to figure out. You can get help information from Views itself through the Advanced Help Module.
- Using admin menu, go to "Site building > Views > Add"
- At the basic settings panel, select the following options:
Style: HTML List Items to Display: 4
- At the sort criteria panel, add the "Node: Post date" option and set it to "descending".
- At the filters panel, set the following options:
Node Published: Yes Node Type: Story Content Feature: Not Empty
- At the fields panel select the following options:
Content: image Image (formate: image, label: none) Node: Title Node: Teaser Node: Link (set a display text, such as "Read More")
- From the top left selectbox, add a Block View display
In the end, your Views interface should look similar to this:
Step 6: Activating the slideshow
This is the last step in the process and don't worry, it's also the easiest. To save the block, click the "Save" button at the bottom of the block form". Now you're taken to the block overview, where we can active the block.
The block is at the bottom of the block overview page, with the other disabled blocks. The block is activated simply by selecting the "slideshow" region from the selectbox, clicking the "Save blocks" button at the bottom of the page.
Now you can start adding story nodes and when you mark them as featured, they will show up in the slideshow. Remember that the nodes need to be published as well, in order to show.




Comments
Submitted by ruben.vancanneyt on Fri, 01/29/2010 - 12:09
I followed the instructions but on my page, the labels are place in front of the title, teaser and link. How can I remove those?
Submitted by JurriaanRoelofs on Tue, 02/02/2010 - 12:19
I think in the fields box you can click on the specific fields links and then below choose to not display a label.
Submitted by Anonymous on Tue, 02/23/2010 - 19:10
If the contents didn't show up, it may be due to the permission setting not enable.
Just go to User Management > Permission to check the respective image, data fields so anonymous user & authenticated user will be able to see them.
Submitted by JurriaanRoelofs on Wed, 02/24/2010 - 00:10
Yes, thanks anonymous. This might indeed be the problem if you're using imagecache and/or imagefield (CCK) or some other module to manage your images.
Submitted by dominggus on Mon, 03/15/2010 - 08:51
Hi,
I have followed the above instructions as well as add permission to the image field but still unable to show the image.
Is there something I missed here? Your help is appreciated. Thanks...
Submitted by JurriaanRoelofs on Tue, 03/16/2010 - 16:11
If you're unable to resolve it you may email me via the contact page and I'll have a look at your problem.
Submitted by info@hooox.com on Wed, 03/24/2010 - 17:48
Hi,
I followed the tutorial but images, titles and teasers are shown above each other in the slideshow space and there is no sliding effect and no slide button.
Submitted by info@hooox.com on Thu, 03/25/2010 - 10:23
in "view", in the "html list" style, you have to click on settings and choose "unordered" (mine was in "ordered")
=> unordered give "ul" html tags (ordered give "ol")
Submitted by pathikshah on Tue, 09/28/2010 - 07:46
I have followed all the steps till Hiding the slide show content from regular node views. Coming to the views, I don't find Style: HTML List and parameter to set:
Items to Display: 4
Where am I wrong? Please let me know.