Make Forum Image Clickable

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Anti-Spam Guide
User avatar
CoffeeGrinder
Registered User
Posts: 14
Joined: Mon Dec 07, 2009 12:24 am

Make Forum Image Clickable

Post by CoffeeGrinder »

I've added forum images to all my forums and was wondering how I can make it so people can click them to access the forum. Currently it's just eyecandy, I want to add functionality to them.

thankyou in advance! :geek:
Last edited by stickerboy on Mon May 10, 2010 12:56 am, edited 1 time in total.
Reason: Topic icon changed

User avatar
CoffeeGrinder
Registered User
Posts: 14
Joined: Mon Dec 07, 2009 12:24 am

Re: Make Forum Image Clickable

Post by CoffeeGrinder »

I can bump now right? (been 6 hours I think)

User avatar
Christian 2.0
Former Team Member
Posts: 4551
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Make Forum Image Clickable

Post by Christian 2.0 »

If using prosilver, open: /styles/prosilver/template/forumlist_body.html

Find:

Code: Select all

<span class="forum-image">
Replace with:

Code: Select all

<span class="forum-image" onclick="location.href='{forumrow.U_VIEWFORUM}';" style="cursor: pointer;">

If using Subsilver2, open: /styles/subsilver2/template/forumlist_body.html

Find:

Code: Select all

<div style="float: {S_CONTENT_FLOW_BEGIN}; margin-{S_CONTENT_FLOW_END}: 5px;">
Note: There are two instances of this code in forumlist_body.html, you should to apply the following change to both of them.

Replace with:

Code: Select all

<div style="float: {S_CONTENT_FLOW_BEGIN}; margin-{S_CONTENT_FLOW_END}: 5px;" onclick="location.href='{forumrow.U_VIEWFORUM}';">
Upload modified file and refresh template cache.

pilsnermonkey
Registered User
Posts: 19
Joined: Thu Apr 01, 2010 6:32 am

Re: Make Forum Image Clickable

Post by pilsnermonkey »

:D Perfect. Works like a charm!

User avatar
scotty123
Registered User
Posts: 77
Joined: Sun Dec 10, 2006 8:08 pm

Re: Make Forum Image Clickable

Post by scotty123 »

8-) Been looking for a code like this,
Is there anyway I could make a forum image on the index page clickable to an off site link :?
It is now clickable thanks two Christains code 8-) just not sure if making an off site link is doable ?

User avatar
Christian 2.0
Former Team Member
Posts: 4551
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Make Forum Image Clickable

Post by Christian 2.0 »

Sure, it's possible. You just need to make an IF statement for the specific forum icon you want to link off-site, and then put the forum link variable inside the "else".

For example:

Code: Select all

<!-- IF forumrow.FORUM_IMAGE --><span class="forum-image" onclick="location.href='<!-- IF forumrow.FORUM_ID eq '6' -->http://www.your-link.com<!-- ELSE -->{forumrow.U_VIEWFORUM}<!-- ENDIF -->';" style="cursor: pointer;">{forumrow.FORUM_IMAGE}</span><!-- ENDIF -->
You can get a forum ID by hovering over the link with your mouse and looking at the end of the target URL. Should look something like this:

User avatar
scotty123
Registered User
Posts: 77
Joined: Sun Dec 10, 2006 8:08 pm

Re: Make Forum Image Clickable

Post by scotty123 »

Christain your a star, just one thing, where do I add the "If code" ?

User avatar
Christian 2.0
Former Team Member
Posts: 4551
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Make Forum Image Clickable

Post by Christian 2.0 »

In your forumlist_body.html, find:

Code: Select all

<!-- IF forumrow.FORUM_IMAGE --><span class="forum-image">{forumrow.FORUM_IMAGE}</span><!-- ENDIF -->
Then just replace it with my example code above. :)

User avatar
scotty123
Registered User
Posts: 77
Joined: Sun Dec 10, 2006 8:08 pm

Re: Make Forum Image Clickable

Post by scotty123 »

Should this be the same in subsilver2 ?

User avatar
Christian 2.0
Former Team Member
Posts: 4551
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Make Forum Image Clickable

Post by Christian 2.0 »

For Subsilver2, again in forumlist_body.html

Find (note, this appears twice):

Code: Select all

<!-- IF forumrow.FORUM_IMAGE -->
					<div style="float: {S_CONTENT_FLOW_BEGIN}; margin-{S_CONTENT_FLOW_END}: 5px;">{forumrow.FORUM_IMAGE}</div>
				<!-- ENDIF -->
Replace with (replace both times):

Code: Select all

<!-- IF forumrow.FORUM_IMAGE -->
					<div style="float: {S_CONTENT_FLOW_BEGIN}; margin-{S_CONTENT_FLOW_END}: 5px; cursor: pointer;" onclick="location.href='<!-- IF forumrow.FORUM_ID eq '6' -->http://www.your-link.com<!-- ELSE -->{forumrow.U_VIEWFORUM}<!-- ENDIF -->';">{forumrow.FORUM_IMAGE}</div>
				<!-- ENDIF -->

