YouTube Video Gallery

[RateU]

Moved to Post #5

[ZiNgA BuRgA]

WOW, very nice and excellent work RateU

I'll suggest adding a text mask to the text field:

Code:

^[a-zA-Z0-9_\-+]{8,16}$

---

This basically forces people to enter in an ID.
Also, perhaps reduce the width of the text box to something like "20" to help indicate that only an ID is required, not the entire URL.

Thanks again

[RateU]

Ah.. yes, yes, yes. Adding the text mask for the field.
Thank you very much, Yumi.
I've updated my post

[Mark2x]

Oh my god this is perfect since the Youtube Gallery is bugged (The plugin by Vika) So this helps me so much.


Thank you very much.

[RateU]

Requirement: XThreads
Last Edit: 7 October 2012

This is another layout for XThreads YouTube Video Gallery. We will use category for this layout.

Custom Thread Fields Setting:

1. Textbox for YouTube Video ID:
   Create a Custom Thread Fields with this settings:
   • Title: YouTube Video ID / URL
   • Key: ytvgalid
   • Applicable Forums: 'select a forum that we will apply the this layout'
   • Input Field Type: Textbox
   • Maximum Text Length: 50
   • Field Input Width: 50
   • Display Format :
     Code:

     {VALUE$1}{VALUE$2}

     ---

     If user fill the field with "watch" video id, the value 1 will be used, the value 2 will be "blank".
     If user fill the field with "watch" video url, the value 2 will be used, the value 1 will be "blank".

   • Text Mask Filter:
     
     Code:

     ^(?:([a-zA-Z0-9_\-+]{8,16})$|https?\://(?:[a-z]{1,4}\.)?(?:youtube\.com/(?:embed/|v/|watch\?v=)|youtu\.be/)([a-zA-Z0-9_\-+]{8,16}))

     ---

     this kind of URL supported (thank you very much, Yumi ):
     

     Code:

     Video ID Only - Match - value 1 http://www.youtube.com/watch?v=video_id - Match - value 2 http://www.youtube.com/watch?v=video_id&feature=featured - Match - value 2 http://youtube.com/watch?v=video_id - value 2 http://youtube.com/watch?v=video_id&feature=featured - Match - value 2

     ---

   • Editable by / Required Field?: Everyone (required)
     Variable in template for displaying this field is: {$GLOBALS['threadfields']['ytvgalid']}.
     
2. Listbox for Video Category:
   Create a Custom Thread Fields with this settings:
   • Title: Video Category
   • Key: ytvgalcat
   • Applicable Forums: 'select the forum above'
   • Input Field Type: Listbox
   • Field Input Height: 1
   • Values List:
     Code:

     Music Anime Funny

     ---

     Modify it as our needs.

   • Editable by / Required Field?: Everyone (required)
   • Allow Filtering: Yes
     We put the filtering url manually in template. We can find it in:
     1. Template #7 - ytvgal_forumdisplay_threadlist - line #7 - #18
     2. Template #16 - ytvgal_showthread - line #20 - #31
     So, if we want to modify the value lists, we need to modify those templates too.
     

Edit the selected forum with this XThreads Options settings:

1. Template Prefix: ytvgal_
2. Thread Grouping: 4
3. Show first post on every showthread page: Yes
4. Enable XThreads' Inline Forum Search: Yes
5. Override Threads Per Page: 20
   Modify it as our needs.
6. Settings Overrides:
   • Setting: Showthread Options -> Post Per Page:
     Value: 5
     Modify it as our needs.
   • Setting: Showthread Options -> Post Layout
     Value: horizontal
     
     Code:

     postsperpage=5 postlayout=horizontal

     ---

7. Custom WOL Text:
   • Forum Display: Viewing <a href="{1}">{2}</a>
   • New Thread: Adding New Video
   • New Reply: Commenting <a href="{1}">{2}</a> Video
   • Show Thread: Watching <a href="{1}">{2}</a> Video
     

We can set the forum settings like disabling IMG code and etc. Also, we can set the forum permission, which usergroup can post video, commenting and etc.

Now, we need to create new templates in Global Template. Please remember that some images in this example linked from tynipic. If we want to use our own image from our server, we need to edit the images url. We can find it in:
1. Template #7 - ytvgal_forumdisplay_threadlist - line #7 - #18 - Images for category - 3 images.
2. Template #7 - ytvgal_forumdisplay_threadlist - line #62 - Image for YouTube Logo - 1 image.
3. Template #16 - ytvgal_showthread - line #20 - #31 - Images for category - 3 images.

Admin CP -> Templates & Style -> Templates -> Global Templates:

1. Template Name: ytvgal_forumdisplay_group_sep
   
   HTML Code

   </tr><tr>

   ---

2. Template Name: ytvgal_forumdisplay_inlinemoderation_col
   
   HTML Code

   <td align="center" width="1" style="background: #ADCBE7; border-top: 2px solid #0F5C8E; border-bottom: 2px solid #0F5C8E;"><input type="checkbox" name="allbox" onclick="inlineModeration.checkAll(this)" /></td>

   ---

3. Template Name: ytvgal_forumdisplay_nothreads
   
   HTML Code

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   <td> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" width="100%" style="border-bottom: 2px solid #8DC93E;"> <tr> <td style="background: #D6ECA6; border-top: 2px solid #8DC93E; border-bottom: 2px solid #8DC93E;"> <strong>No Video</strong> </td> </tr> <tr> <td align="center"> {$lang->nothreads} </td> </tr> </table> </td>

   ---

4. Template Name: ytvgal_forumdisplay_searchforum_inline
   
   HTML Code

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   <table border="0" cellspacing="{$GLOBALS['theme']['borderwidth']}" cellpadding="{$GLOBALS['theme']['tablespace']}" width="100%" style="border-bottom: 2px solid #0F5C8E;"> <tr> <td style="background: #ADCBE7; border-top: 2px solid #0F5C8E; border-bottom: 2px solid #0F5C8E;"> <strong>Search Video</strong> </td> </tr> <tr> <td align="center"> <form action="forumdisplay.php" method="get"> <input type="text" class="textbox" name="search" value="{$searchval}" /> {$gobutton} <input type="hidden" name="fid" value="{$fid}" /> <input type="hidden" name="sortby" value="{$sortby}" /> <input type="hidden" name="order" value="{$sortordernow}" /> <input type="hidden" name="datecut" value="{$datecut}" /> </form> </td> </tr> </table>

   ---

5. Template Name: ytvgal_forumdisplay_sticky_sep
   
   HTML Code

   <td colspan="{$colspan}" style="display: none;"></td> </tr> <tr>

   ---

6. Template Name: ytvgal_forumdisplay_thread
   
   HTML Code

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

   <td width="25%" valign="top"> <table border="0" width="100%"> <tr> {$modbit} <td valign="top" align="center"> <a href="{$thread['threadlink']}"> <img src="http://img.youtube.com/vi/{$GLOBALS['threadfields']['ytvgalid']}/default.jpg" alt="" title="{$thread['subject']}" /> </a> <div style="width: 150px; overflow: hidden; white-space: nowrap"> <a href="{$thread['threadlink']}" class="{$inline_edit_class}" id="tid_{$inline_edit_tid}">{$thread['subject']}</a> </div> <div> {$rating} <span class="smalltext"> By: {$thread['profilelink']}<br /> {$thread['threaddate']}, {$thread['threadtime']}<br /> {$thread['views']} {$lang->views}, {$thread['replies']}{$unapproved_posts} Comments </span> </div> </td> </tr> <tr> <td valign="top" colspan="2"> {$thread['multipage']} </td> </tr> </table> </td>

   ---

7. Template Name: ytvgal_forumdisplay_threadlist
   
   HTML Code

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118

   <table width="100%" border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" style="clear: both;"> <tr> <td valign="middle" colspan="2"> <a href="{$forumurl}"><strong>Categories</strong></a> <table border="0" width="100%"> <tr> <td align="center"> <a href="{$forumurl_q}filtertf_ytvgalcat=Music"><img src="http://i28.tinypic.com/2vskbwx.jpg" alt="" /></a><br /> <a href="{$forumurl_q}filtertf_ytvgalcat=Music"><strong>Music</strong></a> </td> <td align="center"> <a href="{$forumurl_q}filtertf_ytvgalcat=Anime"><img src="http://i30.tinypic.com/30c9agi.jpg" alt="" /></a><br /> <a href="{$forumurl_q}filtertf_ytvgalcat=Anime"><strong>Anime</strong></a> </td> <td align="center"> <a href="{$forumurl_q}filtertf_ytvgalcat=Funny"><img src="http://i30.tinypic.com/34t6fsj.jpg" alt="" /></a><br /> <a href="{$forumurl_q}filtertf_ytvgalcat=Funny"><strong>Funny</strong></a> </td> </tr> </table> </td> </tr> <tr> <td valign="top"> <div class="float_right">{$newthread}</div> <table width="100%" border="0"> <tr> <td> <table border="0"> <tr> <td class="smalltext"><strong>Sorted By:</strong></td> <td class="smalltext"><strong><a href="{$sorturl}&amp;sortby=subject&amp;order=asc">Title</a> {$orderarrow['subject']}</strong> | </td> <td class="smalltext"><strong><a href="{$sorturl}&amp;sortby=starter&amp;order=asc">Poster</a> {$orderarrow['starter']}</strong> | </td> <td class="smalltext"><strong><a href="{$sorturl}&amp;sortby=replies&amp;order=desc">Comments</a> {$orderarrow['replies']}</strong> | </td> <td class="smalltext"><strong><a href="{$sorturl}&amp;sortby=views&amp;order=desc">{$lang->views}</a> {$orderarrow['views']}</strong> | </td> {$ratingcol} <td class="smalltext"><strong><a href="{$sorturl}&amp;sortby=lastpost&amp;order=desc">Last Comments</a> {$orderarrow['lastpost']}</strong></td> </tr> </table> </td> </tr> <tr> <td> <table border="0" width="100%"> <tr> {$threads}{$nullthreads} </tr> </table> </td> </tr> </table> <div class="float_left"> {$multipage} </div> </td> </tr> <tr> <td> <table border="0" width="100%"> <tr> <td valign="middle" align="center" class="smalltext"> <img src="http://i27.tinypic.com/2w3njbn.jpg" alt="" /><br /> YouTube Video Gallery<br /> Powered By <a href="http://mybbhacks.zingaburga.com">XThreads</a> - <a href="http://mybbhacks.zingaburga.com">MyBB Hacks</a> </td> <td valign="top" width="600"> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" width="100%"> <tr> <td align="center" style="background: #ADCBE7; border-top: 2px solid #0F5C8E; border-bottom: 2px solid #0F5C8E;"> <form action="forumdisplay.php" method="get"> <input type="hidden" name="fid" value="{$fid}" /> <select name="sortby"> <option value="subject" {$sortsel['subject']}>{$lang->sort_by_subject}</option> <option value="lastpost" {$sortsel['lastpost']}>{$lang->sort_by_lastpost}</option> <option value="starter" {$sortsel['starter']}>{$lang->sort_by_starter}</option> <option value="started" {$sortsel['started']}>{$lang->sort_by_started}</option> {$ratingsort} <option value="replies" {$sortsel['replies']}>{$lang->sort_by_replies}</option> <option value="views" {$sortsel['views']}>{$lang->sort_by_views}</option> </select> <select name="order"> <option value="asc" {$ordersel['asc']}>{$lang->sort_order_asc}</option> <option value="desc" {$ordersel['desc']}>{$lang->sort_order_desc}</option> </select> <select name="datecut"> <option value="1" {$datecutsel['1']}>{$lang->datelimit_1day}</option> <option value="5" {$datecutsel['5']}>{$lang->datelimit_5days}</option> <option value="10" {$datecutsel['10']}>{$lang->datelimit_10days}</option> <option value="20" {$datecutsel['20']}>{$lang->datelimit_20days}</option> <option value="50" {$datecutsel['50']}>{$lang->datelimit_50days}</option> <option value="75" {$datecutsel['75']}>{$lang->datelimit_75days}</option> <option value="100" {$datecutsel['100']}>{$lang->datelimit_100days}</option> <option value="365" {$datecutsel['365']}>{$lang->datelimit_lastyear}</option> <option value="9999" {$datecutsel['9999']}>{$lang->datelimit_beginning}</option> </select> {$gobutton} </form> </td> {$inlinemodcol} </tr> </table> {$searchforum} </td> </tr> </table> <br class="clear" /> <div class="float_right"> {$forumjump} </div> <br class="clear" /> </td> </tr> </table> <div class="float_right"> {$inlinemod} </div> <br class="clear" /> {$inline_edit_js}

   ---

8. Template Name: ytvgal_forumdisplay_threadlist_rating
   
   HTML Code

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   <td class="smalltext"> <strong><a href="{$sorturl}&amp;sortby=rating&amp;order=desc">{$lang->rating}</a> {$orderarrow['rating']}</strong> | <script type="text/javascript" src="jscripts/rating.js?ver=1400"></script> <script type="text/javascript"> <!-- lang.stars = new Array(); lang.stars[1] = "{$lang->one_star}"; lang.stars[2] = "{$lang->two_stars}"; lang.stars[3] = "{$lang->three_stars}"; lang.stars[4] = "{$lang->four_stars}"; lang.stars[5] = "{$lang->five_stars}"; // --> </script> </td>

   ---

9. Template Name: ytvgal_forumdisplay_threads_sep
   
   HTML Code

   <td colspan="{$colspan}" style="display: none;"></td> </tr> <tr>

   ---

10. Template Name: ytvgal_forumdisplay_thread_modbit
    
    HTML Code

    <td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap; width: 1px;"><input type="checkbox" class="checkbox" name="inlinemod_{$multitid}" id="inlinemod_{$multitid}" value="1" {$inlinecheck} /></td>

    ---

11. Template Name: ytvgal_forumdisplay_thread_null
    
    HTML Code

    <td></td>

    ---

12. Template Name: ytvgal_forumdisplay_thread_rating
    
    HTML Code

    1 2 3 4 5 6 7 8 9 10

    <div id="rating_table_{$thread['tid']}" align="center"> <ul class="star_rating{$not_rated}" id="rating_thread_{$thread['tid']}"> <li style="width: {$thread['width']}%" class="current_rating" id="current_rating_{$thread['tid']}">{$ratingvotesav}</li> </ul> <script type="text/javascript"> <!-- Rating.build_forumdisplay({$thread['tid']}, { width: '{$thread['width']}', extra_class: '{$not_rated}', current_average: '{$ratingvotesav}' }); // --> </script> </div>

    ---

13. Template Name: ytvgal_postbit
    
    HTML Code

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

    {$ignore_bit} <a name="pid{$post['pid']}" id="pid{$post['pid']}"></a> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" width="100%" style="border-bottom: 2px solid #8DC93E; {$post_extra_style} {$post_visibility}" id="post_{$post['pid']}"> <tbody> <tr> <td style="background: #D6ECA6; border-top: 2px solid #8DC93E; border-bottom: 2px solid #8DC93E;"> <div class="float_left smalltext"> {$post['onlinestatus']} <span style="vertical-align: top;"><strong>{$post['profilelink']}</strong> - {$post['postdate']}, {$post['posttime']}</span> </div> {$post['posturl']} <br class="clear" /> <span id="edited_by_{$post['pid']}">{$post['editedmsg']}</span> </td> </tr> <tr> <td class="{$unapproved_shade}"> <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;"> <tr> <td class="post_avatar" width="1" style="{$post['avatar_padding']}" valign="top" rowspan="2"> {$post['useravatar']} </td> <td class="post_author" valign="top"> <span class="smalltext"> <strong>{$post['icon']}{$post['subject']} {$post['subject_extra']}</strong> </span> <span class="post_meta float_right smalltext" id="post_meta_{$post['pid']}"> {$post['iplogged']} </span> <div class="post_body" id="pid_{$post['pid']}"> {$post['message']} </div> </td> </tr> <tr> <td height="1"> <a href="#" id="post_options_{$post['pid']}" style="display: none"><img src="images/usercp/options.gif" alt="Post Options" title="Post Options" /></a> <div class="float_right post_management_buttons"> {$post['button_multiquote']}{$post['button_edit']} </div> <div id="post_options_{$post['pid']}_popup" class="popup_menu_post_options" style="display: none;"> <div class="popup_item_container_post_options post_management_buttons" style="background: #D6ECA6; border-top: 2px solid #8DC93E; border-bottom: 2px solid #8DC93E; padding: 1px 7px;"> {$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_quote']}{$post['button_report']}{$post['button_warn']}{$post['button_quickdelete']} </div> </div> <noscript> <div class="post_management_buttons float_right" style="margin-right: 5px;"> {$post['button_quickdelete']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']} </div> </noscript> </td> </tr> </table> </td> </tr> </tbody> </table> <script type="text/javascript"> // <!-- if(use_xmlhttprequest == "1") { new PopupMenu("post_options_{$post['pid']}"); } $('post_options_{$post['pid']}').style.display = ''; // --> </script>

    ---

14. Template Name: ytvgal_postbit_first
    
    HTML Code

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

    {$ignore_bit} <a name="pid{$post['pid']}" id="pid{$post['pid']}"></a> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" width="100%" style="border-bottom: 2px solid #FFD324; {$post_extra_style} {$post_visibility}" id="post_{$post['pid']}"> <tbody> <tr> <td style="background: #FFF6BF; border-top: 2px solid #FFD324; border-bottom: 2px solid #FFD324;"> <div class="float_left smalltext"> {$post['onlinestatus']} <span style="vertical-align: top;"><strong>{$post['profilelink']}</strong> - {$post['postdate']}, {$post['posttime']}</span> </div> {$post['posturl']} <br class="clear" /> <span id="edited_by_{$post['pid']}">{$post['editedmsg']}</span> </td> </tr> <tr> <td class="{$unapproved_shade}"> <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;"> <tr> <td class="post_avatar" width="1" style="{$post['avatar_padding']}" valign="top" rowspan="2"> {$post['useravatar']} </td> <td class="post_author" valign="top"> <span class="smalltext"> <strong>{$post['icon']}{$post['subject']} {$post['subject_extra']}</strong> </span> <span class="post_meta float_right smalltext" id="post_meta_{$post['pid']}"> {$post['iplogged']} </span> <div class="post_body" id="pid_{$post['pid']}"> {$post['message']} </div> </td> </tr> <tr> <td height="1"> <a href="#" id="post_options_{$post['pid']}" style="display: none"><img src="images/usercp/options.gif" alt="Post Options" title="Post Options" /></a> <div class="float_right post_management_buttons"> {$post['button_multiquote']}{$post['button_edit']} </div> <div id="post_options_{$post['pid']}_popup" class="popup_menu_post_options" style="display: none;"> <div class="popup_item_container_post_options post_management_buttons" style="background: #FFF6BF; border-top: 2px solid #FFD324; border-bottom: 2px solid #FFD324; padding: 1px 7px;"> {$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_quote']}{$post['button_report']}{$post['button_warn']}{$post['button_quickdelete']} </div> </div> <noscript> <div class="post_management_buttons float_right" style="margin-right: 5px;"> {$post['button_quickdelete']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']} </div> </noscript> </td> </tr> </table> </td> </tr> </tbody> </table> <script type="text/javascript"> // <!-- if(use_xmlhttprequest == "1") { new PopupMenu("post_options_{$post['pid']}"); } $('post_options_{$post['pid']}').style.display = ''; // --> </script>

    ---

15. Template Name: ytvgal_postbit_iplogged_hiden
    
    HTML Code

    <strong><a href="moderation.php?action=getip&amp;pid={$post['pid']}">[IP]</a></strong>

    ---

16. Template Name: ytvgal_showthread
    
    HTML Code

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104

    <html> <head> <title>{$thread['subject']}</title> {$headerinclude} <script type="text/javascript"> <!-- var quickdelete_confirm = "{$lang->quickdelete_confirm}"; // --> </script> <script type="text/javascript" src="jscripts/thread.js?ver=1400"></script> </head> <body> {$header} <table width="100%" border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" style="clear: both; width: 100%;"> <tr> <td valign="middle" colspan="2"> <a href="{$forumurl}"><strong>Categories</strong></a> <table border="0" width="100%"> <tr> <td align="center"> <a href="{$forumurl_q}filtertf_ytvgalcat=Music"><img src="http://i28.tinypic.com/2vskbwx.jpg" alt="" /></a><br /> <a href="{$forumurl_q}filtertf_ytvgalcat=Music"><strong>Music</strong></a> </td> <td align="center"> <a href="{$forumurl_q}filtertf_ytvgalcat=Anime"><img src="http://i30.tinypic.com/30c9agi.jpg" alt="" /></a><br /> <a href="{$forumurl_q}filtertf_ytvgalcat=Anime"><strong>Anime</strong></a> </td> <td align="center"> <a href="{$forumurl_q}filtertf_ytvgalcat=Funny"><img src="http://i30.tinypic.com/34t6fsj.jpg" alt="" /></a><br /> <a href="{$forumurl_q}filtertf_ytvgalcat=Funny"><strong>Funny</strong></a> </td> </tr> </table> </td> </tr> </table> {$pollbox} <div class="float_right"> {$newreply} </div> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" style="border-top-width: 0; width: 100%;"> <tr> <td valign="top" width="50%"> <div align="center"> <strong>{$thread['subject']}</strong> </div> {$ratethread} <div align="center"> <iframe width="420" height="315" src="https://www.youtube.com/embed/{$GLOBALS['threadfields']['ytvgalid']}" allowfullscreen></iframe> </div> <br class="clear" /> <div> {$first_post} </div> <br class="clear" /> <div align="center"> <strong>&laquo; <a href="{$next_oldest_link}">{$lang->next_oldest}</a> | <a href="{$next_newest_link}">{$lang->next_newest}</a> &raquo;</strong> </div> <br class="clear" /> <div align="center" class="smalltext"> <img src="http://i27.tinypic.com/2w3njbn.jpg" alt="" /><br /> YouTube Video Gallery<br /> Powered By <a href="http://mybbhacks.zingaburga.com">XThreads</a> - <a href="http://mybbhacks.zingaburga.com">MyBB Hacks</a> </div> </td> <td width="1">&nbsp;</td> <td valign="top"> <div style="float: left;"> <strong>Comments</strong> </div> <div style="float: right;"> <span class="smalltext"><strong><a href="showthread.php?mode=threaded&amp;tid={$tid}&amp;pid={$pid}#pid{$pid}">{$lang->threaded}</a> | <a href="showthread.php?mode=linear&amp;tid={$tid}&amp;pid={$pid}#pid{$pid}">{$lang->linear}</a></strong></span> </div> <br class="clear" /> <div id="posts"> {$posts} </div> <div class="float_right"> {$multipage} </div> {$search_thread} </td> </tr> </table> {$threadexbox} {$quickreply} <br style="clear: both;" /> {$similarthreads} <br style="clear: both;" /> <div class="float_right" style="text-align: right;"> {$moderationoptions} {$forumjump} </div> <div class="float_left"> <ul class="thread_tools"> <li class="printable"><a href="printthread.php?tid={$tid}">{$lang->view_printable}</a></li> <li class="sendthread"><a href="sendthread.php?tid={$tid}">{$lang->send_thread}</a></li> <li class="subscription_{$add_remove_subscription}"><a href="usercp2.php?action={$add_remove_subscription}subscription&amp;tid={$tid}&amp;my_post_key={$mybb->post_code}">{$add_remove_subscription_text}</a></li> </ul> </div> <br style="clear: both;" /> {$footer} </body> </html>

    ---

17. Template Name: ytvgal_showthread_noreplies
    
    HTML Code

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

    <table border="0" cellspacing="{$GLOBALS['theme']['borderwidth']}" cellpadding="{$GLOBALS['theme']['tablespace']}" width="100%" style="border-bottom: 2px solid #8DC93E;" id="xthreads_noreplies"> <tbody> <tr> <td style="background: #D6ECA6; border-top: 2px solid #8DC93E; border-bottom: 2px solid #8DC93E;"> <div class="float_left smalltext"> <span style="vertical-align: top;"> <strong>{$GLOBALS['thread']['subject']}</strong> - {$GLOBALS['thread']['threaddate']}, {$GLOBALS['thread']['threadtime']} </span> </div> </td> </tr> <tr> <td align="center"> <strong><em>No Comment Yet</em></strong> </td> </tr> </tbody> </table>

    ---

18. Template Name: ytvgal_showthread_ratethread
    
    HTML Code

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

    <div align="center"> <table> <tr> <td> <script type="text/javascript" src="jscripts/rating.js?ver=1400"></script> <div id="success_rating_{$thread['tid']}"></div> <div class="inline_rating"> <ul class="star_rating{$not_rated}" id="rating_thread_{$thread['tid']}"> <li style="width: {$thread['width']}%" class="current_rating" id="current_rating_{$thread['tid']}">{$ratingvotesav}</li> <li><a class="one_star" title="{$lang->one_star}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=1&amp;my_post_key={$mybb->post_code}">1</a></li> <li><a class="two_stars" title="{$lang->two_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=2&amp;my_post_key={$mybb->post_code}">2</a></li> <li><a class="three_stars" title="{$lang->three_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=3&amp;my_post_key={$mybb->post_code}">3</a></li> <li><a class="four_stars" title="{$lang->four_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=4&amp;my_post_key={$mybb->post_code}">4</a></li> <li><a class="five_stars" title="{$lang->five_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=5&amp;my_post_key={$mybb->post_code}">5</a></li> </ul> </div> </td> </tr> </table> </div>

    ---

19. Template Name: ytvgal_showthread_search
    
    HTML Code

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

    <br class="clear" /> <br class="clear" /> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" width="100%" style="border-bottom: 2px solid #0F5C8E;"> <tr> <td style="background: #ADCBE7; border-top: 2px solid #0F5C8E; border-bottom: 2px solid #0F5C8E;"> <strong>Search Comments</strong> </td> </tr> <tr> <td align="center"> <form action="search.php" method="post"> <input type="hidden" name="action" value="thread" /> <input type="hidden" name="tid" value="{$thread['tid']}" /> <input type="text" name="keywords" value="{$lang->enter_keywords}" onfocus="if(this.value == '{$lang->enter_keywords}') { this.value = ''; }" onblur="if(this.value=='') { this.value='{$lang->enter_keywords}'; }" class="textbox" size="25" /> <input type="submit" class="button" value="Search" /> </form> </td> </tr> </table>

    ---

Note:
If we want to add video category in each video thumbnail, we need this modification:
http://mybbhacks.zingaburga.com/showthre...http://mybbhacks.zingaburga.com/showthread.php?tid=292&pid=27
Suggested by Shemo
We will find the screenshot in post above. Thanks, Shemo

Change Logs: 28 Sept 2010

Live Demo:
http://www.14.mynie.co.cc/forumdisplay.php?fid=10

[AglioEoliO]

awesome, Thanks for the code Rateu

[Shemo]

rateu, thanks for the excellent mod.....

how do we change the color of the text used on the page?

if you look at my site, you'll see that the font is very hard to read on the gallery page on my forum's default theme:
http://www.pazrt.com/forum/forum-video-gallery

[RateU]

If you mean in the postbit, try this way:

Find (line #29):
ytvgal_postbit and ytvgal_postbit_first template

HTML Code

<div class="post_body" id="pid_{$post['pid']}">

---

Add color style to the div, something like this:

HTML Code

<div class="post_body" id="pid_{$post['pid']}" style="color: #FFFFFF;">

---

Thread title in show thread (above the video):
Find (line #44 - #46):
ytvgal_showthread template

HTML Code

<div align="center"> <strong>{$thread['subject']}</strong> </div>

---

Add color style in that div too, like this:

HTML Code

<div align="center" style="color: #FFFFFF;"> <strong>{$thread['subject']}</strong> </div>

---

Unfortunately, I don't have the YouTube logo in png format

[Shemo]

rateu,

is it possible to list which category the videos are in?

it's hard to tell unless you manually go through each category.

maybe something like:
Category: category name

under
By:

[RateU]

Edit your Video Category custom thread fields, put this code inside the Display Format textarea:

HTML Code

Category: <a href="{$forumurl?}filtertf_ytvgalcat={VALUE}">{VALUE}</a><br />

---

Then edit your ytvgal_forumdisplay_thread template. Find (around line #15):

HTML Code

By: {$thread['profilelink']}<br />

---

Add this variable after the code above:

Code:

{$GLOBALS['threadfields']['ytvgalcat']}

---