vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4.x Add-ons (https://vborg.vbsupport.ru/forumdisplay.php?f=245)
-   -   vBulletin CMS Widgets - United-Forum Nivo Slider Widget (https://vborg.vbsupport.ru/showthread.php?t=267024)

Mooff 07-17-2011 10:00 PM

United-Forum Nivo Slider Widget
 
1 Attachment(s)
Based on the Nivo Slider - all credit for slider awesomeness goes to them. ;)
vB4 implementation goes to me. :D


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
https://vborg.vbsupport.ru/attachmen...hmentid=131394

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)

    https://vborg.vbsupport.ru/attachmen...hmentid=131195
  • 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

Mooff 07-18-2011 12:03 PM

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: https://vborg.vbsupport.ru/showthrea...49#post2222449

Q: I want the slider on FORUMHOME
A: Code that should work can be found here (untested): https://vborg.vbsupport.ru/showthrea...07#post2222907

Q: I see only a white Box - no images
A: Probably a jquery issue: https://vborg.vbsupport.ru/showthrea...63#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: https://vborg.vbsupport.ru/showpost....&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: https://vborg.vbsupport.ru/showpost....8&postcount=91

Q: I want to change some nivo slider settings (effects, timings..)
A: An example for timings can be found here:
https://vborg.vbsupport.ru/showpost....&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: https://vborg.vbsupport.ru/showthrea...48#post2233348
A2: No Background at all: Check this post (including pictures) by The Rocketeer https://vborg.vbsupport.ru/showpost....&postcount=205

Q: How to order the articles shown by date descending - without value sorting function?
A: Take a look at this post: https://vborg.vbsupport.ru/showpost....&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: https://vborg.vbsupport.ru/showpost....&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.

Loversama 07-18-2011 02:41 PM

I have the original slider installed on my website and was thinking to myself "if only someone could integrate this into my forums" and here it is..

Well done, I am a little confused about the instructions at the moment, but if that could be made more clear I think I could 5 Starr this plugin!

Sage Knight 07-18-2011 03:11 PM

Great job, I have yet to actually test it, but so far it looks good. Thank you.

One question we have to manually add the images? And if we only want certain effects what should we do?

Mooff 07-18-2011 03:34 PM

I updated the installation information and custom settings on top a bit.

Please give feedback if i'm unclear in the description, so i can change it.


The slider does use the pictures which vb4 stores in the databasefield "previewpicture" and resizes them. You do not need to manually add images except 1.
You need a fallback image if your article does not have a previewimage (or something goes wrong during resizing), then the fallback is shown.


If you want certain effects you have to edit the nivo slider options:
http://nivo.dev7studios.com/
Usage tab - options, there is an explanation given.

apn3a 07-18-2011 05:45 PM

Does this perfect script works with vb advanced ?

Mooff 07-18-2011 06:08 PM

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.

Lazorbeam 07-18-2011 07:14 PM

Awesome :).

I have a couple questions...

1 - Is it possible to have the posts pulled from a forum instead of CMS (seems like it would need some rewrite)?
2 - Is it possible to have, say, 5 articles that are static and nothing else? I'd like to show users 5 "must read" pages instead of shuffling through new ones.
3 - Is this certified 4.1.3 because you got it running on this VB version? Is it not working with 4.1.4?

Edit: http://nivo.dev7studios.com/#usage shows how to customize the slides manually.

Mooff 07-18-2011 07:36 PM

If you want static articles then you don't need 90% of the code:
Without testing! - Include into a static html widget: (height setting on div style="heigth needs your number in it)

Code:

    <link rel="stylesheet" href="/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/nivo-slider_uf_theme.css" type="text/css" media="screen" />
    <div style="height:250px;">
    <div id="wrapper">
        <div class="slider-wrapper theme-uf">
            <div class="ribbon"></div>
            <div id="slider" class="nivoSlider">
                  <a href="link to your article"><img src="yourpreviewpicture" alt="" title="#htmlcaption1" /></a>
            </div>
            <div id="htmlcaption1" class="nivo-html-caption">
                <b>article title</b> </ br> example description of article <a href="link to your article">read more</a>
            </div>
        </div>

    </div>
    <script type="text/javascript" src="clientscript/jquery/jquery-1.4.4.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>


That would show 1 static article - you have to insert the link to your article, the previewimage and the description.
(additional examples are in the demo folder, when you download the nivo slider from their homepage)

Version is 4.1.3 since we will jump 4.1.4 and install 4.1.5 next. I'm pretty sure it will work with 4.1.4 (the static version will work like 100% with 4.1.4) - but i can't verify it - so i won't say it does.


Regards

Gemma 07-18-2011 11:20 PM

Very nice work. Thanks a lot :)

