vBulletin LTS

• upload all files (attached zip file) in the folder where you do need them - this has to be the same folder you will set via $slider_img_filepath (see picture)
  
  
  
• create a new php-widget and insert the following code:
  
  Code:

  // DEBUG MODUS !
  $debug_modus = false;
  if($debug_modus === false)
  {
  	ob_start();
  }
  //nivo slider - uf - vb.org version
  //set these values as you need them:
  //your slider folder - has to be read and writeable
  //folder where all slider files are saved
  $slider_img_filepath = 'external/unitedforum/slider/';   
  //picture width and height !same as in the CSS FILE!
  $maxwidth = 650;                                  
  $maxheight = 250;    
  //do you want images without previewimage to be shown? slider is using the fallback then
  $show_articles_without_image = false;           
  //picture shown if your articles has no previewpicture
  $fallback_img = $slider_img_filepath . 'uf_fallback_slider.png';  
  //hardcoded maximum is 20 - if you want more just ask
  $number_of_articles_shown = 10;                                
  //lengh in characters of the article descriptions
  $description_length = 95;
  //stretch picture or crop them? false = strechting (default) true = cropping (beta)
  $crop = false;
  //Debug Messages
  if($debug_modus)
  {
  	echo "<span style='color:red;'>DEBUG MODE is ON! </span><br />";
  	echo "slider_img_filepath: $slider_img_filepath <br />";
  	echo "width: $maxwidth   height: $maxheight <br />";
  	echo "Strech or Crop? $crop <br />";
  	echo "show_articles_without_image: "; 
          var_dump($show_articles_without_image); 
          echo " <br />";
  	echo "fallback_img: $fallback_img <br />";
  	echo "#img: $number_of_articles_shown <br />";
  	echo "description_length: $description_length <br />";
  	echo 'directory ' . DIR . '<br />';
  }
  $article_type = vb_Types::instance()->getContentTypeID("vBCms_Article");
  $time = TIMENOW;
  if(!extension_loaded('gd'))
  {
  	echo '<span style="color:red">Error occurred:</span> Your System does not support the GD-Libary. Please install the GD-Libary.<br />';
  }
  	$article_get = vB::$db->query_read('
          SELECT
              article.pagetext,
              article.previewimage,
              node.url,
              node.publishdate,
              node.parentnode,
              parentnode.url AS parenturl,
              thread.replycount,
              info.title,
              node.nodeid,            
              GROUP_CONCAT( category.category )
          FROM
              '.TABLE_PREFIX.'cms_article AS article INNER JOIN
              '.TABLE_PREFIX.'cms_node AS node 
                  ON (node.contentid = article.contentid AND node.contenttypeid = ' . vb::$db->sql_prepare($article_type) .') INNER JOIN
              '.TABLE_PREFIX.'cms_nodeinfo AS info 
                  ON info.nodeid = node.nodeid INNER JOIN
              '.TABLE_PREFIX.'cms_node AS parentnode 
                  ON parentnode.nodeid = node.parentnode LEFT JOIN
              '.TABLE_PREFIX.'thread AS thread ON thread.threadid = info.associatedthreadid LEFT JOIN
              '.TABLE_PREFIX.'cms_nodecategory AS nodecategory ON nodecategory.nodeid = node.nodeid LEFT JOIN
              '.TABLE_PREFIX.'cms_category AS category ON nodecategory.categoryid = category.categoryid 
          WHERE
              node.setpublish = 1 AND
              node.publishdate > '. vb::$db->sql_prepare($time) .' -34560000 AND
  			node.publishdate < '. vb::$db->sql_prepare($time) .' 
          GROUP BY node.nodeid
          ORDER BY node.publishdate
          DESC LIMIT 20');
      $database_articles = array();
      /* my version of sorting the articles via relevance - i'll keep it in case someone is interested*/
      while($article = vB::$db->fetch_array($article_get))
      {
          $article['value'] = ( 5 - ($time - $article['publishdate'] ) / 86400 ) * ( 5 - ($time - $article['publishdate'] ) / 86400 ) * ( 5 - ($time - $article['publishdate'] ) / 86400 ) + (10 * $article['replycount']);
          $database_articles[] = $article;        
      }
      foreach($database_articles as $c => $key)
      {
          $sort_value[] = $key['value'];
      }
      array_multisort($sort_value, SORT_DESC, $database_articles);    
      //
      $i = 0;
      $section_array = array();
      $featured_articles = array();
      foreach($database_articles AS $article)
      {
          $section_array[$article['parentnode']]++;
          $categories = explode(',' , $article['GROUP_CONCAT( category.category )']);
          if($show_articles_without_image == true OR $article['previewimage'])
          {
              if($section_array[$article['parentnode']] < 50 AND $i < $number_of_articles_shown)
              {
  				if($debug_modus == true OR !file_exists($slider_img_filepath . 'slide_' . $article['nodeid'] . '.jpg'))
  				{
  					//rebuild image to the height and width we want in the slider 
  					//called sprite since i got the code from our sprite addon :P
  					$sprite = imagecreatetruecolor($maxwidth, $maxheight);
  					if(is_resource($sprite) AND $article['previewimage'] )
  					{                   				
  						$imageinfo = getimagesize($article['previewimage']);
  						if(is_array($imageinfo))
  						{   
  							$image = null;
  							switch($imageinfo[2])
  							{
  								case IMAGETYPE_PNG:
  								$image = imagecreatefrompng($article['previewimage']);
  								break;
  								case IMAGETYPE_GIF:
  								$image = imagecreatefromgif($article['previewimage']);
  								break;
  								case IMAGETYPE_JPEG:
  								$image = imagecreatefromjpeg($article['previewimage']);
  								break;
  								default:
  								echo '<span style="color:red">Error occurred:</span> Unknown image format. ' . $article['previewimage']. '<br />';
  								break;                        
  							}
  							if(!is_resource($image))
  							{
  								//resiziing did not work - we are using the fallback image.
  								echo '<span style="color:red">Error occurred:</span> imagecreation failed. ' . $article['previewimage']. '<br />';
  								$article['previewimage'] = $fallback_img;
  							}
  							else
  							{
  								$img_width = $imageinfo[0];
  								$img_height = $imageinfo[1];							
  								if($crop == false)
  								{									
  									imagecopyresampled($sprite, $image, 0, 0, 0, 0, $maxwidth, $maxheight, $img_width, $img_height );
  									imagedestroy($image);
  								}
  								else
  								{
  									//cropping
  									$ratiox = $maxheight / $img_height ;
  									$ratioy = $maxwidth / $img_width ;
  									$new_height = $img_height;
  									$new_width = $img_width;
  									if ($maxheight > $img_height OR $maxwidth > $img_width)
  									{
  										if($ratiox > $ratioy)
  										{
  											$new_height = round($img_height * $ratiox);
  											$new_width = round($img_width * $ratiox);
  										}
  										else
  										{
  											$new_height = round($img_height * $ratioy);
  											$new_width = round($img_width * $ratioy);
  										}										
  									}
  									$cropx = $new_height - $maxheight;
  									$cropy = $new_width - $maxwidth;
  									imagecopyresampled($sprite, $image, 0, 0, 0, 0, $new_width, $new_height, $img_width, $img_height);
  									imagedestroy($image);
  								}
  								$img_filepath = $slider_img_filepath . 'slide_' . $article['nodeid'] . '.jpg';
  								$success = imagejpeg($sprite, DIR  . ($img_filepath[0] != DIRECTORY_SEPARATOR ?  DIRECTORY_SEPARATOR : '') . $img_filepath);
  								imagedestroy($sprite);
  								if($success)
  								{
  									$article['previewimage'] = $img_filepath;
  								}
  								else
  								{
  									$img_filepath = DIR  . ($img_filepath[0] != DIRECTORY_SEPARATOR ?  DIRECTORY_SEPARATOR : '') . $img_filepath;
  									echo '<span style="color:red">Error occurred:</span> imagejpeg failed. ' . $article['previewimage']. '<br />
  									directory: '. $img_filepath ;
  									$article['previewimage'] = $fallback_img;
  								}
  							}
  						}
  						else
  						{
  							//resiziing did not work - we are using the fallback image.
  							echo '<span style="color:red">Error occurred:</span> picture is not readable.' . $article['previewimage']. '<br /> ';
  							$article['previewimage'] = $fallback_img;
  						}                  
  					}
  					else
  					{
  						//resiziing did not work - we are using the fallback image.
  						echo '<span style="color:red">Warning:</span> article has no previewimage or sprite is no ressource. ' . $article['previewimage']. '<br />';
  						$article['previewimage'] = $fallback_img;
  					}
  				}
  				else
  				{
  					//we already have the image, no need to resize or crop anything
  					$article['previewimage'] = $slider_img_filepath . 'slide_' . $article['nodeid'] . '.jpg';
  				}
                  /*remove everything from the previewtext - html and bb. I do not want bold or colored text there. Cut to a decent length.*/        
                  $article['pagetext'] = strip_bbcode($article['pagetext'], true, true, false, true, false);
                  $article['previewtext'] = strip_tags($article['pagetext'], '<a>');
                  $len = $description_length;
                  if ( strlen($article['previewtext']) > $len )
                  {                    
                      $article['previewtext'] = substr( $article['previewtext'] , 0 , strrpos( substr( $article['previewtext'], 0, $len), ' ' ));
                  }   
                  $i++;
                  //Build Array
                  $article_neu = array();
                  $article_neu['description'] = '<h2 style="font-weight:bold; font-size: 14px">'. $article['title'].'</h2><span>'. $article['previewtext'] .'</span> <a href="/content.php?r=' . $article['nodeid'] . '-' . $article['url'] . '">read on</a>';
                  $article_neu['htmlcaptionname'] = 'htmlcaption' . $article['nodeid'] ;
                  $article_neu['picture'] = '<a href="/content.php?r=' . $article['nodeid'] . '-' . $article['url'] . '"><img src="'.$article['previewimage'].'" alt="" title="#htmlcaption'. $article['nodeid'] . '" /></a>';
                  $featured_articles[] = $article_neu;
              }
          }
      }
      //Randomize Array
      //shuffle($featured_articles);
  	//Debug Messages
  	if($debug_modus)
  	{
  		echo '#articles - featured and databasepull ';
  		var_dump(count($featured_articles));
  		var_dump(count($database_articles));
  	}
  $output_bits = '
      <link rel="stylesheet" href="' .$slider_img_filepath. 'nivo-slider.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="' .$slider_img_filepath. 'nivo-slider_uf_theme.css" type="text/css" media="screen" />
      <div style="height:' . $maxheight . 'px;">
      <div id="wrapper">
          <div class="slider-wrapper theme-uf">
              <div class="ribbon"></div>
              <div id="slider" class="nivoSlider">';
                  foreach($featured_articles AS $article)
                  {
                      $output_bits .= $article['picture'];
                  }
              $output_bits .= '
              </div>';
              foreach($featured_articles AS $article)
              {
                  $output_bits .= '<div id="' . $article['htmlcaptionname'] . '" class="nivo-html-caption">' . $article['description'] .'</div>';
              }
              $output_bits .= '         
          </div>
      </div>
      <script type="text/javascript" src="' .$slider_img_filepath. 'jquery-1.6.1.min.js"></script>
      <script type="text/javascript" src="' .$slider_img_filepath. 'jquery.nivo.slider.pack.js"></script>
      <script type="text/javascript">
      $(window).load(function() {
          $("#slider").nivoSlider();
      });
      </script>
      </div>
      ';
          $output = $output_bits;
  if($debug_modus === false)
  {
  	ob_end_clean();        
  }

• set refresh time to something big!
• save - add the widget to your layout - enjoy

At the top of the php-widget code you can see the following:

Code:

// DEBUG MODUS !
$debug_modus = false;
if($debug_modus === false)
{
	ob_start();
}
//nivo slider - uf - vb.org version
//set these values as you need them:
//your slider folder - has to be read and writeable
//folder where all slider files are saved
$slider_img_filepath = 'external/unitedforum/slider/';   
//picture width and height !same as in the CSS FILE!
$maxwidth = 650;                                  
$maxheight = 250;    
//do you want images without previewimage to be shown? slider is using the fallback then
$show_articles_without_image = false;           
//picture shown if your articles has no previewpicture
$fallback_img = $slider_img_filepath . 'uf_fallback_slider.png';  
//hardcoded maximum is 20 - if you want more just ask
$number_of_articles_shown = 5;                                
//lengh in characters of the article descriptions
$description_length = 95;

If you change $maxwidth and $maxheight you need to edit the nivo-slider_uf_theme.css file, here:

Code:

.theme-uf #slider {
    margin:0px auto 0 auto;
    width:650px; /* Make sure your images are the same size */
    height:250px; /* Make sure your images are the same size */
}

