I have been using FrontPage SlideShow from JoomlaWorks on a number of sites, and would recommend it as a good CSS/PHP route to building a featured slide section that links to promoted content, articles, blog posts, groups, etc. One problem is that it is not free, the cost is around $35 for a license to use it on 5 to 10 domains. A second problem is highlighted by the example of releasing an installation profile for Drupal. We can release all of the code under GPL for the project except for FPSS. So, I began working on a conversion of our FPSS slides into Views Slideshow views.

The easiest way is to create a new content type, for example “slide,” and disable comments, post information, front page promotion, etc. Decide which size you would like to standardize all the images at, and then create a simple div structure with the image only as content. You can create a “views slideshow” view, sort only the “slide” content type, save it as a block or create a panels views block and embed it on a panels page. Use block or panels permissions to control the display. This is fine if you are using only images or banners made in photoshop that combine text and images, but if you want the to be text editable, viewable by search engines, and style-able by CSS, you will need to build a more complex template for your “slide” content type.

TUTORIAL:

1. Goto admin “content types” – create new content type “slide”
+ disable comments, attachments, and front page promotion in the content type form
+ goto themes “configure” – disable display post information for slides
+ you may want to disable the WYSYWIG editor (if any) on the slide node create form.
+ FCKeditor Global Profile: admin/settings/fckeditor/editg
—> visibility settings, add to exclude: node/add/slide
+ set the permissions – or skip if you only want admin to be creating this content type

2. Create a new slide – use a consistent template for this content type to build Views Slideshow displays
+ you can use html, css, php, etc. to create a custom template
+ we are looking to replace the FPSS template we are using now, and will give the template + css as a sample

Template:
+ paste in slide node create form – edit the links & paths to be consistent with your information

<div id="viewslide">
<div id="slideleft">
<div id="slidetop">
<h2><a href="/articles/second-life">Prototype of a Sustainable Virtual Reality</a></h2>
</div>
<div id="slidenote">
<p>Avatar: Elusyve Jewell</p>
</div>
<div id="slidedesc">
<p>Unlike any other site on the web, Second Life has transformed the internet into an immersive, 3-D virtual world, a collectively authored mindscape navigated by cyberpunk avatars. How long until the VR goggles appear and we log our first sessions on the holodeck? A look at the future evolution of Second Life. <a href="/articles/second-life">Read more</a>.</p>
</div>
</div>
<div id="slideright"><a href="/articles/second-life"><img width="520" height="206" src="/files/secondlife.jpg" alt="Second Life" /></a></div>
</div>

CSS – paste in style.css or equivalent
+ Note: in the Drupala theme this is in blocks.css

#viewslide {
width: 698px;
height: 240px;
border: 1px solid #B0B0B0;
margin: 0;
margin-top: 5px;
padding: 0;
}

#slideleft {
float: left;
width: 154px;
margin: 0;
padding: 10px;
padding-right: 0;
border-right: 1px solid #B0B0B0;
}

#slidetop {
width: 134px;
margin:0;
margin-left: 5px;
margin-top: -10px;
padding:0;
}

#slidetop h2 {
font-family: Arial,Verdana,sans-serif;
font-size: 18px;
line-height: 18px;
color: #0088BF;
font-weight:normal;
letter-spacing:-1px;
border: none;
background: #fff;
}
div.block div#slidetop h2 {
height: auto;
margin-bottom: 10px;
margin-top: 16px;
padding-bottom: 3px;
padding-left: 0;
padding-top: 0;
}
#slidetop h2 a {
font-family: Arial,Verdana,sans-serif;
font-size: 18px;
line-height: 18px;
color: #0088BF;
}
#slidetop h2 a:hover {
color: #CC3300 !important;
}

#slidenote {
width: 134px;
margin: 0;
margin-top: -10px;
margin-left: 5px;
padding: 0;
}

#slidenote p {
color:#28488C;
height: 10px;
font-family: Arial,Verdana,sans-serif;
font-size: 8pt;
font-weight: bold;
line-height: 10px;
margin: 0;
padding: 0;
}

#slidedesc {
width: 134px;
margin-right: 0;
margin-left: 5px;
margin-top: 5px;
margin-bottom: 12px;
padding: 0;
}

#slidedesc p {
font-family: Arial,Verdana,sans-serif;
font-size: 8pt;
line-height: 10px;
color: #333333;
margin: 0;
padding: 0;
}

#slideright {
float: right;
width: 532px;
margin: 0;
padding: 0;
}

#slideright img {
border: 0;
margin: 0;
margin-left: -1px;
padding: 16px 0;
}

IE7 CSS Fix – paste in ie7.css
+ Note: in the Drupala theme this is in fix-ie2.css

#slidetop {
margin-top: 10px;
}
#slidedesc {
margin-bottom: 12px;
}
div.block div#slidetop h2 {
margin-top: 6px;
}

IE6 CSS Fix – paste in ie6.css
+ Note: in the Drupala theme this is in fix-ie.css

#slidetop {
margin-top: 10px;
}
div.block div#slidetop h2 {
margin-top: 6px;
}

Note: this code is cross-browser tested in FF, IE7, IE6, Safari, Opera, & Chrome. It includes theme specific CSS fixes that may not be applicable to all theme code & CSS structures. It is configured to work with the Drupala & SEO-Mix themes for the Drupala installation profile.

3. To recreate the full effect of FPSS, you will need to open the images into an editor like photoshop and add a 20px background color: #CCCCCC (fade 64%) “tab” – use Arial font, change the alignment to vertical, and add a “read more…” text snippet along the bottom corner going up the side of the image.

4. Create a few of these “slide” content type nodes (full html) using the template, then goto views and create a Views Slideshow. Settings: page / block – views slideshow list view – fields: node body, no title, sort by random, and 10 nodes by page (filter to recommended 3 in panel settings), node: published, node-type: “slide”
+ Note: Views Slideshow also has its own configuration panels for fade settings, speed, etc.

5. Embed the Views Slideshow – goto panels – “views panes” and create a views block for the view just created (D5) – embed the block in any panels page or use admin/build/blocks to display in thee regions by path
+ You may want to “Set view URL to panel URL” additionally in the views pane settings

6. Goto “taxonomy” in admin and create a vocabulary for the “slide” content type if you want to create more views and sort the slideshows for particular pages.

Summary:

FPSS comes with 7 or 8 different templates at least and has quite a few features, very few of which are replicated here. We basically needed to change from the version of FPSS we were using to an open source alternative and Views Slideshow is a great module. Drupal designers who spend some time to create templates for Views Slideshow will find them extremely useful in serving multimedia content, or as a replacement for Flash in some situations. I also like and recommend FPSS and will probably continue to use it in some sites.

Example:

Views Slideshow: http://drupal.org/project/views_slideshow

FrontPage Slideshow: http://www.frontpageslideshow.net/

Drupal Module: http://drupal.org/project/fpss

This is a post from Web Dev News, a site brought to you by Xavisys Web Development. Replacing FPSS with Views Slideshow in Drupal – Tutorial