Lazorbeam 07-19-2011 01:32 PM

I'm having trouble getting the slider to work (static version posted above). Here's the code I used;

Code:

<link rel="stylesheet" href="/nivo/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/nivo/nivo-slider_uf_theme.css" type="text/css" media="screen" />
    <div style="height:250px;">
    <div id="wrapper">
        <div class="slider-wrapper theme-uf">
            <div class="ribbon"></div>
            <div id="slider" class="nivoSlider">
                  <a href="http://consortium.stormspire.net"><img src="/nivo/1Test.png" alt="" title="#htmlcaption1"
            </div>
            <div id="htmlcaption1" class="nivo-html-caption">
                <b>Items that should be on your snatch list</b> </ br> testing.. <a href="http://consortium.stormspire.net">read more</a>
            </div>
        </div>

    </div>
    <script type="text/javascript" src="/clientscript/jquery/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/nivo/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $("#slider").nivoSlider();
    });
    </script>
    </div>

Note, the page already loads jquery 1.4.2 for TWS notifications. Does this have any implications?

Here's the test page where I've tried to load the widget: http://consortium.stormspire.net/con...The-Consortium

Mooff 07-19-2011 01:48 PM

Img tag is not closed.

Code:

<link rel="stylesheet" href="/nivo/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/nivo/nivo-slider_uf_theme.css" type="text/css" media="screen" />
    <div style="height:250px;">
    <div id="wrapper">
        <div class="slider-wrapper theme-uf">
            <div class="ribbon"></div>
            <div id="slider" class="nivoSlider">
                  <a href="http://consortium.stormspire.net"><img src="nivo/1Test.png" alt="" title="#htmlcaption1" /></a>
            </div>
            <div id="htmlcaption1" class="nivo-html-caption">
                <b>Items that should be on your snatch list</b> </ br> testing.. <a href="http://consortium.stormspire.net">read more</a>
            </div>
        </div>

    </div>
    <script type="text/javascript" src="/clientscript/jquery/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/nivo/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $("#slider").nivoSlider();
    });
    </script>
    </div>

try this one.

Ah i see, was my blunder in the code above - sorry


Edit:
If you have jquery 1.4 or higher allready running on your site you can delete that line:
<script type="text/javascript" src="/clientscript/jquery/jquery-1.4.4.min.js"></script>

Lazorbeam 07-19-2011 02:29 PM

Quote:

Originally Posted by Mooff (Post 2222426)
Img tag is not closed.

Code:

<link rel="stylesheet" href="/nivo/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/nivo/nivo-slider_uf_theme.css" type="text/css" media="screen" />
    <div style="height:250px;">
    <div id="wrapper">
        <div class="slider-wrapper theme-uf">
            <div class="ribbon"></div>
            <div id="slider" class="nivoSlider">
                  <a href="http://consortium.stormspire.net"><img src="nivo/1Test.png" alt="" title="#htmlcaption1" /></a>
            </div>
            <div id="htmlcaption1" class="nivo-html-caption">
                <b>Items that should be on your snatch list</b> </ br> testing.. <a href="http://consortium.stormspire.net">read more</a>
            </div>
        </div>

    </div>
    <script type="text/javascript" src="/clientscript/jquery/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/nivo/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $("#slider").nivoSlider();
    });
    </script>
    </div>

try this one.

Ah i see, was my blunder in the code above - sorry


Edit:
If you have jquery 1.4 or higher allready running on your site you can delete that line:
<script type="text/javascript" src="/clientscript/jquery/jquery-1.4.4.min.js"></script>

Fantastico. Looks like it's working. As you pointed out I needed to remove the line that calls jquery.

Next step is to add additional slides. I tried duplicating some code but failed miserably.

Also, it seems that the arrows are somewhat pixelated. Do the "overlay" graphics look normal to you?

Link again for convenience: http://consortium.stormspire.net/con...The-Consortium

Edit: Hang tight, I'll first go through the nivo site and see if I can fix my own problem.

Mooff 07-19-2011 02:48 PM

Quote:

Originally Posted by Lazorbeam (Post 2222440)
Also, it seems that the arrows are somewhat pixelated. Do the "overlay" graphics look normal to you?

