[title]
[body]
UPDATE: Since the posting of this article there has been dramatic improvements by the community and now this is no longer the best way to implement this feature. We now use the "Views Slideshow," found at: http://drupal.org/project/views_slideshow. We have used this method to create the various slideshows for the City of South Bend at www.SouthBendOn.com.
The first thing that needs to be done is to ensure that your Drupal 7 environment is set up to support the slideshow. The following Drupal 7 modules need to be installed:
The WYSIWYG module (http://drupal.org/project/wysiwyg) also can be installed to make editing the content easier, but it is not necessary.
In order to incorporate the slideshow into your theme you will need to reference some external resources in your theme.info
file. You will need to add a stylesheet that defines the UI and the JavaScript libraries necessary to make it work. First obtain the following jQuery libraries and place them in the "js" directory of your theme (or other directory that holds the themes external JavaScript files):
Once you have those files where they need to be, then create a new JavaScript file in the "js" directory. For the purpose of this article, we will name it utility.js
. In that file place the following code:
jQuery(document).ready(function() {
jQuery('.slides').cycle({
fx: 'fade',
speed: 500,
timeout: 6000,
pager: '.slidenav',
pagerEvent: 'click',
pauseOnPagerHover: true,
pause:true
})
});
Once those files have been placed where they need to go, add the following to your themes ".info" file (assuming the files are in the "js" directory):
scripts[] = js/jquery.cycle.all.min.js scripts[] = js/jquery.easing.1.3.js scripts[] = js/utility.js
Now that you have the necessary JavaScript linked, you need to define the visual appearance and structure of the slideshow. The following is in the file slides.css
that is located in my theme's css directory.
@charset "UTF-8";
/* CSS Document */
.slideshow-container {
height: 340px;
}
.slides {
width: 970px;
height: 340px;
overflow: hidden;
position: absolute;
background: white;
}
.slides .slide {
height: 340px;
}
.sdw-l, .sdw-r {
background-repeat: no-repeat;
width: 30px;
height: 485px;
position: absolute;
z-index: 99;
}
.sdw-r {
background-image: url(../images/sdw-r.png);
margin: -155px 0 0 978px;
}
.sdw-l {
background-image: url(../images/sdw-l.png);
margin: -155px 0 0 -30px;
}
.slides .slide .text {
float: left;
width: 450px;
padding: 10px 15px;
}
.slides .slide .text p {
line-height: 1.5em;
}
.slides .slide .text p a {
color: #4a64aa;
text-decoration: none;
}
.slides .slide .text p a:hover {
text-decoration: underline;
}
.slides .slide .photo {
overflow: hidden;
width: 480px;
height: 280px;
text-align: center;
vertical-align: middle;
float: right;
}
.slides .slide .photo img {
margin: 20px auto;
}
.slideshow-container .slidenav {
position: relative;
margin: 280px 55px 0 0;
z-index: 100;
float: right;
}
.slideshow-container .slidenav a {
display: block;
height: 30px;
width: 30px;
text-align: center;
margin: 0 8px;
float: left;
background-color: #e5e2df;
color: #a1988c;
text-decoration: none;
line-height: 30px;
}
.slideshow-container .slidenav a:hover {
background-color: #4a64aa;
color: white;
}
.slideshow-container .slidenav a.activeSlide {
color: #4a64aa;
}
.slideshow-container .slidenav a.activeSlide:hover {
color: white;
}
Of course the colors and other design related items will be changed to match the visual look and feel of the theme that you are creating. Once the CSS file is created and in the necessary directory, the theme needs to be informed of its existence. Simply add the following line to your themes ".info" file.
stylesheets[all][] = css/slides.css
One last item needs to be added to the themes ".info" file. The region needs to be defined for the location of the slideshow. I have created a region named "slideshow". To add this add the following in the regions section of the .info file.
regions[slideshow] = Slideshow
The final structural item that needs to be modified is the page.tpl.php
template file. The template needs to be modified to render the slideshow content. Below is a snippet of the template that is necessary. Notice that the only thing necessary to display the slideshow contents in the print render...
call for the slideshow region.
Once the structural elements are taken care of now you need to create a "Slide Show Content" content type so that the items can be easily added.
Much of the power of this approach comes from the View module. In order to correctly gather the slides that are to be displayed and then render them on the properly a new view needs to be created. In the administrative interface select Structure->Views and create a new view. I named mine "Front Page Slide Show Content". Do the following to create the view block:
[title]
- Content: Body=>Under "Rewrite Results," check the "Rewrite the output" box and use the following in the text:
[body]
Now that we have the view and the content type for the slideshow, we need to make sure that the block will render properly within the page. To do that I have a custom template file for this view's block. For this article the name of this file is views-view--slide-show-content.tpl.php
. Below is the contents of the file:
The final step is adding the block to the page design. To do that, go to the Structure->Blocks section of the Administrative interface. From there add the View Block that you just created to the "Slideshow" region that you defined earlier. Now once you refresh your cache and look at your page you will see the slideshow.
We at Force 5 are always looking for ways to improve, so I welcome any comments or suggestions that you might have. Since Drupal 7 is so new and there is little documentation on many of the features I look forward to hearing the community's voice for suggestions. If you would like to hear more about Force 5 Drupal development, feel free to Contact us and we would be happy to discuss them with you. In the meantime feel free to read our blog or read other How-Tos
Comments
This was a great write-up, thanks a lot! I did have a question about the View Block Template File. Does this new file name (views-view--slide-show-content.tpl.php) need to be added to the Theme Registry somehow? If not, how does the theme know to use this new file when arranging the Slideshow View?
I'm hoping the answer to this question will solve my problem. I have followed these instructions but I am only ending up with the pictures I added with the new content type stacked on top of each other..with no animation switching the images.
Thanks in advance.
Thanks for your kind words.
The theme template file is copied from Core and then overridden in the theme directory. To get the information as to what template that is being go to the view that you are using to populate the slideshow. In the "Advanced" section there is the Theme: information link. This link will tell you the appropriate theme template files for that view. Pick what you want to customize and then override the view by coping the template file from Core. Do <strong>NOT</strong> edit the original template file; be sure to copy it to your theme directory. Otherwise, when there is an update to core, your changes and customizations will very well be eliminated.
It is my guess that there is a missing DIV or some other element in the page which is causing the style and jQuery to not be applied properly to the page that you describe. Feel free to send me a link to the page you are working on and I'd be happy to take a look to see if there is anything quick off the top of my head.
In views I could not find the "Content: type = Slide Show Content" to the views filter criteria. I am afraid I can't make the slide show.Is it a problem of my drupal version or I missed something.Please reply. I have never been this close to make the slide show success.
In order to have "Slide Show Content" show up as a filter criteria, you will need to create a new "Content Type" within the Structure section of the administrative interface. Once you have created that content type then it will be displayed. Within this content type is where you put the fields that will be used by the view to render the slideshow.
I just did everything here that you wrote. But it's not working properly.
The images is not showing as a slideshow, instead they appear underneath each other. What did I do wrong?!
If the images are "stacked" then it is probably related to the CSS positioning of the elements. The examples that are included in the post are not necessarily "production" but are segments of a larger system. I would check the CSS first (I like using Chrome's element inspector for that personally). Good luck!
Hello, as a newbie trying to find my way around Drupal, I found it a very detailed write-up. The only problem is I cannot get it to work. I have been through the steps a few times but do not see any images. I imagine I made a very basic mistake , any help would be appreciated.
As a ps . Im running everything local so that I can play around with Drupal, so I do not have a web server where I can upload anything...
Hiya - great article, a much easier approach than views-slider I think. I am having real trouble getting a Superfish menu to appear over the top of this - any tips?
Hi Christian,
Thanks for this article, which is really useful as it's something I've been trying to figure out. I too am struggling to get it to work and I think it's this last part about template files. I'm a little unclear about what I should be copying from where and to where in order to get things to work correctly. So far I have the view and the content types all working fine and a nice slideshow region but I'm not getting any pictures in it.
Best regards Steve
Christian, thank you for sharing with us this precious information. I was able to make it work with Drupal 7 and use the Advertise region form Minnelli theme and together with Context module, I can change the banners with images related to the page being viewed.
Very good, many thanks.
Make sure you have the template file views-view--the-name-of-your-content-type.tpl.php in the correct place. In views, check theme information and you can see which template it is using. Press refresh to confirm the correct use of the above template.
first of all: thanks a lot for your tutorial! - but unfortunatelly I can't get the styling working - do you have an idea what the problem could be?
Very nice tutorial :) I happen to have the same issue, i placed the file views-view--slide-show-content.tpl.php in my theme-folder along with the other php-files but the images are showing underneath each other. I also couldn't find the "slideshow"-region in the regionlist when I placed the block so I had to place it in another region... do you think that could have something to do with it? If so, do you have any suggestions for solutions?
pager is not working
I can't able to see pager, would you please explain that how to fix it?
aha .. great tutorial :) love it
i'm still confuse. in Drupal, if I want show any post as "slide show" content, I have to make a "slide show" content type. How to generate a slide show from newest post from all category/ content type? In wordpress I can easily integrate jquery in theme and display all post or post from some category, or excluce some category I want. How Drupal this?