By darrellhq on

I was looking around for a good slide show for my front page. Frontpage Slideshow http://drupal.org/project/fpss looks really nice, not suprising considering it's joomla roots, but it requires purchasing a module. My question is can views slide show be themed to be shown in a simular fashion.

⋅ Categories: Drupal 6.x

Comments

CobraMP’s picture

CobraMP commented

http://drupal.org/project/views_slideshow

darrellhq’s picture

darrellhq commented

Thanks for a fast reply. views_slideshow is the one I currently have installed now. Can it be themed besides css by using using normal views .tpl.php files like Frontpage Slideshow? I think views slideshow is the best one however it doesn't have many features. If I can theme it I think I can get away with using it. Thanks again

darrellhq’s picture

darrellhq commented

Okay I got it worked out for anyone searching for the same type of question regarding the views_slideshow module, as the directions imply you can put into a slideshow anything that you can display with "views". I have successfully themed mine using css and a custom views tpl.php file and I have to say that it looks fabulous!

baykush’s picture

baykush commented

to your fabulous slideshow example?
I'd be happy to see a good demonstration. The demonstration link in the module page is not exactly what I am looking for...

darrellhq’s picture

darrellhq commented

clubalexa.org is what I have done so far. Please feel free to firebug the code for the css. ;)

mojowen’s picture

mojowen commented

Awesome dude, thanks a ton. Going to see if I can whip this out tomorrow. I'll post the results!

annelianou’s picture

annelianou commented

I'm using Views Slideshow module and I also want to theme my slideshow block with custom views tpl.php

First I tried to use Theme Wizard but it doesn't work with view Slideshow.

I'm new to Drupal and I don't know how to theme a view.
I have a view that is of view type Slideshow List

I want to have this function in the file template.php

function theme_views_view_TYPE_VIEWNAME($view, $nodes);

My ide is to have a file named views_TYPE_VIEWNAME.tpl.php

But I have tried to named it
myTheme_views_view_slideshowList_TestSlideshow($view, $node)

but this function isn't invoked.

If I change the view type to view list and change the function name to
myTheme_views_view_list_TestSlideshow
it is invoked

My question is, what name shall the function have if I use the view type Slideshow List?

Thanks a lot for help!

mariacha’s picture

mariacha commented

The naming convention doesn't seem to be followed for this module. The theme functions are:

myTheme_views_slideshow_view_list()
myTheme_views_slideshow_view_teasers()
myTheme_views_slideshow_view_nodes()

You can find these functions in their original form (so you can copy them over to your template.php file and make changes) here (within your custom modules folder):

modules/views_slideshow/views_slideshow.module

This is information for Drupal 5. Obviously, theming is much easier in Drupal 6.

I spent a lot of time looking for this info on the forums and didn't find it, so I hoped I'd save other theming newbies some frustration.

darrellhq’s picture

darrellhq commented

Using firebug in firefox will reveal all the css code involved in parts of any website. Great way to learn because it also allows for quick debugging of your code. This will directly point to the naming conventions for at least the css.

darrellhq’s picture

darrellhq commented

I have another example here http://www.fevermagazine.com

lias’s picture

lias commented

and while i'm looking right at the code for the module to alter I'm not quite sure how to modify or how you modified your tmp.php file for the view. I've taken a look with firebug and found your css but still not sure what to modify.

I'm assuming you used Slideshow list for the display and altered this for your template.php:

/**
 * Display the nodes of a view as a list.
 */
function theme_views_slideshow_view_list($view, $nodes, $type) {
  $fields = _views_get_fields();
  $items = array();

  foreach ($nodes as $node) {
    $item = '';
    foreach ($view->field as $field) {
      if ($fields[$field['id']]['visible'] !== FALSE) {
        if ($field['label']) {
          $item .= "<div class='view-label ". views_css_safe('view-label-'. $field['queryname']) ."'>" . $field['label'] . "</div>";
        }
        $item .= "<div class='view-field ". views_css_safe('view-data-'. $field['queryname']) ."'>" . views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $node, $view) . "</div>";
      }
    }
    $items[] = "<div class='view-item ". views_css_safe('view-item-'. $view->name) ."'>$item</div>\n"; // l($node->title, "node/$node->nid");
  }
  return theme('views_slideshow_slideshow', $view, $nodes, $type, $items);
}

EDITED::

Actually, the css helped out tremendously and it's just a matter of tweaking for my project. Thanks for sharing : )

darrellhq’s picture

darrellhq commented

Here is the code for the template feature.tpl.php using the css you should be able to duplicated my results! It's not really necessary and the reason why I did not post it orginally but it helps me out alot to have my own div tags wrapped around specific parts. Thanks for bringing that to my attention.

/**
* If node is a teaser theme for slideshow.
*/
<?php if ($teaser): ?>
    <div id="ssbg"><?php print $node->field_fea_image[0]['view']; ?>
<div id="ssbg-title"><div class="tpos"><h1><?php print $title ?></h1><p><?php print $node->content['body']['#value'] ?></p></div></div></div>
  <?php else: ?>
      <h2><a href="<?php print $node_url ?>" title="<?php print $teaser ?>"><?php print $title ?></a></h2>
  <div class="content clear-block">
    <?php print $content; ?>
  </div>
  <?php endif; ?>
izmeez’s picture

izmeez commented

subscribe

lias’s picture

lias commented

For some reason I was thinking you had modified the template.php file rather than created a new node.tpl.php for your featured content. I do really like how it looks on your website, very similar to the effect of the paid module.

I was wondering if it's possible to theme views slideshows so they look different for different views? For instance, let's say the frontpage slideshow has the slideshow_main with four breakout teasers and another slideshow instead has two breakout teasers.