User avatar
scotty123
Registered User
Posts: 77
Joined: Sun Dec 10, 2006 8:08 pm

Re: Make Forum Image Clickable

Post by scotty123 »

Christain thanks a million, thats worked spot on 8-)
Now if I added more image's like the one I have in now I take it I just add the "if" code under the one thats now in ?

Next step will be to add them at the bottom of the site :o but thats could be another day - will search for that one lol

Cheers buddy ;)

User avatar
Christian 2.0
Former Team Member
Posts: 4551
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Make Forum Image Clickable

Post by Christian 2.0 »

scotty123 wrote:Christain thanks a million, thats worked spot on 8-)
Now if I added more image's like the one I have in now I take it I just add the "if" code under the one thats now in ?
Kind of, you'd be best off using an "ELSEIF".

So, where you have:

Code: Select all

<!-- ELSE -->
Becomes:

Code: Select all

<!-- ELSEIF forumrow.FORUM_ID eq '10' -->http://another-link.com<!-- ELSE -->
Here's the full code to give you a better idea:

Code: Select all

<!-- IF forumrow.FORUM_IMAGE -->
                   <div style="float: {S_CONTENT_FLOW_BEGIN}; margin-{S_CONTENT_FLOW_END}: 5px; cursor: pointer;" onclick="location.href='<!-- IF forumrow.FORUM_ID eq '6' -->http://www.your-link.com<!-- ELSEIF forumrow.FORUM_ID eq '10' -->http://link2.com<!-- ELSE -->{forumrow.U_VIEWFORUM}<!-- ENDIF -->';">{forumrow.FORUM_IMAGE}</div>
                <!-- ENDIF -->
There is no limit as to the amount of "ELSEIF"'s you can use after each other. ;)

User avatar
scotty123
Registered User
Posts: 77
Joined: Sun Dec 10, 2006 8:08 pm

Re: Make Forum Image Clickable

Post by scotty123 »

Cheers buddy, a big thank you for your time and help 8-)

conan_troutman
Registered User
Posts: 222
Joined: Mon Jul 19, 2010 11:06 am

Re: Make Forum Image Clickable

Post by conan_troutman »

I want to make my images clickable for forums but I can not find where to make the changes.

if any one can help it would be aprreciated...

here is my forumlist_body.html

Code: Select all

