The Arcive of Official vBulletin Modifications Site.

United-Forum Nivo Slider Widget · **Released**: 07-17-2011

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 )

That's all
Hope it works for you.

Regards Mooff

wombycat · #**282** 10-05-2011, 09:29 PM

Quote:

Originally Posted by Mooff

P.S.: Thanks for the latest donation.

Most Welcome

I had something strange happen to me today. After days of the slider working perfectly, this morning the fall back image was showing. I enables/disabled any different products that I had fiddled with lately though I could not get it to show the correct pulled images. I cleared the cache many times until I went into the 'slider' folder and deleted the images it had pulled previously. Now it works again

Any thoughts on what may have caused that?

site

owning_y0u · #**283** 10-06-2011, 06:53 AM

Quote:

Originally Posted by hyperviperx99

OK in my site http://www.fliprap.com/content.php I want to know how come the slider feature works, but the article images do not show, only the default image shows. How can I get the Article image to show? I already check the javascript filepath that was mentioned in FAQ and everything is correct. Any suggestions? Please tell me, I really need some serious help!

Chmod the pic folder to 0777

owning_y0u · #**284** 10-06-2011, 07:08 AM

For those that have issues with images not show correctly f.e. Wrong image is placed in the slider.
Make sure that those images are imported to you web server. External images wont be fetched

Mooff · #**285** 10-07-2011, 02:28 PM

I'll try to answer some questions now, still no time to do some heavy debugging though - we just moved to another server like two days ago and still have to fight some bugs which are included for free with every change. In addition our heavy cms customization is finally ready and live - but that of course also needs some love, polishing and bugfixing.
But it's a nice showcase what can be done with the nivo slider engine.

http://www.united-forum.de/news/

Questions:
@hyperviperx99
I think you switched to another mod. Am i right?

@Kr33p3r
Sorry totally forgot about the version with more debug - for starters a small bit to improve that error you are getting:
find this part

Code:

                    else
                    {
                        //resiziing did not work - we are using the fallback image.
                        $article['previewimage'] = $fallback_img;
                        echo '<span style="color:red">Error occurred:</span> picture is not readable.' . $article['previewimage']. '<br /> ';
                    }

replace with

Code:

                    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;
                    }

@wombycat
1) How do I remove the text from the slider? I would like to have only the images pulled from the articles.
----------------------
quick and dirty:

Code:

    <script type="text/javascript">
    $(window).load(function() {
        $("#slider").nivoSlider();
    });
    </script>

replace with

Code:

    <script type="text/javascript">
    $(window).load(function() {
        $("#slider").nivoSlider({
captionOpacity: 0,
});
    });
    </script>

2) Is it possible to have 2 of these on the same page? I have two atm and the 2nd one is coming up as a blank white box, though if I turn the first one off the 2nd one works flawlessly.
---------------------
you prolly have included two jquery files on the site. Put the jquery in your headinclude and remove that line from both sliders:

Code:

    <script type="text/javascript" src="' .$slider_img_filepath. 'jquery-1.6.1.min.js"></script>

@owning_y0u

Quote:

For those that have issues with images not show correctly f.e. Wrong image is placed in the slider.
Make sure that those images are imported to you web server. External images wont be fetched

That's not the case.
Wrong images showing is due to a browser caching error.
A fix would be here:
https://vborg.vbsupport.ru/showpost....&postcount=195

Hope i haven't missed a question. Cheers guys.

dvL-den · #**286** 10-07-2011, 06:06 PM

I don't get it. I have uploaded files and created widget. Edited path and put the widget into layout. Where it should appear as I don't see it anywhere?
I would like to put it on the bottom of forums home. If that is possible?
Please PM me if you have solution for me. Thank you.

wombycat · #**287** 10-09-2011, 05:51 AM

Quote:

Originally Posted by Mooff

@wombycat
1) How do I remove the text from the slider? I would like to have only the images pulled from the articles.
----------------------
quick and dirty:

Code:

    <script type="text/javascript">
    $(window).load(function() {
        $("#slider").nivoSlider();
    });
    </script>

replace with