Thanks again for sharing!

darrellhq’s picture

darrellhq commented

I think you could create a different view for the specific pages that you want. Then theme these seperately.

Like this, page node-[type1].tpl.php then another for node-[type2].tpl.php replacing [type] with the name of each node type you want to put a different views slideshow on. However this would require some extra css. But that way you can have one slideshow on your front page and another themed specifically for your reviews page.

Correct me if I am wrong I have not tried this.

Stevik’s picture

Stevik commented

Hi eQasion Your work is great just wish i could do what you have done with fevermagazine. i have used the module at http://drupal.org/project/views_showcase module it pretty much does something similar but you have done somethng better.Is it possible that you attach the feature.tpl.php and the corresponding css

thanks

darrellhq’s picture

darrellhq commented

I have posted the code I use here.

pabx’s picture

pabx commented

I've tried to duplicate your results, but every node is over-ridden by the new node-type.tpl.php file. How do I keep the Teasers used in the Views Slideshow different than the Teasers and Body as I display it normally?

zachwass2000’s picture

zachwass2000 commented

I could really use this. Anyone know how?

darrellhq’s picture

darrellhq commented

Well with the updated module things have changed a lot. Here is what I did

*Install modules viewsslideshow and optionally the Hover Intent module. (I use the hover intent module because it provides more intelligent hover handling code.)

1) Set "SLIDESHOW MODE" on the configuration in your views to ThumbnailHover.

2) Then create a file named node-[your-content-type]-tpl.php and add this code:

/**
* If node is a teaser theme for slideshow.
*/
<?php if ($teaser): ?>
    <div id="ssbg"><?php print $node->field_fea_image[0]['view']; ?>
<div id="ssbg-title"><div class="tpos"><h1><?php print $title ?></h1><p><?php print $node->content['body']['#value'] ?></p></div></div></div>
  <?php else: ?>
      <h2><a href="<?php print $node_url ?>" title="<?php print $teaser ?>"><?php print $title ?></a></h2>
  <div class="content clear-block">
    <?php print $content; ?>
  </div>
  <?php endif; ?>

3) Add a 5x5 pixel black fill with a transparency of 75% called shadow.png to the images directory

4) Then I used css to do all the rest of the work.

#views_slideshow_thumbnailhover_main_1 {width: 430px; height: 300px; overflow: hidden; float: left; }



.views_slideshow_thumbnailhover_breakout_teasers {

color:#222;

display:table-cell;

width: 220px;

}



.views_slideshow_thumbnailhover_div_breakout_teaser {

background: #fff url(images/shadow.png) repeat-x 0 0; // This adds a 5x5 pixel black fill with a transparency of 75% called shadow.png

width: 96%;

height: 55px;

padding: 10px;

cursor: pointer;

float: left;

}



.views_slideshow_div_breakout_teaser a:link, .views_slideshow_div_breakout_teaser a:hover, .views_slideshow_div_breakout_teaser a:visited { color: #444;}


.activeSlide { background-color: #999; color: #FFF;}

.activeSlide a:link, .activeSlide a:hover, .activeSlide a:visited { color: #444;}


#ssbg-title { background:transparent url(images/transparent_bg_black.png) repeat scroll 0 0 !important;

font-size:11px;

height: 70px;

bottom:0;

left:0;

margin:0;

padding:0;

position:relative;

width:100%;

top: -70px;

color: #fff; }



.tpos { padding: 10px; }

.tpos h1{ font-size: 20px;}

NOTE: The version of the module viewsslideshow that I used required a patch to get the active teasers to work. The patch is here

brenopsouza’s picture

brenopsouza commented

Hey eQuasion, just a little noob question here: this node--tpl.php file u said is node.tpl.php, right? And do you put it inside the theme or view_slideshow directory? And what about that feature.tpl.php file, what is that for? And the template.php file, do I need to modify it to achieve your result?

Hehe, I guess it was four noob questions, indeed!

Thx.

darrellhq’s picture

darrellhq commented

breenopsouza, I apologize for my late response but I hope this information is still useful to you:

node--tpl.php should be node-[your-content-type]-tpl.php and feature.tpl.php should in fact be node-feature.tpl.php which is used to theme the node with the css that I used. Put both files in your theme folder in sites/all/themes/[your-theme]

There is no need to edit the template.php file for this to work! There has been a few updates to this module since I did this project but it does still apply.

kjv1611’s picture

kjv1611 commented

I was wanting to try using this method of yours for the Views SlideShow, but I'm clueless on where to put the CSS code you mentioned.

Did you just add that to the default css files for the current theme?

Thanks for any info - if you (or someone else who knows) reads this.

Thanks

darrellhq’s picture

darrellhq commented

Yes I adding it to the default css but there nothing wrong with creating another css files and adding it to load as well in your .info file

kjv1611’s picture

kjv1611 commented

Yeah, this just shows how much more I have to learn.. I'll possibly go back and consider this, but for now I've actually gotten this module working:
http://drupal.org/project/views_nivo_slider

Which is new, I think...

And interestingly, someone else started this one:
http://drupal.org/project/nivo_slider

I've not tried the latter at all, yet, but the maintainer for the views ... module is trying to contact the maintainer for the 2nd listed module, to see if they can basically put the 2 together.

I definitely want to give this method a shot, as you detailed in this thread. Perhaps I'll get time to give it a test run in a couple of weeks. :0)

Thanks for detailing your efforts here.

fehin’s picture

fehin commented

subscribe.

darrellhq’s picture

darrellhq commented

I wanted to mention that a lot of this has changed with the most recent updates to the modules. After updating I found that I had to rework much of it. kjv1611 the modules that you mentioned look really good. I might give them a shot on my next site. Thanks