No, they do not. I uploaded the wrong png by mistake in the zip file. New version is up, should look better.

ah well, since i'm typing anyway :p
Code:

        <div class="slider-wrapper theme-uf">
            <div class="ribbon"></div>
            <div id="slider" class="nivoSlider">
                  <a href="http://consortium.stormspire.net"><img src="nivo/1Test.png" alt="" title="#htmlcaption1" /></a>
                  <a href="http://consortium.stormspire.net"><img src="nivo/2Test.png" alt="" title="#htmlcaption2" /></a>
                  <a href="http://consortium.stormspire.net"><img src="nivo/3Test.png" alt="" title="#htmlcaption3" /></a>
            </div>
            <div id="htmlcaption1" class="nivo-html-caption">
                <b>Items that should be on your snatch list</b> </ br> testing.. <a href="http://consortium.stormspire.net">read more</a>
            <div id="htmlcaption2" class="nivo-html-caption">
                <b>Items that should be on your second snatch list</b> </ br> testing.. <a href="http://consortium.stormspire.net">read more</a>
            <div id="htmlcaption3" class="nivo-html-caption">
                <b>Items that should be on your third snatch list</b> </ br> testing.. <a href="http://consortium.stormspire.net">read more</a>
            </div>
        </div>


Lazorbeam 07-19-2011 02:49 PM

For anyone looking to add slides to static pages, add the following bold code;

Code:

<link rel="stylesheet" href="/nivo/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/nivo/nivo-slider_uf_theme.css" type="text/css" media="screen" />
    <div style="height:250px;">
    <div id="wrapper">
        <div class="slider-wrapper theme-uf">
            <div class="ribbon"></div>
            <div id="slider" class="nivoSlider">
                  <a href="http://consortium.stormspire.net"><img src="/nivo/1Test.png" alt="" title="#htmlcaption1" /></a>
                  <a href="http://consortium.stormspire.net"><img src="/nivo/2Test.png" alt="" title="#htmlcaption2" /></a>
            </div>
            <div id="htmlcaption1" class="nivo-html-caption">
                <b>First slide..</b> </ br> testing.. <a href="http://consortium.stormspire.net">read more</a>
            <div id="htmlcaption2" class="nivo-html-caption">
                <b>Second slide..</b> </ br> testing.. <a href="http://consortium.stormspire.net">read more</a>

            </div>
        </div>

    </div>
    <script type="text/javascript" src="/nivo/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $("#slider").nivoSlider();
    });
    </script>
    </div>

You also need to rename htmlcaption1 to htmlcaption2.

Alfa1 07-20-2011 03:26 AM

Im only getting the date, but no slider. Im using the code in the 1st post.

Mooff 07-20-2011 08:27 AM

Per default the execution code in a cms-php widget is returning the date.

After you create the widget you have to click on "Configure" on the right and insert my code.


edit: let me clarify that one.
You have to delete that code, which is in there by default:
Code:

$output = date(vB::$vbulletin->options['dateformat']) . "<br />\n";
If you post additional code below that line nothing will happen. It just takes the output value - and doesn't even evaluate the rest.

starman? 07-20-2011 01:52 PM

This would be awesome if I could get it to work. I get the title and text from the article but no images. I've followed your instructions precisely and have tried different sized images and still only the title and text shows. Any ideas?

Mooff 07-20-2011 02:05 PM

Some ideas:
  • set the fallback image switches to true:
    $show_articles_without_image = true;
    $fallback_img = 'external/unitedforum/slider/uf_fallback_slider.png'; //path to an existing picture

    If the images show up we at least know the slider is working correctly and the bug is somewhere in the vb4 implementation
  • the images are resized using the php GD package (vbulletin does support both GD and ImageMagick) - the slider currently has no ImageMagick support. Do you have the GD package installed?
  • comment out the first and the last line
    Code:

    //ob_start();

    //ob_end_clean();

    You will then see error messages and warnings (given there are some), once you load the cms page where your slider is active. Please send me this output.

starman? 07-20-2011 02:42 PM

GD already installed. I've done all the other changes you have suggested and still the same. Title and text - no image. No error messages or warnings.

Mooff 07-20-2011 02:48 PM

Neither the fallback image nor an error? That's really strange.
Please link me to your test site - if that's not possible please include a var_dump here:

old:
Code:

    //Randomize Array
    //shuffle($featured_articles);

new:
Code:

    //Randomize Array
    //shuffle($featured_articles);
