04-22-2010, 08:56 PM
This example will show you how to set up a gallery using XThreads, similar to the gallery example here.
This should also give you a general idea of how most of XThreads works.
UPDATE: I've also added some additional comments in gray to explain the reasoning behind some parts.
You may also want to see RateU's category modification
If you did get this working, congratulations
I admit, the templates that I put up there aren't the best, but I'm not really a designer, so perhaps you template gurus can make something more interesting (and I hope you are willing to share it with everyone!)
This should also give you a general idea of how most of XThreads works.
UPDATE: I've also added some additional comments in gray to explain the reasoning behind some parts.
You may also want to see RateU's category modification
- After activating XThreads, add a new forum which will be used as the gallery forum. Use the following XThreads options when adding this forum:
Template Prefix: gal_ [this will allow us to pull different templates for this forum]
Thread Grouping: 3 [we'll have 3 images per row in the forumdisplay]
Show first post on every showthread page: yes
Enable XThreads' Inline Forum Search: yes
Override Threads Per Page: 15 [a multiple of 3; will mean up to 5 rows every page]
Allow Blank Post Message: yes
Don't include this forum's threads/posts in global forum statistics: yes
Custom WOL Text:
- Forum Display: Viewing Gallery
- New Reply: Commenting on Gallery image <a href="{1}">{2}</a>
- Show Thread: Viewing Gallery image <a href="{1}">{2}</a> {3} - Visit AdminCP -> Configuration -> Custom Thread Fields and add the following thread field (note, some of these may reveal themselves after selecting some values, so just set them in the order listed here):
Title: Image
Key: gal_img
Applicable Forums: select the gallery forum you just added in the step above
Input Field Type: File
Valid File Extensions: gif|png|jpg|jpeg|jpe
Maximum File Size: 2097152 [2MB; change if desired]
Editable by / Required Field?: Everyone (required)
Only accept uploaded images: yes
Image Thumbnail Generation: 160x120|320x240 [if you wish to change this, don't forget to update stuff in the templates below; you may also need to rebuild thumbnails] - Go to AdminCP -> Templates & Style -> Templates -> Global Templates and add the following templates (title with code):
gal_forumdisplay_threadHTML Code<td class="{$bgcolor}" style="text-align: center;" width="33%"> <table border="0" cellspacing="0" cellpadding="0" height="100%" width="100%" align="center"> <tr style="height: 1.2em;"><td> <span>{$prefix} {$gotounread}<a href="{$thread['threadlink']}" class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}">{$thread['subject']}</a></span> <div class="author smalltext" style="display: inline;">By {$thread['profilelink']}</div> </td></tr> <tr style="height: 250px;"><td> <a href="{$thread['threadlink']}"><img src="{$threadfields['gal_img']['thumbs']['320x240']['url']}" alt="Image" width="{$threadfields['gal_img']['thumbs']['320x240']['w']}" height="{$threadfields['gal_img']['thumbs']['320x240']['h']}" /></a> </td></tr> <tr style="height: 1.2em;"><td> <span style="float: left;">Comments: <a href="javascript:MyBB.whoPosted({$thread['tid']});">{$thread['replies']}</a>{$unapproved_posts}</span> <span style="float: right;">Views: {$thread['views']}</span> <div class="clear"></div> </td></tr> </table> </td>gal_forumdisplay_group_sep [row separator]
HTML Code</tr><tr>gal_forumdisplay_threadlist
HTML Code<div class="float_left"> {$multipage} </div> <div class="float_right"> {$newthread} </div> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both;"> <tr> <td class="thead" colspan="{$colspan}"> <div style="float: right;"> <span class="smalltext"><strong><a href="misc.php?action=markread&fid={$fid}">{$lang->markforum_read}</a> | <a href="usercp2.php?action={$add_remove_subscription}subscription&type=forum&fid={$fid}">{$add_remove_subscription_text}</a>{$clearstoredpass}</strong></span> </div> <div> <strong>{$foruminfo['name']}</strong> </div> </td> </tr> <tr> {$threads}{$nullthreads} </tr> <tr> <td class="tfoot" align="right" colspan="{$colspan}"> <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> </tr> </table> <div class="float_left"> {$multipage} </div> <div class="float_right" style="margin-top: 4px;"> {$newthread} </div> <br style="clear: both;" /> <br /> <div class="float_left"> <div class="float_left"> <dl class="thread_legend smalltext"> <dd><img src="{$theme['imgdir']}/newfolder.gif" alt="{$lang->new_thread}" title="{$lang->new_thread}" /> {$lang->new_thread}</dd> <dd><img src="{$theme['imgdir']}/newhotfolder.gif" alt="{$lang->new_hot_thread}" title="{$lang->new_hot_thread}" /> {$lang->new_hot_thread}</dd> <dd><img src="{$theme['imgdir']}/hotfolder.gif" alt="{$lang->hot_thread}" title="{$lang->hot_thread}" /> {$lang->hot_thread}</dd> </dl> </div> <div class="float_left"> <dl class="thread_legend smalltext"> <dd><img src="{$theme['imgdir']}/folder.gif" alt="{$lang->no_new_thread}" title="{$lang->no_new_thread}" /> {$lang->no_new_thread}</dd> <dd><img src="{$theme['imgdir']}/dot_folder.gif" alt="{$lang->posts_by_you}" title="{$lang->posts_by_you}" /> {$lang->posts_by_you}</dd> <dd><img src="{$theme['imgdir']}/lockfolder.gif" alt="{$lang->locked_thread}" title="{$lang->locked_thread}" /> {$lang->locked_thread}</dd> </dl> </div> <br style="clear: both" /> </div> <div class="float_right" style="text-align: right;"> {$inlinemod} {$searchforum} {$forumjump} </div> <br style="clear: both" /> {$inline_edit_js}gal_forumdisplay_thread_null [this is used to fill remaining spots in a thread group, if any]
HTML Code<td class="{$bgcolor}" width="33%"></td>gal_postbit_first and gal_postbit_first_classic (use the same code for both templates)
HTML Code{$ignore_bit} <a name="pid{$post['pid']}" id="pid{$post['pid']}"></a> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="{$post_extra_style} {$post_visibility}" id="post_{$post['pid']}"> <tr> <td class="thead"> <div class="float_right smalltext"> {$post['postdate']}, {$post['posttime']} <span id="edited_by_{$post['pid']}">{$post['editedmsg']}</span> </div> <strong>{$thread['subject']}</strong> <small>by <a href="{$post['profilelink_plain']}">{$post['username']}</a></small> </td> </tr> <tbody> <tr> <td class="trow2 post_content {$unapproved_shade}"> <div style="text-align: center; margin-bottom: 0.5em; margin-top: 0.5em;"> <a href="{$GLOBALS['threadfields']['gal_img']['url']}"><img src="{$GLOBALS['threadfields']['gal_img']['url']}" alt="image" width="{$GLOBALS['threadfields']['gal_img']['dims']['w']}" height="{$GLOBALS['threadfields']['gal_img']['dims']['h']}" /></a> </div> <div class="post_management_buttons float_right">{$post['button_edit']}{$post['button_quickdelete']}{$post['button_report']}{$post['button_warn']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']} </div> <div class="post_body" id="pid_{$post['pid']}"> {$post['message']} </div> </td> </tr> </tbody> </table>gal_showthread
HTML Code<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} {$pollbox} {$first_post} <div id="posts"> {$posts} </div> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top-width: 0;"> <tr> <td colspan="2" class="tfoot"> {$search_thread} <div> <strong>« <a href="{$next_oldest_link}">{$lang->next_oldest}</a> | <a href="{$next_newest_link}">{$lang->next_newest}</a> »</strong> </div> </td> </tr> </table> <div class="float_left"> {$multipage} </div> <div style="padding-top: 4px;" class="float_right"> {$newreply} </div> <br style="clear: both;" /> {$quickreply} {$threadexbox} {$similarthreads} <br /> <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&tid={$tid}">{$add_remove_subscription_text}</a></li> </ul> </div> <div class="float_right" style="text-align: right;"> {$moderationoptions} {$forumjump} </div> <br style="clear: both;" /> {$footer} </body> </html>gal_search_results_threads_thread
HTML Code<tr> <td class="{$bgcolor}" colspan="3" valign="middle"> <table border="0" cellborder="0" cellpadding="0" cellspacing="0"><tr> <td><a href="{$thread_link}{$highlight}"><img src="{$threadfields['gal_img']['thumbs']['160x120']['url']}" alt="Image" style="margin-right: 1em;" /></a></td> <td><span>{$prefix} {$gotounread}<a href="{$thread_link}{$highlight}" class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}">{$thread['subject']}</a>{$thread['multipage']}</span> <div class="author smalltext">{$thread['profilelink']}</div> </td></tr> </table> </td> <td class="{$bgcolor}">{$thread['forumlink']}</td> <td align="center" class="{$bgcolor}"><a href="javascript:MyBB.whoPosted({$thread['tid']});">{$thread['replies']}</a></td> <td align="center" class="{$bgcolor}">{$thread['views']}</td> <td class="{$bgcolor}" style="white-space: nowrap"> <span class="smalltext"> {$lastpostdate} {$lastposttime}<br /> <a href="{$thread['lastpostlink']}">{$lang->lastpost}</a>: {$lastposterlink} </span> </td> {$inline_mod_checkbox} </tr> - Go to your gallery forum and check that everything works correctly.
If you did get this working, congratulations
I admit, the templates that I put up there aren't the best, but I'm not really a designer, so perhaps you template gurus can make something more interesting (and I hope you are willing to share it with everyone!)