Announcement

Collapse
No announcement yet.

CMS Slideshow Widget

Collapse
X
Collapse
  •  

  • CMS Slideshow Widget



    I couldn't find a simple step by step guide on how to implement a slideshow onto the vBulletin CMS so I decided to create one. This tutorial was created for a few people who've pm'd me about how to implement the "Nivo Slider."

    This is a very quick and simple tutorial on how to create a CMS Slideshow Widget on your vBulletin site. This utilizes the open source "Nivo Slider" and has been optimized for the vBulletin CMS.



    You can see more examples of it here...
    http://nivo.dev7studios.com/theme-demos/

    For proper installation, please make sure you follow all steps in order.


    Instructions

    ______________________________________________________________


    Step 1 - Download and Edit Files
    • Download and extract the "slideshow.zip" attachment from this article (located below).
    • Important!- Edit the "style.css" file(inside css folder) and change all the "http://www.yourvBulletinsiteurl.com" to your vBulletin site url.



    Step 2 - Upload Files
    Upload the "Slideshow" folder to your vBulletin root directory via FTP.


    Step 3 - Add Template
    Go to your vBulletin Admin Control Panel -> Style Manager -> Add New Template

    Input the following....
    Title:
    Code:
    vbcms_slideshow
    Template:
    Code:
     
     
        vB Slideshow 
         
         
     
     
    
    (Important!)
    Make sure you edit the template to the corresponding urls...

    Save. (Template saves in the "vBulletin CMS Templates" category.)



    Step 4 - Create Widget
    • Go to your Admin Control Panel -> vBulletin CMS -> Widgets -> Create New Widget
    • Choose "Static HTML"
    • Title: Slideshow
    • Save




    Step 5 (Linking Widget to "vbcms_slideshow" template)
    Click on "Configure" on the "Slideshow" widget.
    Input the following:
    • Enter Static Html: slideshow
    • Template Name: vbcms_slideshow
    • Save.



    Step 6 - Assign to Layout
    • Go to vBulletin Admin Control Panel -> vBulletin CMS -> Layout Manager
    • Select a layout to add the widget to.



    Congrats!
    You've successfully added a vBulletin Slideshow Widget into your CMS!



    ______________________________________________________________

    Extra!

    Customize CSS
    You can play around with the CSS settings by editing the following files...
    • css/style.css
    • css/nivo-slider.css


    Customize Slideshow Effects
    You can play around with the slideshow effects by adding/editing the following codes in the vbcms_template
    Code:
    effect:'slideInLeft', // Specify sets like: 'fold,fade,sliceDown'
            animSpeed:250, // Slide transition speed
            pauseTime:8000, // How long each slide will show
            startSlide:0, // Set starting Slide (0 index)
            directionNav:false, // Next & Prev navigation
            directionNavHide:false, // Only show on hover
            controlNav:true, // 1,2,3... navigation
            controlNavThumbs:false, // Use thumbnails for Control Nav
            controlNavThumbsFromRel:false, // Use image rel for thumbs
    captionOpacity:1, // Universal caption opacity
            keyboardNav:true, // Use left & right arrows
            pauseOnHover:true, // Stop animation while hovering
    You can read more about customizing the slider settings here...
    Nivo Slider Usage


    Dynamic Slideshow (Pull Content From CMS Articles)

    Thanks to reefland for this guide on how to pull content from the CMS.
    Originally posted by reefland
    Here is how you might pull some dynamic content from the CMS.

    Create a plugin:
    Hook Location - vbcms_section_populate_start (vBulletin CMS)
    Name - Whatever you want
    Execution Order - 5

    (Note: in the code below, change the cnc.categoryid = 53 to whatever CMS categoryid you want to assign slider articles to)
    Plugin Code -
    PHP Code:
    $nivo_slider vB::$db->query_read(
            SELECT
                 ca.contentid,
                 cn.url,
                 cn.publishdate,
                 cn.nodeid,
                 ca.previewimage,
                 cni.description,
                 cni.title
             FROM
                 " 
    TABLE_PREFIX "cms_nodecategory cnc
             JOIN
                 " 
    TABLE_PREFIX "cms_node cn
             ON
                 cnc.nodeid = cn.nodeid
             JOIN
                 " 
    TABLE_PREFIX "cms_article ca
             ON
                 cn.contentid = ca.contentid
             JOIN
                 " 
    TABLE_PREFIX "cms_nodeinfo cni
             ON
                 cn.nodeid = cni.nodeid
             WHERE
                 cnc.categoryid = 53
             AND
                 cn.setpublish = 1
             AND
                 UNIX_TIMESTAMP() > cn.publishdate
             ORDER BY
                 cn.publishdate desc LIMIT 5
                        "
    ); 
           
    $list mysql_num_rows($nivo_slider);
         if (
    $list == 0) {
             echo 
    "$list Results";
         } else {
                   while(
    $rows mysql_fetch_array($nivo_slider)) {
     
    $nivooutput .='<a href="content.php?r='.$rows[nodeid].'"><img src="'.$rows[previewimage].'" title="'.$rows[title].'" /></a>';

                  } 
            } 

    /* register variables */
     
    vB_Template::preRegister('vbcms_slideshow',array('nivooutput' => $nivooutput)); 
    Then place this in the vbcms_slideshow template created in Jaspers step:

    Code:
    
      
         vB Slideshow
         
         
     
     
     
    $nivooutput

    ​This is untested but should work ok. Sorry if my code is not "optimized", that's not my specialty.
    Attached Files

    • benative
      #67
      benative commented
      Editing a comment
      Originally posted by reefland
      chabit77,

      It looks like it is working for you.
      Ya, that slider at www.alclrugby.fr looks pretty awesome. I suppose that he used your modification to do that. but did you create a finished mod for this? I mean.. is there any direct link of the mod on vbulletin.org which I can just download the file and install it as a product?

    • daanbiesterbos
      #68
      daanbiesterbos commented
      Editing a comment
      Alfa1

      Such an ungrateful additude. You may not be able to get these 'things to work'. And this particular topic may not interest you, since it... Did not give you an easy, free & ready-to-go-solution to begin with. This is a very useful post for developers trying to get a grasp on how vb works under the hood. The more info the better of course. But I'm thankful to everyone who contribute to a community. How can you blame someone for not 'going all the way'? Did you feel someone wasted your time, for not giving you exactly what you needed?

      Originally posted by Alfa1
      Well its nice of you to write this up for those people. Even though the same is also available on vbulletin.org and a link would have sufficed.

      I think that having a slider in the CMS is quite basic functionality and adding a JIRA feature request for this would make as much sense as posting a JIRA feature request for a better CMS. Like every CMS on the web, you have obviously noticed the demand for a slider for vbulletin. Then why not go all the way and add a slider thats shows the latest vbulletin content?

      Nothing has happened to the other 113 feature requests that I posted to JIRA, nor the 300 suggestions in the suggestions forums. Mind that this is a lot of effort gone to waste. So whats the use adding more?

    • Marccap
      #69
      Marccap commented
      Editing a comment
      everything is working except i cant see my text - any ideas?
    Posting comments is disabled.

