Thread Rating:

***ZiNgA BuRgA*** · 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

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_thread

HTML 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&amp;fid={$fid}">{$lang->markforum_read}</a> | <a href="usercp2.php?action={$add_remove_subscription}subscription&amp;type=forum&amp;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>&laquo; <a href="{$next_oldest_link}">{$lang->next_oldest}</a> | <a href="{$next_newest_link}">{$lang->next_newest}</a> &raquo;</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&amp;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 Tongue

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!)

Threaded Mode \| Linear Mode Standard Tools
Forum Jump: View a Printable Version Send this Thread to a Friend Subscribe to this thread