Picture and Album Gallery CMS and Forum Sidebar Widgets

Discussion in 'vBulletin' started by DRE, Jan 8, 2011.

  1. DRE

    DRE Coder/Designer

    563
    212
    +62
    By request, this is a quick tutorial on how to add photo widgets to your vbulletin CMS or Forum Sidebar.

    Picture and Album Gallery is free. Get it here: http://www.vbulletin.org/forum/showthread.php?t=237931

    Install it.

    CMS Widget

    Admin Control Panel / vBulletin CMS / Widgets / Create New Widget

    Widget Type: PHP Direct Execution
    Title: Pics from The Gallery
    Description: Random Pictures From Public Albums

    Save.

    Then click on Configure


    Code:
    // Display random images thumbnails taken from any public albums.
    // Author : Sulquendi
    // Version: 1.2
    
    // -- Widget Configuration -- 
    $use_vB_thumbnail_size     = false;
    $use_custom_css         = false;
    $twidth                 = 190;
    [color=red]$limit                    = 8;[/color]
    $albums_list            = "";
    
    
    // -- Nothing to configure below this line --
    if ($use_custom_css){
        $pthumb     = 'class="pthumb"';
        $pcaption    = 'class="pcaption"';
        $pmore        = 'class="pmore"';
        $pstyle        = '';
    }else{
        $pthumb     = 'style="text-align:center;"';
        $pcaption    = 'style="text-align:center;font-style:italic;font-family: Times, serif;margin-bottom:10px;"';
        $pmore        = 'style="text-align:right;display:block;"';
        $pstyle        = 'style="border: 1px solid black;padding:4px;background: white;"';
    }
    if ($albums_list!="") $sup_cond = "AND alb.albumid IN ($albums_list)"; else $sup_cond ="";
    ob_start();
    require_once(DIR . '/includes/functions_album.php');
    require_once(DIR . '/includes/functions_user.php');
    $pic_get = vB::$db->query_read("
        SELECT     alb.albumid, att.attachmentid, att.userid, att.caption, att.dateline, att.state, fdt.filesize, IF(fdt.thumbnail_filesize > 0, 1, 0) AS hasthumbnail, fdt.thumbnail_dateline, fdt.thumbnail_width, fdt.thumbnail_height, u.username
        FROM ".TABLE_PREFIX."album AS alb
        LEFT JOIN ".TABLE_PREFIX."attachment AS att ON alb.albumid = att.contentid
        LEFT JOIN ".TABLE_PREFIX."filedata AS fdt ON att.filedataid = fdt.filedataid
        LEFT JOIN ".TABLE_PREFIX."user AS u ON att.userid = u.userid
        WHERE alb.state = 'public' AND att.contenttypeid = '8' $sup_cond
        ORDER BY rand(" . microtime()*1000000 . ") 
       LIMIT $limit");
      $output_bits = "";
      while($pic = vB::$db->fetch_array($pic_get))
      {
        $albuminfo = fetch_albuminfo($pic[albumid]);
        $picture = prepare_pictureinfo_thumb($pic, $albuminfo);
        if ($use_vB_thumbnail_size) $size = $picture[dimensions]; else $size = "width=$twidth";
        $output_bits .= "<div $pthumb><a href=\"album.php?{$vbulletin->session->vars['sessionurl']}albumid={$pic[albumid]}&attachmentid={$picture[attachmentid]}\"><img $pstyle src=\"attachment.php?{$vbulletin->session->vars['sessionurl']}attachmentid={$picture[attachmentid]}&thumb=1&d={$picture[thumbnail_dateline]}\" alt=\"{$picture[caption_preview]}\" $size /></a>";
        $output_bits .= "</div><div $pcaption>{$picture[caption_preview]} by {$pic[username]}</div>";
      }
    $output_bits .= '<span '.$pmore.'><a href="album.php" alt="To the albums">More...</a></span>';
    $output = $output_bits;
    ob_end_clean(); 
    Save.

    CMS Widget

    Admin Control Panel / Forums & Moderators / Forum Blocks Manager / Add Block /

    Add Block Type: Custom HTML/PHP
    Title: Pic From The Gallery
    Description: Random Pictures From Public Albums
    Content Type: PHP

    Content:

    Code:
    // Display random images thumbnails taken from any public albums.
    // Author : Sulquendi
    // Version: 1.2
    
    // -- Widget Configuration -- 
    $use_vB_thumbnail_size     = false;
    $use_custom_css         = false;
    $twidth                 = 190;
    [color=red]$limit                    = 1;[/color]
    $albums_list            = "";
    
    
    // -- Nothing to configure below this line --
    if ($use_custom_css){
        $pthumb     = 'class="pthumb"';
        $pcaption    = 'class="pcaption"';
        $pmore        = 'class="pmore"';
        $pstyle        = '';
    }else{
        $pthumb     = 'style="text-align:center;"';
        $pcaption    = 'style="text-align:center;font-style:italic;font-family: Times, serif;margin-bottom:10px;"';
        $pmore        = 'style="text-align:right;display:block;"';
        $pstyle        = 'style="border: 1px solid black;padding:4px;background: white;"';
    }
    if ($albums_list!="") $sup_cond = "AND alb.albumid IN ($albums_list)"; else $sup_cond ="";
    ob_start();
    require_once(DIR . '/includes/functions_album.php');
    require_once(DIR . '/includes/functions_user.php');
    $pic_get = vB::$db->query_read("
        SELECT     alb.albumid, att.attachmentid, att.userid, att.caption, att.dateline, att.state, fdt.filesize, IF(fdt.thumbnail_filesize > 0, 1, 0) AS hasthumbnail, fdt.thumbnail_dateline, fdt.thumbnail_width, fdt.thumbnail_height, u.username
        FROM ".TABLE_PREFIX."album AS alb
        LEFT JOIN ".TABLE_PREFIX."attachment AS att ON alb.albumid = att.contentid
        LEFT JOIN ".TABLE_PREFIX."filedata AS fdt ON att.filedataid = fdt.filedataid
        LEFT JOIN ".TABLE_PREFIX."user AS u ON att.userid = u.userid
        WHERE alb.state = 'public' AND att.contenttypeid = '8' $sup_cond
        ORDER BY rand(" . microtime()*1000000 . ") 
       LIMIT $limit");
      $output_bits = "";
      while($pic = vB::$db->fetch_array($pic_get))
      {
        $albuminfo = fetch_albuminfo($pic[albumid]);
        $picture = prepare_pictureinfo_thumb($pic, $albuminfo);
        if ($use_vB_thumbnail_size) $size = $picture[dimensions]; else $size = "width=$twidth";
        $output_bits .= "<div $pthumb><a href=\"album.php?{$vbulletin->session->vars['sessionurl']}albumid={$pic[albumid]}&attachmentid={$picture[attachmentid]}\"><img $pstyle src=\"attachment.php?{$vbulletin->session->vars['sessionurl']}attachmentid={$picture[attachmentid]}&thumb=1&d={$picture[thumbnail_dateline]}\" alt=\"{$picture[caption_preview]}\" $size /></a>";
        $output_bits .= "</div><div $pcaption>{$picture[caption_preview]} by {$pic[username]}</div>";
      }
    $output_bits .= '<span '.$pmore.'><a href="album.php" alt="To the albums">More...</a></span>';
    $output = $output_bits;
    ob_end_clean();
    Save.

    The code highlighted in red shows you where you can change the number of pictures displayed
     
  2. osedaddy

    osedaddy Neophyte

    2
    1
    +0
    this works good with the cms. Can you tell me how long the time is before the new pics are generated? And can the time frame be changed?
     
  3. osedaddy

    osedaddy Neophyte

    2
    1
    +0
    Sorry I missed the obvious. The time variable is a simple field to fill in the options.
     
  4. bobscat

    bobscat Neophyte

    1
    1
    +0
    good. 'cause i couldn't fiind the line the first time

    google android development
     
    Last edited: Jul 16, 2011
  5. DRE

    DRE Coder/Designer

    563
    212
    +62
    I don't even remember posting this lol...
     
  6. coffeelover

    coffeelover Neophyte

    2
    0
    +0
    Thanks!

    Thanks for this little bit of code/add-on! It works great! I have been looking for a way to do this very thing on my forum. Quick question: Is there any way to bump everything from the top border (around the image) down about 2-5 pixels?

    Thanks again!
     
  7. coffeelover

    coffeelover Neophyte

    2
    0
    +0
    Ok, I figured out how to create a little space above the thumbnail image. Here's the code I am using (slightly modified) just in case someone else bumps into this thread and wants to try it.

    Thanks again to Octavius for making it available!

    Code:
    // Display random images thumbnails taken from any public albums.
    // Author : Sulquendi
    // Version: 1.2
    
    // -- Widget Configuration -- 
    $use_vB_thumbnail_size     = false;
    $use_custom_css         = false;
    $twidth                 = 160;
    $limit                    = 2;
    $albums_list            = "";
    
    
    // -- Nothing to configure below this line --
    if ($use_custom_css){
        $pthumb     = 'class="pthumb"';
        $pcaption    = 'class="pcaption"';
        $pmore        = 'class="pmore"';
        $pstyle        = '';
    }else{
        $pthumb     = 'style="text-align:center;margin-top:10px;margin-bottom:4px;"';
        $pcaption    = 'style="text-align:left;font-style:italic;font-family: Times, serif;margin-bottom:10px;"';
        $pmore        = 'style="text-align:right;display:block;"';
        $pstyle        = 'style="border: 2px solid black;padding:4px;background: white;"';
    }
    if ($albums_list!="") $sup_cond = "AND alb.albumid IN ($albums_list)"; else $sup_cond ="";
    ob_start();
    require_once(DIR . '/includes/functions_album.php');
    require_once(DIR . '/includes/functions_user.php');
    $pic_get = vB::$db->query_read("
        SELECT     alb.albumid, att.attachmentid, att.userid, att.caption, att.dateline, att.state, fdt.filesize, IF(fdt.thumbnail_filesize > 0, 1, 0) AS hasthumbnail, fdt.thumbnail_dateline, fdt.thumbnail_width, fdt.thumbnail_height, u.username
        FROM ".TABLE_PREFIX."album AS alb
        LEFT JOIN ".TABLE_PREFIX."attachment AS att ON alb.albumid = att.contentid
        LEFT JOIN ".TABLE_PREFIX."filedata AS fdt ON att.filedataid = fdt.filedataid
        LEFT JOIN ".TABLE_PREFIX."user AS u ON att.userid = u.userid
        WHERE alb.state = 'public' AND att.contenttypeid = '8' $sup_cond
        ORDER BY rand(" . microtime()*1000000 . ") 
       LIMIT $limit");
      $output_bits = "";
      while($pic = vB::$db->fetch_array($pic_get))
      {
        $albuminfo = fetch_albuminfo($pic[albumid]);
        $picture = prepare_pictureinfo_thumb($pic, $albuminfo);
        if ($use_vB_thumbnail_size) $size = $picture[dimensions]; else $size = "width=$twidth";
        $output_bits .= "<div $pthumb>
    <a href=\"album.php?{$vbulletin->session->vars['sessionurl']}albumid={$pic[albumid]}&attachmentid={$picture[attachmentid]}\">
    <img $pstyle src=\"attachment.php?{$vbulletin->session->vars['sessionurl']}attachmentid={$picture[attachmentid]}&thumb=1&d={$picture[thumbnail_dateline]}\" alt=\"{$picture[caption_preview]}\" $size /></a>";
        $output_bits .= "</div><div $pcaption>{$picture[caption_preview]} by {$pic[username]}</div>";
      }
    $output_bits .= '<span '.$pmore.'><a href="picall.php?" alt="View Member Images">More Images...</a></span>';
    $output = $output_bits;
    ob_end_clean();
     
  8. metindemirci

    metindemirci Neophyte

    1
    1
    +0
    hello
    Vertical yours
    Horizontal me Required
     
    Last edited: Dec 19, 2011
  9. LloydM

    LloydM Adherent

    403
    95
    +8
  10. dune3000

    dune3000 Neophyte

    1
    1
    +0
    Great work guys ..
    is there any chance I can post only 1 or 2 pictures (fix pictures)
    How I change time display in above

    thank you,
     
    Last edited: Jan 31, 2012
  11. sstiller

    sstiller Neophyte

    1
    1
    +0
    Thanks very much for these nice working Widget. I've integrated that in my forum.

    Within my CMS i would like to show the picture horizontical. What have I to do, to show the thumbnails in a row instead of column.
     
  12. DRE

    DRE Coder/Designer

    563
    212
    +62
    I haven't the slightest idea. I use Xenforo now.
     
Verification:
Draft saved Draft deleted