About the Author

Collapse

Jasper Aguila I've worked with the vBulletin software for years. To be involved with the process of delivering the product is a dream come true to me. Find out more about Jasper Aguila

Article Tags

Collapse

advanced (5) album bits (1) android (2) api (29) array (17) beginner (17) blog (4) calendar (2) cms (2) Custom (1) forum (3) forums (4) Intermediate (7) iphone (3) Logo (1) mapi (30) methods (10) mobile (34) sections (1) security (2) style (2) tags (1) threads (4) vb5howto (5) vBulletin (5)

Latest Articles

Collapse

  • Managing CMS Section and Content
    by Don Kuramura
    Here's a quick Visual Guide on how Manage Sections in the new CMS.

    1. Editing a Section: If you have permissions to manage a Section, as you hover over the Section title, a pencil icon will display.

    After clicking the pencil icon, you will be taken to the Section Edit page. Here's what you will see:

    2. Section Name:
    Enter the Section Name
    3. SEO URL Alias: This is the SEO Friendly URL. By default, if this is blank, the system will automatically copy the section title.
    4. Section Layout: For each section you can define an individual section layout.
    ...
    Tue 11th Mar '14, 3:04pm
  • How to Create a New Article
    by Don Kuramura
    Here's a quick visual guide on how to create a new article with the CMS.

    1. Create New Article Button: Navigate to the section you want the article to be published in. Click on the “Create a New Article” button. This will open an article form.


    2. Article Title: In the "Add/Edit Article" screen, enter the title of your article in the “Title” textbox.
    ...
    Tue 11th Mar '14, 3:04pm
  • Promoting Articles from the Forums
    by Don Kuramura
    One of the innovative new features on vBulletin 4.0 Publishing Suite is the cross-publishing "Promote to Article" functionality. In the spirit of promoting content discovery, we wanted to create features that will allow content to flow between Forums, Blogs, and Articles. For example, there might be a really popular post in the forums, but unfortunately it is buried inside page 13 of a thread. We will now have an option (if you have permissions) to “promote” a forum (or blog) post as a new artic...
    Tue 11th Mar '14, 3:04pm
  • Welcome to the new CMS. Read me first.
    by Don Kuramura
    Welcome to the new CMS. Here's a quick guide of the different areas of this page.

    1. Section Navigation Widget. This widget allows you to go to different sections. The "plus icon" means that this section has sub-sections. Clicking on the "plus icon" will display the sub-sections. ...
    Tue 11th Mar '14, 3:04pm
  • Recovering a hacked vBulletin Site
    by TheLastSuperman
    Symptoms

    Having your site hacked is something no owner wants to experience due to the fact it takes quite a bit of effort to fix, often times requiring payment to a experienced third-party when a owner feels inundated by the sheer amount of work required to troubleshoot and remedy the situation.
    • Site has been defaced - This is the most blatant form of hacking where your sites pages have been replaced with a very disruptive and sometimes rude message from the hacker themselves.
    ...
    Tue 12th Jun '12, 2:37am
  • Issues After Upgrading
    by TheLastSuperman
    If your running a completely default forum upgrading is a very simple process. Many sites however run third-party add-ons and even use a custom style therefor when things change between older and newer
    Thu 24th May '12, 1:02pm
Working...
X