<!-- DEFINE $CA_FORUMLIST = '1' -->
<!-- BEGIN forumrow -->
	<!-- IF (forumrow.S_IS_CAT and not forumrow.S_FIRST_ROW) or forumrow.S_NO_CAT -->
		</table>
		{$CA_BLOCK_END}
		<br />
	<!-- ENDIF -->

	<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW or forumrow.S_NO_CAT -->
	    {$CA_BLOCK_START}
		{$CA_CAP2_START}<!-- IF forumrow.S_IS_CAT --><h4><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a></h4><!-- ELSE -->{L_FORUM}<!-- ENDIF -->{$CA_CAP2_END}
		<table class="tablebg" cellspacing="{$CA_SPACING}" width="100%">
		<tr>
			<th colspan="2">&nbsp;{L_FORUM}&nbsp;</th>
			<th width="50">&nbsp;{L_TOPICS}&nbsp;</th>
			<th width="50">&nbsp;{L_POSTS}&nbsp;</th>
			<th width="175">&nbsp;{L_LAST_POST}&nbsp;</th>
		</tr>
	<!-- ENDIF -->
	
	<!-- IF not forumrow.S_IS_CAT -->
		<!-- IF forumrow.S_IS_LINK -->
			<tr>
				<td class="row1" width="31" align="center">{forumrow.FORUM_FOLDER_IMG}</td>
				<td class="row1">
					<!-- IF forumrow.FORUM_IMAGE or (S_ENABLE_FEEDS and forumrow.S_FEED_ENABLED) -->
						<table border="0" cellspacing="0" cellpadding="0" width="100%"><tr>
						<!-- IF forumrow.FORUM_IMAGE -->
                            <td valign="middle" style="padding-{S_CONTENT_FLOW_END}: 5px;">{forumrow.FORUM_IMAGE}</td>
						<!-- ENDIF -->
						<td width="100%" valign="middle">
					<!-- ENDIF -->
					<a class="forumlink" href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a>
					<p class="forumdesc">{forumrow.FORUM_DESC}</p>
					<!-- IF S_ENABLE_FEEDS and forumrow.S_FEED_ENABLED -->
					    </td>
                        <td valign="top" style="padding-{S_CONTENT_FLOW_BEGIN}: 2px;"><a title="{L_FEED} - {forumrow.FORUM_NAME}" href="{U_FEED}?f={forumrow.FORUM_ID}"><img src="{T_THEME_PATH}/images/feed.gif" alt="{L_FEED} - {forumrow.FORUM_NAME}" /></a>
					<!-- ENDIF -->
					<!-- IF forumrow.FORUM_IMAGE or (S_ENABLE_FEEDS and forumrow.S_FEED_ENABLED) --></td></tr></table><!-- ENDIF -->
				</td>
				<!-- IF forumrow.CLICKS -->
					<td class="row2" colspan="3" align="center"><span class="genmed">{L_REDIRECTS}: {forumrow.CLICKS}</span></td>
				<!-- ELSE -->
					<td class="row2" colspan="3" align="center">&nbsp;</td>
				<!-- ENDIF -->
			</tr>
		<!-- ELSE -->
		<tr>
			<td class="row1" width="31" align="center">{forumrow.FORUM_FOLDER_IMG}</td>
			<td class="row1">
				<!-- IF forumrow.FORUM_IMAGE or (S_ENABLE_FEEDS and forumrow.S_FEED_ENABLED) -->
					<table border="0" cellspacing="0" cellpadding="0" width="100%"><tr>
                    <!-- IF forumrow.FORUM_IMAGE -->
    					<td valign="middle" style="padding-{S_CONTENT_FLOW_END}: 5px;">{forumrow.FORUM_IMAGE}</td>
    			    <!-- ENDIF -->
                    <td width="100%" valign="middle">
				<!-- ENDIF -->
				<a class="forumlink<!-- IF forumrow.S_UNREAD_FORUM --> link-new<!-- ENDIF -->" href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a>
				<p class="forumdesc">{forumrow.FORUM_DESC}</p>
				<!-- IF forumrow.MODERATORS -->
					<p class="forumdesc"><strong>{forumrow.L_MODERATOR_STR}:</strong> {forumrow.MODERATORS}</p>
				<!-- ENDIF -->
					
				<!-- IF forumrow.SUBFORUMS and forumrow.S_LIST_SUBFORUMS -->
					<p class="forumdesc"><strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</p>
				<!-- ENDIF -->
                <!-- IF S_ENABLE_FEEDS and forumrow.S_FEED_ENABLED -->
                    </td>
                    <td valign="top" style="padding-{S_CONTENT_FLOW_BEGIN}: 2px;"><a title="{L_FEED} - {forumrow.FORUM_NAME}" href="{U_FEED}?f={forumrow.FORUM_ID}"><img src="{T_THEME_PATH}/images/feed.gif" alt="{L_FEED} - {forumrow.FORUM_NAME}" /></a>
                <!-- ENDIF -->
                <!-- IF forumrow.FORUM_IMAGE or (S_ENABLE_FEEDS and forumrow.S_FEED_ENABLED) --></td></tr></table><!-- ENDIF -->
			</td>
			<td class="row2" align="center"><p class="topicdetails">{forumrow.TOPICS}</p></td>
			<td class="row2" align="center"><p class="topicdetails">{forumrow.POSTS}</p></td>
			<td class="row2" align="center" nowrap="nowrap">
				<!-- IF forumrow.LAST_POST_TIME -->
					<p class="topicdetails"><!-- IF forumrow.U_UNAPPROVED_TOPICS --><a href="{forumrow.U_UNAPPROVED_TOPICS}">{UNAPPROVED_IMG}</a>&nbsp;<!-- ENDIF -->{forumrow.LAST_POST_TIME}</p>
					<p class="topicdetails">{forumrow.LAST_POSTER_FULL}
						<!-- IF not S_IS_BOT --><a href="{forumrow.U_LAST_POST}">{LAST_POST_IMG}</a><!-- ENDIF -->
					</p>
				<!-- ELSE -->
					<p class="topicdetails">{L_NO_POSTS}</p>
				<!-- ENDIF -->
			</td>
		</tr>
		<!-- ENDIF -->
	<!-- ENDIF -->
	<!-- IF forumrow.S_LAST_ROW -->
		<!-- IF not S_IS_BOT and U_MARK_FORUMS -->
		<tr>
			<td colspan="5" class="cat" align="center">
				<a href="{U_MARK_FORUMS}">{L_MARK_FORUMS_READ}</a>
			</td>
		</tr>
		<!-- ENDIF -->
		</table>
		{$CA_BLOCK_END}
	<!-- ENDIF -->
<!-- BEGINELSE -->
{$CA_CAP2_START}{L_MESSAGE}{$CA_CAP2_END}
<table class="tablebg" cellspacing="{$CA_SPACING}" width="100%">
<tr>
	<td class="row1" colspan="5" align="center" style="padding: 25px 5px;"><p class="gensmall">{L_NO_FORUMS}</p></td>
</tr>
</table>
<!-- END forumrow -->

User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: Make Forum Image Clickable

Post by prototech »

If I understood correctly, you want the forum image to link to its containing forum?

If so, change: {forumrow.FORUM_IMAGE} to
<a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_IMAGE}</a>
Then refresh your template - ACP => Styles => Templates.
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.

Locked

Return to “[3.0.x] Styles Support & Discussion”