Width and height have to be the same value in your php-widget and in the css file.

In additon to these settings i also included a "value/relevance function". Meaning the slider doesn't show your latest 5 articles, but instead weights them based on age and comments.

As older an article is the less likely it will show up in the slider.
More comments make it more likely.

This behaviour can be easily changed. I didn't include an if condition cause every board has different needs and i don't know whats best for you.
In addition conditions like "articles just from this section - or these sections, or this category, with a minimum of 10 posts" can be included via one single if condition. Again, i don't know what your board needs or what your category names are.

You can also modify the preview length (more words, less words), the preview style (color fontsize, fontweight .... Again different forums different needs. It's highly customizable.

Support and requests for the slider itself should be asked here http://nivo.dev7studios.com/
Same goes for different slider themes - a lot is possible, even thumbnails - again this is part of the nivo slider and not the vb4 implementation.

If you have any questions regarding the settings - or want different settings (which have to do with vb4) - ask, and i'll try to come up with some code // show you where you have to put what.

You will find a FAQ in the first comment, which will be kept up to date:
FAQ

Spoiler (click to open)

Changelog

1.1.0 (8.11.2011)

• included a "cache" system for pictures which solves a browser cacheing issue and speeds up the slider (on second image creation) -- added some FAQ questions
• included a bit more debug messages
• new crop function (beta stadium) included

1.0.0 (4.08.2011)

• confirmed working with 4.1.5 on our testsite, changed jquery path to account for 4.1.5 and below (now using the file which is uploaded in the zip)
• minor changes in the database query code
• fixed a bug where articles did show up in the slider even though their publish date was in the future

0.9.9 (28.07.2011)

• images are now saved as jpg instead of png -> reduced filesize by a factor 10
• removed a bug causing weird characters to show up in the previewtext
• added loads of debug messages and a debug mode
• removed beta status - slider is running on our live site now

0.9.2 (23.07.2011)

• fixed a bug which caused the slider to not find attachements
• removed the fopen() function. Now checking via a GD function whether given ressource is an image

0.9.1 (21.07.2011)

• added $description_length variable
• reworked description cutting code. Now using a word sensitive substring function. Cutpoint is easier on the eye now.
• removed some slashes '/' in the code which might have caused pictures not beeing shown
• changed description title to h2 instead of span - might have a small effect on beeing more seo friendly
• removed a bug in the image resizing code (code was wrongly placed outside an else condition)

FAQ

Q: I want a static version. Can you give me some code?
A: Code can be found here: http://www.vbulletin.org/forum/showthread.php?p=2222449#post2222449

Q: I want the slider on FORUMHOME
A: Code that should work can be found here (untested): http://www.vbulletin.org/forum/showthread.php?p=2222907#post2222907

Q: I see only a white Box - no images
A: Probably a jquery issue: http://www.vbulletin.org/forum/showthread.php?p=2224063#post2224063

Q: Captions appear and the slider works, but i can't see images
A:
- See Answer above, it might be a jquery problem.
- Do the images show up in the folder you specified?
- Does the fallback image show up if you set the switch to yes?

Q: Slider isn't working (f.e. I can see text, but no images and no slider functunality)
A:
Make sure the slider_img_filepath variable is set correctly
$slider_img_filepath = 'external/unitedforum/slider/';
If you open such a link in your browser: http://www.mysite.com/$slider_img_filepath/nivo-slider.css you should see the css file!

Q: I want articles from exclusive cms categories or sections
A: Modified database query can be found here: http://www.vbulletin.org/forum/showpost.php?p=2233429&postcount=144

Q: Attachments aren't working for me
A: If your guests do not have the rights to see attachments - neither does the slider.

Q: I want to show specific articles and nothing else
A: Code can be found here: http://www.vbulletin.org/forum/showpost.php?p=2229188&postcount=91

Q: I want to change some nivo slider settings (effects, timings..)
A: An example for timings can be found here:
http://www.vbulletin.org/forum/showpost.php?p=2232204&postcount=132
For other settings please check the nivo slider homepage:
http://nivo.dev7studios.com/#usage

Q: I want the slider without widget title - how to do that?
A: Explanation can be found here: http://www.vbulletin.org/forum/showthread.php?p=2233348#post2233348
A2: No Background at all: Check this post (including pictures) by The Rocketeer http://www.vbulletin.org/forum/showpost.php?p=2241409&postcount=205

Q: How to order the articles shown by date descending - without value sorting function?
A: Take a look at this post: http://www.vbulletin.org/forum/showpost.php?p=2231992&postcount=120

Q: I updated one of my articles but the slider shows the old picture?
A: Thats the new cache function. Either delete all slide images in the slider folder or run the slider one time in debug mode.

Q: Can i have different pictures in the slider and as a preview?
A: That's now possible via the cache system. Just upload the picture you want to have in the slider into your slider folder, nameing convention is: slide_articleID.jpg. Be aware that those images will be overwritten in debug mode.

Q: I have more and more slider pictures in my slider folder?
A: Again cache system. Each article which was in the slider one time creates an unique picture. The slider does not delete those pictures, in order to be able to use the cache functionality. Please delete them manually from time to time if you do not want them there.

[b]Q: Slider is not working and Firebug is giving me an "#slider is empty" error?
A: Solution can be found here: http://www.vbulletin.org/forum/showpost.php?p=2268535&postcount=331

Q: My question wasn't answered in this FAQ
A: Please set the slider into debug mode via $debug_modus = true;
You then should see debug messages, which might point you in the right direction.
If that doesn't help. Post in the thread and please provide above debug and very detailed information what doesn't work and what you want.

Close