Version: 1.1.0, by Mooff
Developer Last Online: Nov 2013
Category: vBulletin CMS Widgets -
Version: 4.1.4
Rating:
Released: 07-17-2011
Last Update: 07-18-2011
Installs: 146
Additional Files
No support by the author.
Based on the Nivo Slider - all credit for slider awesomeness goes to them.
vB4 implementation goes to me.
What it is:
A slider for cms articles, it gets the articles via database, uses (if possible) the previewimage there and resizes it to slider size *update 1.1.0 cropping function included.
Livedemo on a Big Board (>2.000.000 posts)
the nivo slider on our site is customized to fit our heavily customized cms. Default look of this addon is shown in the picture below
facts about the nivo slider
Quote:
Originally Posted by nivo slider homepage
- ~ 600.000 downloads
- 16 transition effects
- a ton of options
- different available themes
- ...
Installation
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
Custom settings:
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:
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.
Slider not working. No idea why?
You will find a FAQ in the first comment, which will be kept up to date: FAQ
The widget here is completely free. No charge, no branding.
But, we do not mind donations either. If you want to give us something. Since we are advertising free and fan based we are happy about every small donation.
( On Forumhome bottom right paypal button: http://www.united-forum.de/forum.php )
I'm not sure if this has been mentioned before, but I adapted code from this site to make it crop your Slider image from the direct center of the article image.
I really can't give support for this, since I barely managed to figure it out myself, but if you DO give it a try, let us know if it works!
PHP 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 = 'slider/';
//picture width and height !same as in the CSS FILE! - was 650 $maxwidth = 385; $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 . 'Fallback.jpg';
//hardcoded maximum is 20 - if you want more just ask $number_of_articles_shown = 10;
//lengh in characters of the article descriptions - was 95 $description_length = 50;
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']; }
} 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);
Arg, I'm not sure what I did! I have two sites, a test site and a live site (which we are getting ready to launch).
Now the Test site was an upgrade from a 4.1 board, but Live site is a fresh 4.2 install. They are using the same hosting company and both using the php.ini and php5.ini.
On my Test site things are working great. On Live, I'm getting the dreaded "Blank Box", with no images and no article text. The arrows show up and when using the Inspect Element (in Chrome) I see the script "running" and trying to switch between things.
Images are not being saved to the directory, and the fallback image isn't being used.
I triple-checked and the files and code are the exact same between my test and live sites.
My CMS permissions are the same (allow guests to download attachments). I re-copied the "no background" template.
My file permissions are the same between sites, and I'm not referencing the test site in any way.
The source code on my Test site references one jQuery line from Google, but that isn't interfering with the Test site. For kicks I copied the line into Live, and it still didn't work.
I found and fixed my issue!! After running various queries based on the code, I figured out that it only shows articles with a Publish Date of the last 12-13 months. Since we are still building our Live site, we were testing with a few older articles, with Publish Dates in 2010.
Once I changed the dates to something more recent - voila! I have a slider.
United-Forum Nivo Slider Widget Details »»
About Developer
Visit Web Site
Additional Files 
No support by the author.
08-14-2012, 01:54 AM
I give up after six month on how to figure out slider in cms. Uninstalled and thanks.