var_dump($featured_articles);

given you still have ob_start(); and ob_end_clean(); commented out you should see a lot of debug information.

HellRZR 07-20-2011 02:49 PM

Nice mod, can it be changed or modified easily to do the following. Pull the cms articles and display them on the forum home instead?

starman? 07-20-2011 03:09 PM

After adding the var_dump, I get a browser error in FF5.0 -
Content Encoding Error - The page you are trying to view cannot be shown because it uses an invalid or unsupported form of compression.

and a can't load page error in IE9.

Thanks for your help so far.

Mooff 07-20-2011 03:40 PM

@HellRZR, should be pretty easy.
Without testing the way it might/should work.

Plugin Hook Location: i don't know, has to be an early one for FORUMHOME.
maybe: process_templates_complete ?
Create a plugin, insert the code, at the end of the code add:
Code:

   
$templater = \vB_Template::create('nivo_slider');
$templater->register('output', $output);
$template_hook['insertAsensibleHookHere'] .= $templater->render();

as template_hook you have to use the place where it should show up (search through the forumhome template for template hooks and choose one.

Then create a template named nivo_slider and insert
Code:

{vb:raw output}
It then should show up.


@starman
Damn. I'm kinda lost now. Without debug message it is basecially guesswork. :(
Let's try this: Remove that var_dump again and send me the source code of your slider cms-page you get viewing it via firefox5.0 ( ctrl+u) starting at: "
<link rel="stylesheet" href="' .$slider_img_filepath. '/nivo-slider.css" type="text/css" media="screen" />
...

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


Maybe i'll see something there.

Alfa1 07-20-2011 04:25 PM

Quote:

Originally Posted by Mooff (Post 2222761)
Per default the execution code in a cms-php widget is returning the date.

After you create the widget you have to click on "Configure" on the right and insert my code.


edit: let me clarify that one.
You have to delete that code, which is in there by default:
Code:

$output = date(vB::$vbulletin->options['dateformat']) . "<br />\n";
If you post additional code below that line nothing will happen. It just takes the output value - and doesn't even evaluate the rest.

That code is removed and replaced by your code. Yet the date still shows. When I refresh the page it goes away, but upon refreshing again its there again. :confused:

Sometimes when refreshing, I get this error:
Code:

Parse error:  syntax error, unexpected '&' in /packages/vbcms/widget/execphp.php(191) : eval()'d code on line 17
or
Code:

Parse error:  syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in /packages/vbcms/widget/execphp.php(191) : eval()'d code on line 14

mitch84 07-20-2011 04:42 PM

thank you, work fine, installed in two minutes, great work!;)

Mooff 07-20-2011 04:48 PM

@mitch84
Thanks for the feedback. Allways nice to hear when it is working. :)

@Alfa1
I have no idea what's broken there. Doesn't sound like a mistake in my code. Do you have other php widgets running? Do they produce similar errors?

starman? 07-20-2011 04:50 PM

PM sent

Alfa1 07-20-2011 05:10 PM

Quote:

Originally Posted by Mooff (Post 2222938)
@mitch84
Thanks for the feedback. Allways nice to hear when it is working. :)

@Alfa1
I have no idea what's broken there. Doesn't sound like a mistake in my code. Do you have other php widgets running? Do they produce similar errors?

I have one other php widget running, but that does not produce any error.

Morpheus NS 07-20-2011 07:25 PM

Is it possible to make it work for 4.1.1? I followed your instructions, but all I get is the white background.

Edit: Nevermind, I just made it work. But, here is another problem. It shows only fallback image...

Mooff 07-21-2011 11:39 AM

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)


@Morpheus NS
Your issue could be the slashes. Meaning the path ending up at /http/slider//picture.jpg which could break it. Please try 0.9.1.

If that isn't the problem check whether the pictures are saved in the folder you chose and if you can look them up manually in your browser.

Alfa1 07-22-2011 05:53 AM

The new version work much better for me. No more errors and I now see titles and text. No images yet though. If I outcomment the 1st and last line, then I get these errors:

Code:

Warning: fopen() [function.fopen]: URL file-access is disabled in the server configuration in [path]/packages/vbcms/widget/execphp.php(191) : eval()'d code on line 110