Code:

    <script type="text/javascript">
    $(window).load(function() {
        $("#slider").nivoSlider({
captionOpacity: 0,
});
    });
    </script>

2) Is it possible to have 2 of these on the same page? I have two atm and the 2nd one is coming up as a blank white box, though if I turn the first one off the 2nd one works flawlessly.
---------------------
you prolly have included two jquery files on the site. Put the jquery in your headinclude and remove that line from both sliders:

Code:

    <script type="text/javascript" src="' .$slider_img_filepath. 'jquery-1.6.1.min.js"></script>

Hope i haven't missed a question. Cheers guys.

Thank you very much, the support on this is awesome! Donating again

wombycat · #**288** 10-09-2011, 05:57 AM

Quote:

Originally Posted by dvL-den

I don't get it. I have uploaded files and created widget. Edited path and put the widget into layout. Where it should appear as I don't see it anywhere?
I would like to put it on the bottom of forums home. If that is possible?
Please PM me if you have solution for me. Thank you.

Even if the slider does not work/appear the widget should still be there. May sure you have added it to the right layout and that is the layout being used on the home cms page. Once you have the widget box showing any issues can be sorted from reading the question and answers.

Good luck

thecore762 · #**289** 10-12-2011, 05:40 AM

Will this work with vBadvanced?

Mooff · #**290** 10-12-2011, 11:00 AM

@thecore762

Quote:

Originally Posted by Mooff

I do not own vb_advanced. Therefore i have no idea.

Since the db_query is build upon the vb4-cms article database/table structure i have to go with "probably not". Maybe an experienced coder who does have vb advanced can clearify on that one.

btw. since i read about cropping and was curious whether this would be hard to do with gd i just checked it out:
(untested)
The catch: The simple version needs your pictures to be bigger than the result. Can be worked around though i think. Without someone actually wanting it i won't check into it more though - simply cause we do not need it right now

anyway, for cropping
find

Code:

                   $img_width = $imageinfo[0];
                            $img_height = $imageinfo[1];
                            
                            imagecopyresampled($sprite, $image, 0, 0, 0, 0, $maxwidth, $maxheight, $img_width, $img_height );
                            imagedestroy($image);

replace with

Code:

                   $img_width = $imageinfo[0];
                            $img_height = $imageinfo[1];
                            
if($img_height > $maxheight AND $img_width > $maxwidth)
{
$cropy = $img_height - $maxheight;
$cropx = $img_width - $maxwidth;
                            imagecopyresampled($sprite, $image, 0, 0, $cropx, $cropy, $maxwidth, $maxheight, $img_width, $img_height );
}
else
{
                            imagecopyresampled($sprite, $image, 0, 0, 0, 0, $maxwidth, $maxheight, $img_width, $img_height );

}
                            imagedestroy($image);

(if someone uses this one, please report back to me if it does work - i do not have a testboard right now, so no testing

)

charlesr · #**291** 10-12-2011, 03:59 PM

If you leave my slider (at http://www.bordersdown.net/) going for a while, eventually it goes weird (pics seem out of sync with text or text disappears) and firefox asks you if you want to the stop the script that is running on the page. Anyone else noticed anything like this?

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.05531 seconds Memory Usage 2,402KB Queries Executed 27 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (13)bbcode_code (7)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (4)pagenav_pagelink (2)pagenav_pagelinkrel (11)post_thanks_box (13)post_thanks_box_bit (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (2)post_thanks_postbit (11)post_thanks_postbit_info (10)postbit (3)postbit_attachment (11)postbit_onlinestatus (11)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start fetch_musername post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end post_thanks_function_fetch_thanks_bit_start post_thanks_function_show_thanks_date_start post_thanks_function_show_thanks_date_end post_thanks_function_fetch_thanks_bit_end post_thanks_function_fetch_post_thanks_template_start post_thanks_function_fetch_post_thanks_template_end postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

13 благодарности(ей) от:
AaronMiller, Aramist, doctorsexy, Gemma, LOGECT, mitch84, nacaruncr, owning_y0u, RaSa, Sage Knight, The Rocketeer, YkudzA

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!