Warning: fopen(http://www.mysite.org/attachment.php?attachmentid=79&amp;cid=18) [function.fopen]: failed to open stream: no suitable wrapper could be found in [path]/packages/vbcms/widget/execphp.php(191) : eval()'d code on line 110

Warning: fopen() [function.fopen]: URL file-access is disabled in the server configuration in [path]/packages/vbcms/widget/execphp.php(191) : eval()'d code on line 110

Warning: fopen(http://www.mysite.org/attachment.php?attachmentid=90&cid=18) [function.fopen]: failed to open stream: no suitable wrapper could be found in [path]/packages/vbcms/widget/execphp.php(191) : eval()'d code on line 110

Warning: fopen() [function.fopen]: URL file-access is disabled in the server configuration in [path]/packages/vbcms/widget/execphp.php(191) : eval()'d code on line 110

Warning: fopen(http://www.mysite.org/attachment.php?attachmentid=93&cid=18) [function.fopen]: failed to open stream: no suitable wrapper could be found in [path]/packages/vbcms/widget/execphp.php(191) : eval()'d code on line 110

Warning: fopen() [function.fopen]: URL file-access is disabled in the server configuration in [path]/packages/vbcms/widget/execphp.php(191) : eval()'d code on line 110

Warning: fopen(http://www.mysite.org/attachment.php?attachmentid=92&cid=18) [function.fopen]: failed to open stream: no suitable wrapper could be found in [path]/packages/vbcms/widget/execphp.php(191) : eval()'d code on line 110


Mooff 07-22-2011 09:24 AM

We are using the fopen() function to check whether the file does still exist on the external server before we start our image manipulation.

Seems like url file access is blocked on your server. I don't know whether this is done via your provider or if you can switch it on in your php.ini
http://www.php.net/manual/en/filesys...figuration.php

That would be your first option.

Second option ist to replace this code:
Code:

                    $filehandle = fopen($article['previewimage'], 'r');
                    if(is_resource($filehandle))
                    {
                        fclose($filehandle);

with the curl based file check (your server needs to have cUrl for that.
Code:

                    $can_open_file = false;                   
                    if(strpos($article['previewimage'], 'http://') === false)
                    {
                        $can_open_file = is_readable($article['previewimage']);
                    }
                    else
                    {
                        // initialize a new curl resource
                        $ch = curl_init();

                        // set the url to fetch
                        curl_setopt($ch, CURLOPT_URL, $article['previewimage']);

                        //exclude the header
                        curl_setopt($ch, CURLOPT_HEADER, FALSE);
                       
                        //exclude the body
                        curl_setopt($ch, CURLOPT_NOBODY, TRUE);
                       
                        // return the value instead of printing the response to browser
                        curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);


                        //take the content as a instance
                        //$filehandle = curl_exec($ch);
                        if(!curl_errno($ch))
                        {
                            $can_open_file = true;
                        }
                                             
                        curl_close($ch);
                    }
                    if($can_open_file)
                    {

If that doesn't work you can try to ignore the file_check and see if the GD url access isn't blocked (like fopen() is).
So the third option would be:
Replace
Code:

                    $filehandle = fopen($article['previewimage'], 'r');
                    if(is_resource($filehandle))
                    {
                        fclose($filehandle);

with
Code:


                    if(true)
                    {


If that doesn't work i'm out of options.



P.S.: On my testsite i have the curl option running right now.

Alfa1 07-22-2011 05:51 PM

Yes, fopen is blocked on purpose due to the major security risks involved. Curl is active though, so that should work. But for some reason it doesn't. Would you mind checking it out?

Mooff 07-23-2011 08:03 AM

Please check if the folder you specified here:
$slider_img_filepath = 'external/unitedforum/slider/';
is writeable and whether the addon does save slides in there.

Alfa1 07-23-2011 03:01 PM

Its 777 writable, but the addon does not save anything.

Mooff 07-23-2011 03:24 PM

Oh geez i'm so stupid. It doesn't work with attachments right now - i'll fix that bug and post a new version later today.

Alfa1 07-23-2011 03:44 PM

Thanks!

Mooff 07-23-2011 03:50 PM

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


There you go - code in first post updated.
That should do the trick. =)

SECTalk.com 07-23-2011 07:44 PM

Add-on works insofar as it resizes the images and writes them into the folder. It also displays the little background image. But it won't display anything else.

Any ideas?

When I comment out the first and last lines, same thing. No errors.

Thanks


All times are GMT. The time now is 05:15 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.03778 seconds
  • Memory Usage 2,063KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (23)bbcode_code_printable
  • (5)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (1)pagenav_pagelinkrel
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (40)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 

Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.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/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.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
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete