Forums

Unfortunately no one can be told what FluxBB is - you have to see it for yourself.

You are not logged in.

#1 2014-05-24 03:09:50

micbr
Member
Registered: 2014-05-23
Posts: 10

ThinkClassic - A Vintage Apple Computer Community

Hi Everyone,

Thought it was about time I stopped in and said Hi to everyone. This forum has been an excellent source of information at every step of getting our own site up and running, so thank you for all the various bits and pieces of wisdom and knowledge, they've certainly been appreciated. smile


We've been working on a new discussion forum since last year. After installing several different forum software packages and running through the specifics of each one, including testing the base features, theme/template engine, security, reliability and ease of maintenance, we finally settled on FluxBB to carry our community forward.

The community specialises in Vintage Apple computers, from the Apple II through to the last of the PowerPC based Macs. We felt after some research that the number of options available for retro Apple computing enthusiasts had dwindled somewhat, and we set out to build a community for these enthusiasts to come together and discuss hardware, software and peripherals with other like minded people. We call it ThinkClassic, like Apple's "Think Different" campaign, but a little older.


http://thinkclassic.org


Starting with a base FluxBB 1.5.6 install, we created a custom theme for the site based off the standard FluxBB Air style. A lot of customisation was required in the CSS, and some minor changes were required to the TPL files, which we moved into the style folder. The custom header and footer files are loaded through pun_includes in the respective TPL files. Some custom CSS was used to add forum and topic icons, along with custom row colours to distinguish between sticky and regular topics.


Screen_Shot_2014_08_19_at_12_02_17_pm.jpg


Most forums are visible to the public, but guest posting is disabled. Some forums, such as the Off-Topic area, are invisible until a user has registered and logged in. We also have a Trading Post area that is restricted to users with 30 or more posts in the other forums. For Administrators and Moderators, we have a dedicated discussion area and Trash forum for temporarily storing threads that require further attention outside of the regular forums. Simple, sweet and effective.


Although it looks fairly customised, the board software underneath is mostly standard. We have a couple of small modifications in place, including one that raises the minimum password length from 4 characters to 8. For spam countermeasures, we run Koos' Honeypot + StopForumSpam modification. While I am somewhat concerned about the use of modifications as they can sometimes prove problematic when updating to the latest versions of the forum software, this mod only requires changes in two files and appears to work rather nicely.

We load some additional customisations through includes in template files, including our BBCode buttons and a script that generates meta information from post contents for use on search engines and sites that support Open Graph, like Facebook and Twitter.


Having used so many other software solutions, I have to say that the team here is doing an excellent job. We love FluxBB because of how easy it is to maintain and manage, and our users enjoy its ease of use and no-nonsense approach to discussion forums. When they want to make a post or browse the site, the forum software steps aside and lets them do it with ease.

Not to mention, as a Vintage Apple community, our users can actually use our FluxBB install in browsers as old as Netscape 3 or Internet Explorer 2 on their System 7 based Macs. It looks a little broken, but they can read and post with it. Those 33MHz Motorola 68030 processors take a hammering as it loads up, but it works.


Cheers,

~ micbr (iMic, ThinkClassic)

EDIT: Linkified link. /Franz

Last edited by micbr (2014-09-12 03:10:58)


Administrator, ThinkClassic - A vintage Apple computer community.

Offline

#2 2014-05-24 09:44:23

Franz
Lead developer
From: Germany
Registered: 2008-05-13
Posts: 5,800
Website

Re: ThinkClassic - A Vintage Apple Computer Community

Wow, this looks awesome! Best of luck with your community.

P.S.: I promoted you, so that you can now post links. smile


fluxbb.de | develoPHP

"As code is more often read than written it's really important to write clean code."

Online

#3 2014-05-24 17:13:08

Gil
Member
From: France
Registered: 2008-05-10
Posts: 162
Website

Re: ThinkClassic - A Vintage Apple Computer Community

Very very nice! I especially like the "switch" of style between the menu bar and the title of the group of forums, it's not a big change, but it looks great, it was a good idea.
What about your buttons, could we see them without be logged? If not, could you show us an image?

(Warning: the registering page does not exist - it's totally blank)

Last edited by Gil (2014-05-25 08:11:44)

Offline

#4 2014-05-25 02:23:52

micbr
Member
Registered: 2014-05-23
Posts: 10

Re: ThinkClassic - A Vintage Apple Computer Community

Thanks, it's taken a lot of work to make the site look and work the way it does, and we're still not finished. Hoping to catch a break soon. smile


The BBCode buttons are fairly basic as they're still being tested. I'm now actually a little unsure about using this as opposed to something like FluxToolbar. It would take a little more effort with each update, but would give us a lot more functionality. There was also talk of keeping our current script but using jQuery instead. Decisions, decisions.

tDpu3Ec.png


We've gone ahead and repaired the registration page as well. One of the files on my local machine reverted and was uploaded with the current build, so it was looking for some files that no longer existed.

Last edited by micbr (2014-05-25 02:26:00)


Administrator, ThinkClassic - A vintage Apple computer community.

Offline

#5 2014-05-26 07:34:56

seven
Member
From: Torino, Italy
Registered: 2010-08-19
Posts: 186
Website

Re: ThinkClassic - A Vintage Apple Computer Community

We decided to use this one to display a BBCode editor: http://www.wysibb.com/


gamezoo.org - serious gaming services for serious gamers.

Offline

#6 2014-05-28 07:50:42

micbr
Member
Registered: 2014-05-23
Posts: 10

Re: ThinkClassic - A Vintage Apple Computer Community

That actually looks rather nice, definitely noted. I'll have a bit of a mess around with it on my locally installed test forum.

Last edited by micbr (2014-05-28 07:51:41)


Administrator, ThinkClassic - A vintage Apple computer community.

Offline

#7 2014-05-29 09:02:21

adaur
Developer
From: France
Registered: 2010-01-07
Posts: 707
Website

Re: ThinkClassic - A Vintage Apple Computer Community

seven wrote:

We decided to use this one to display a BBCode editor: http://www.wysibb.com/

Wow, that's pretty cool. If you manage to do full FluxBB integration, it would definitely be mod-worthy.


Please excuse my bad english, I'm french tongue.

Offline

#8 2014-05-29 13:36:31

seven
Member
From: Torino, Italy
Registered: 2010-08-19
Posts: 186
Website

Re: ThinkClassic - A Vintage Apple Computer Community

For those willing to have a quick start with http://www.wysibb.com/ : put this code between <pun_head> and </head> in /include/template/main.tpl:

<!-- http://www.wysibb.com/ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdn.wysibb.com/js/jquery.wysibb.min.js"></script>
<link rel="stylesheet" href="http://cdn.wysibb.com/css/default/wbbtheme.css" />
<style type="text/css">
	/* STYLE THE EDITOR HERE: use your browser's developer tools to edit the colors. */
</style>
<script>
$(function() {
	var bbOpt = {
		traceTextarea: true,
		buttons: "bold,italic,underline,strike,|,img,link,|,bullist,numlist,|,fontcolor,|,quote,code,removeFormat",
		allButtons: {
			code: {
				transform: {'<div class="codebox"><pre><code>{SELTEXT}</code></pre></div>':'[code]{SELTEXT}[/code]'}
			},
			quote: {
				transform: {
					'<div class="quotebox"><cite></cite><blockquote><div><p>{SELTEXT}</p></div></blockquote></div>':'[quote]{SELTEXT}[/quote]',
					'<div class="quotebox"><cite>{AUTHOR} wrote:</cite><blockquote><div><p>{SELTEXT}</p></div></blockquote></div>':'[quote={AUTHOR}]{SELTEXT}[/quote]',
				}
			}
		},
		smileList: [
			{	title: 'smile',
				img: '<img src="img/smilies/smile.png">',
				bbcode: ':)'
			},
			{	title: 'neutral',
				img: '<img src="img/smilies/neutral.png">',
				bbcode: ':|'
			},
			{	title: 'sad',
				img: '<img src="img/smilies/sad.png">',
				bbcode: ':('
			},
			{
				title: 'happy',
				img: '<img src="img/smilies/big_smile.png">',
				bbcode: ':D'
			},
			{
				title: 'yikes',
				img: '<img src="img/smilies/yikes.png">',
				bbcode: ':o'
			},
			{
				title: 'wink',
				img: '<img src="img/smilies/wink.png">',
				bbcode: ';)'
			},
			{
				title: 'tongue',
				img: '<img src="img/smilies/tongue.png">',
				bbcode: ':p'
			},
			{
				title: 'lol',
				img: '<img src="img/smilies/lol.png">',
				bbcode: ':lol:'
			},
			{
				title: 'mad',
				img: '<img src="img/smilies/mad.png">',
				bbcode: ':mad:'
			},
			{
				title: 'rolleyes',
				img: '<img src="img/smilies/roll.png">',
				bbcode: ':rolleyes:'
			},
			{
				title: 'cool',
				img: '<img src="img/smilies/cool.png">',
				bbcode: ':cool:'
			}
		],
	};
$("textarea").wysibb(bbOpt);
}
);
</script>
<!-- End WysiBB BBCode editor -->

Result (after a teeny weeny bit of css styling):

Cattura.jpg

Feel free to use this code as you like, and pull out a mod if you manage to apply automatically the forum style to the editor.

Last edited by seven (2014-05-29 13:41:46)


gamezoo.org - serious gaming services for serious gamers.

Offline

#9 2014-06-17 14:21:21

micbr
Member
Registered: 2014-05-23
Posts: 10

Re: ThinkClassic - A Vintage Apple Computer Community

I've started working on the next revision of the site design. I've created some PHP files, included in main.tpl, that add some new features like the above-mentioned WysiBB editor, dynamically generated Meta tags for search engines and Open Graph tags for Facebook and a couple of other improvements.

The hardest part is improving on the design. Needless to say, I'm no graphic designer so this is proving challenging. There's also a lot of cruft in the CSS that came as part of heavily modifying the default Air theme. I'm not sure whether to rebuild the theme from scratch on top of a clean Air.css (or other stylesheet) or keep sifting through the existing stylesheet and fixing little issues as they arise.

Last edited by micbr (2014-06-17 14:25:27)


Administrator, ThinkClassic - A vintage Apple computer community.

Offline

#10 2014-07-10 09:39:18

micbr
Member
Registered: 2014-05-23
Posts: 10

Re: ThinkClassic - A Vintage Apple Computer Community

We've been doing a lot of work on the site as of lately. A few of the things I've been working on are:

  • A custom PHP include in the template that loads WysiBB only on viewtopic.php, post.php and profile.php, and only if BBCode is enabled and permitted

  • Dynamically generated meta tags and Open Graph (Facebook) tags based on forum, thread and post contents for more relevant search engine results and easier linking to threads from Social Media

  • A few small tweaks, including replaced strings in lang_common that are loaded with the template (and are specific only to that template)

  • A complete rewrite of the CSS from scratch based on Air. We're coming in about 300 lines lighter on average compared to the existing version of the style

  • Small visual improvements, including revised QUOTE and CODE blocks in posts

These changes aren't live yet, but we're hoping to start rolling them out over the coming weeks.

One last thing I'm looking in to is the possibility of having a news page that pulls threads from a dedicated News / Announcements forum, basically the same as the front page of fluxbb.org. We'd be loading in the style and template from FluxBB stored in the http://thinkclassic.org/forum folder, while the news page remains in the root directory of the server (http://thinkclassic.org/).

At the moment I'm not sure what the best way to do this is. We could use extern.php, but I'm not sure whether that retrieves post contents or just the thread titles and information. The alternative is to run the SQL queries within the news page files themselves and handle it that way.

I'd be very curious to know how this site does it. After all the developers of the software know the code inside and out, so I'm sure whatever solution is in place here is reliable.

The most important thing is that it doesn't break with coming versions of FluxBB, and if it does break, we can go ahead and fix it relatively easily. Using known and documented methods is key.

Cheers,

micbr (iMic, ThinkClassic)

Last edited by micbr (2014-07-10 09:41:52)


Administrator, ThinkClassic - A vintage Apple computer community.

Offline

#11 2014-07-10 10:44:20

Franz
Lead developer
From: Germany
Registered: 2008-05-13
Posts: 5,800
Website

Re: ThinkClassic - A Vintage Apple Computer Community

This is how we do it:

SELECT id, subject FROM topics WHERE forum_id = ? AND moved_to IS NULL ORDER BY posted DESC LIMIT 10

Nothing special about it. smile


fluxbb.de | develoPHP

"As code is more often read than written it's really important to write clean code."

Online

#12 2014-07-10 11:42:22

micbr
Member
Registered: 2014-05-23
Posts: 10

Re: ThinkClassic - A Vintage Apple Computer Community

Couldn't really ask for a simpler solution. smile Fantastic.

I had planned to have the news page (lets call it news.php for the purposes of this post) one directory level above the FluxBB install and including FluxBB's files by defining PUN_ROOT a little differently, like so:

define('PUN_ROOT', dirname(__FILE__).'/forum/');

However this doesn't work since it leaves a lot of broken links and the stylesheet doesn't load, mainly due to the fact that the paths to the stylesheets and the navigation links (Index, Rules, User List, etc) aren't prefixed with any kind of pointer to the FluxBB root directory in header.php. Chances are I'll instead include only common.php and leave header.php and footer.php out of it, instead coding them in with the news.php file and including the stylesheet from the FluxBB styles directory.

Something to have a bit of a play around with anyway.


Also, considering all the help I've received both here on the forums and in the documentation, and the friendly nature of everyone around these forums, it's only fair that I share back some of my PHP bits and pieces with the community. I'm not brilliant at PHP, but they're a start. They're not far off being completed, so when they're ready to use I'll post them over here.

Last edited by micbr (2014-07-10 11:43:32)


Administrator, ThinkClassic - A vintage Apple computer community.

Offline

#13 2014-07-10 12:10:01

Franz
Lead developer
From: Germany
Registered: 2008-05-13
Posts: 5,800
Website

Re: ThinkClassic - A Vintage Apple Computer Community

micbr wrote:

Also, considering all the help I've received both here on the forums and in the documentation, and the friendly nature of everyone around these forums, it's only fair that I share back some of my PHP bits and pieces with the community. I'm not brilliant at PHP, but they're a start. They're not far off being completed, so when they're ready to use I'll post them over here.

Awesome, thank you! Looking forward to that...


fluxbb.de | develoPHP

"As code is more often read than written it's really important to write clean code."

Online

#14 2014-07-10 13:36:47

micbr
Member
Registered: 2014-05-23
Posts: 10

Re: ThinkClassic - A Vintage Apple Computer Community

A variation on seven's WysiBB code above, in PHP:

<?php

	// Meta & Open Graph Module
	// FluxBB 1.5.x
	// Copyright 2014 ThinkClassic [ http://thinkclassic.org ]
	// Last Revision: 02/07/2014

	if (!defined('PUN_ROOT'))
	exit('The constant PUN_ROOT must be defined and point to a valid FluxBB installation root directory.');


	// Enable for Logged In Users
	if (!$pun_user['is_guest']) {
	
	
	// Is Message BBCode enabled and page Viewtopic (Quick Reply), Post, Edit?
	// OR is Signature BBCode enabled and page Profile (Signature Editor)?		
	if (	
	
			(isset($lang_post) && $pun_config['p_message_bbcode'] == '1') || 
			(isset($lang_topic) && $pun_config['o_quickpost'] == '1' && $pun_config['p_message_bbcode'] == '1') || 
			(isset($lang_profile) && $pun_config['p_sig_bbcode'] == '1' && $pun_config['o_signatures'] == '1')
		
	) {
	
 		
 		// Include HTML		
 		
 		echo "<!-- BBCode Editor -->

		<script src=\"style/Default/includes/editor/jquery-2.1.1.min.js\"></script>
		<script src=\"style/Default/includes/editor/jquery.wysibb.min.js\"></script>

		<link rel=\"stylesheet\" href=\"style/Default/includes/editor/css/wbbtheme.css\" />

		<style type=\"text/css\">
		
			.wysibb { border: 1px solid #ddd !important; margin-top: 5px !important; }
			.wysibb .modeSwitch { display: none !important; }
			
		</style>";


		// Include Script

		echo "<script>
		
		$(function() {
			var bbOpt = {
				onlyBBmode: true,
				traceTextarea: true,";
				
				
				// If Signature Editor, only display a limited set of buttons.
				
				if (isset($lang_profile)) {
				
					// Button List for Signature Editor
					echo "buttons: \"bold,italic,underline,strike,|" . ($pun_config['p_sig_img_tag'] == '1' ? ",img" : "" ) . ",link,|,fontcolor" . ($pun_config['o_smilies_sig'] == '1' ? ",|,smilebox" : "" ) . "\"";
				
				} else {
				
					// Button List for Post / Message Editor
					echo "buttons: \"bold,italic,underline,strike,|" . ($pun_config['p_message_img_tag'] == '1' ? ",img" : "" ) . ",link,|,bullist,numlist,listitem,|,fontcolor,|,quote,code" . ($pun_config['o_smilies'] == '1' ? ",|,smilebox" : "" ) . "\"";
				
				}
				
				
				echo ", allButtons: {
					code: {
						transform: {
							'<div class=\"codebox\"><pre><code>{SELTEXT}</code></pre></div>':'[code]{SELTEXT}[/code]'
						}
					},
					quote: {
						transform: {
							'<div class=\"quotebox\"><cite></cite><blockquote><div><p>{SELTEXT}</p></div></blockquote></div>':'[quote]{SELTEXT}[/quote]',
							'<div class=\"quotebox\"><cite>{AUTHOR} wrote:</cite><blockquote><div><p>{SELTEXT}</p></div></blockquote></div>':'[quote={AUTHOR}]{SELTEXT}[/quote]',
						}
					},
					listitem: {
						title: 'List Item',
     					buttonText: '*',
						transform: {
							'<li>{SELTEXT}</li>':'[*]{SELTEXT}'
						}
					}
				},
				
				smileList: [
					{	title: 'smile',
						img: '<img src=\"img/smilies/smile.png\">',
						bbcode: ':)'
					},
					{	title: 'neutral',
						img: '<img src=\"img/smilies/neutral.png\">',
						bbcode: ':|'
					},
					{	title: 'sad',
						img: '<img src=\"img/smilies/sad.png\">',
						bbcode: ':('
					},
					{
						title: 'happy',
						img: '<img src=\"img/smilies/big_smile.png\">',
						bbcode: ':D'
					},
					{
						title: 'yikes',
						img: '<img src=\"img/smilies/yikes.png\">',
						bbcode: ':o'
					},
					{
						title: 'wink',
						img: '<img src=\"img/smilies/wink.png\">',
						bbcode: ';)'
					},
					{
						title: 'tongue',
						img: '<img src=\"img/smilies/tongue.png\">',
						bbcode: ':p'
					},
					{
						title: 'lol',
						img: '<img src=\"img/smilies/lol.png\">',
						bbcode: ':lol:'
					},
					{
						title: 'mad',
						img: '<img src=\"img/smilies/mad.png\">',
						bbcode: ':mad:'
					},
					{
						title: 'rolleyes',
						img: '<img src=\"img/smilies/roll.png\">',
						bbcode: ':rolleyes:'
					},
					{
						title: 'cool',
						img: '<img src=\"img/smilies/cool.png\">',
						bbcode: ':cool:'
					}
				],
			};

		$(\"textarea\").wysibb(bbOpt);

		}
		);

		</script>";

	}

	}

?>

Like I said, probably not the best code, but it works and it's a starting point I suppose.

To enable the rich text editor, simply remove the line of CSS that says .wysibb .modeSwitch { display: none !important; } and change onlyBBmode: true, to onlyBBmode: false,. You'll also need to set the paths to WysiBB's files in the above PHP code below the line // Include HTML.

It does mostly the same as seven's solution, but it won't attempt to load the editor on pages other than viewtopic, post/edit and the profile page (for editing signatures). On each of those pages, it will only load if the editor is displayed (so it won't load on viewtopic if the Quick Reply editor is disabled, for example) and only if the user has permission to use BBCode. For the signature editor, it only shows BBCode buttons that are allowed to be used in signatures.

The majority of the script that configures WysiBB (between the <script> tags) is encased in a PHP echo. I was browsing around here before and read that this is considered bad practice (?). I haven't gone ahead and changed it in there yet, but it's not difficult to do.

It's saved in style/Default/includes/editor.php and loaded like so in the style/Default/main.tpl file (we're using custom tpl files):

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<pun_head>

	<pun_include "includes/editor.php">
	
</head>

Since this is included with the style, it doesn't get overwritten when installing security fixes or newer versions of FluxBB. It may need a tune-up from time to time with new releases depending on how the FluxBB code changes, but it's manageable.

Last edited by micbr (2014-08-24 06:19:30)


Administrator, ThinkClassic - A vintage Apple computer community.

Offline

#15 2014-07-18 00:02:49

micbr
Member
Registered: 2014-05-23
Posts: 10

Re: ThinkClassic - A Vintage Apple Computer Community

Franz wrote:

This is how we do it:

SELECT id, subject FROM topics WHERE forum_id = ? AND moved_to IS NULL ORDER BY posted DESC LIMIT 10

Nothing special about it. smile

Looks like that works rather nicely for pulling the topic information, however I'm a little curious how to get the contents of the first post from each topic.

I had a bit of a flick through viewforum.php to see how it's done there, but I have to admit that I'm in way over my head. It seems like it would be easy enough displaying the data once I have it out of the database, but all of the SQL queries and how to process those queries is where I'm getting held up.


Administrator, ThinkClassic - A vintage Apple computer community.

Offline

#16 2014-07-18 08:01:32

Franz
Lead developer
From: Germany
Registered: 2008-05-13
Posts: 5,800
Website

Re: ThinkClassic - A Vintage Apple Computer Community

Try this then:

SELECT t.id, t.subject, p.message FROM topics AS t INNER JOIN posts AS p ON t.first_post_id=p.id WHERE t.forum_id = ? AND t.moved_to IS NULL ORDER BY t.posted DESC LIMIT 10

fluxbb.de | develoPHP

"As code is more often read than written it's really important to write clean code."

Online

#17 2014-07-27 08:05:14

micbr
Member
Registered: 2014-05-23
Posts: 10

Re: ThinkClassic - A Vintage Apple Computer Community

That worked a treat:

Screen_Shot_2014_07_27_at_5_30_33_pm.png

Of course it isn't styled as of yet. We had planned to roll out a news page with our upcoming revisions to the site, but it's been delayed while we focus on some of the improvements to the appearance of the forums.

Last edited by micbr (2014-07-27 08:39:05)


Administrator, ThinkClassic - A vintage Apple computer community.

Offline

#18 2014-08-24 06:18:42

micbr
Member
Registered: 2014-05-23
Posts: 10

Re: ThinkClassic - A Vintage Apple Computer Community

We've moved across to our newest version of the design, implementing the WysiBB post editor and our custom Meta & Open Graph code. I've gone ahead and updated the first post with a screenshot and some new details to reflect the change.

More information on the changes and some screenshots have been posted in this thread over on the forums. smile

Also, as promised, here's the code from meta.php, stored in the style/Default/includes folder and called from within main.tpl. It generates the Meta Tags and Open Graph information, along with providing high-resolution favicons and some mobile specific enhancements, like a home screen icon when bookmarked.

For Open Graph, it will generate a description, link and cycle through any images contained in the post. Linking to a FluxBB thread from Facebook and possibly Twitter will then display an accurate description, link to the page or thread and allow you to choose a thumbnail image from anything contained in the post. It's pretty neat. You can see some of it in action in the thread I linked above.

<?php

	// Meta & Open Graph Module
	// FluxBB 1.5.x
	// Copyright 2014 ThinkClassic [ http://thinkclassic.org ]
	// Last Revision: 27/08/2014

	if (!defined('PUN'))
	exit;


	//
	// Truncate Strings
	//
	
	function truncate($string,$length,$append) {
  		
  		$string = trim($string);

 		 if(strlen($string) > $length) {
    
    		$string = wordwrap($string, $length);
    		$string = explode("\n",$string);
    		$string = array_shift($string) . $append;
  		
  		}
		
		return $string;

	}
	
	
	//
	// Process Query
	//
	
	function process_query($query) {
	
		global $db, $lang_common;
		
		$query = $db->query($query) or error('Unable to fetch meta info', __FILE__, __LINE__, $db->error());
	
		if (!$db->num_rows($query)) { message($lang_common['Bad request'], false, '404 Not Found'); };
		$result = $db->fetch_assoc($query);
		
		return $result;
		
	}	
		
		
	//
	// Generate Page Titles
	//
	
	function generate_meta_title($page_title, $p = null) {
	
		global $pun_config, $lang_common, $lang_topic, $id;

		if (!is_array($page_title))
			$page_title = array($page_title);

		$page_title = array_reverse($page_title);

		// Remove forum name from title when linking to threads / posts
		if (isset($lang_topic) && ($id)) {
			unset($page_title[1]);	
		}

		// Display page numbers in Meta Titles
		//
		//	if (!is_null($p)) {
		//		$page_title[0] .= ' ('.sprintf($lang_common['Page'], forum_number_format($p)).')';
		//	}	
		
		$crumbs = implode($lang_common['Title separator'], $page_title);

		return $crumbs;
		
	}
	
	
	//
	// Generate Images
	//
	
	function generate_meta_images($input) {
	
		preg_match_all("/\[img\](.*?)\[\/img\]/ism", $input, $matches);
	
		foreach($matches[0] as $child) {
   			
   			// Remove BBCode
   			$child = preg_replace('#\[[^\]]+\]#', '', $child);
   			
   			// Display Output
   			echo "<meta property=\"og:image\" content=\"" . $child . "\">\n";
   			
		}
	
	}
	
	
	//
	// Generate Page Descriptions
	//
	
	if (isset($lang_index)) {
	
		// Description for Forum Index		
		$meta_desc = pun_htmlspecialchars($pun_config['o_board_desc']);

	
	} else if (isset($lang_forum) && ($id)) {
	
		// Description for Topic List (viewforum)			
		$meta_query = process_query('SELECT f.forum_name, f.forum_desc FROM '.$db->prefix.'forums AS f WHERE f.id='.$id);
		$meta_desc = $meta_query['forum_name'] . ' - ' . $meta_query['forum_desc'];
			
					
	} else if (isset($lang_topic) && ($pid)) {
	
		// Description for Individual Post View (viewtopic, pid)
		$meta_query = process_query('SELECT p.message FROM '.$db->prefix.'posts AS p WHERE p.id='.$pid);
		$meta_desc = pun_htmlspecialchars($meta_query['message']);
	
		
	} else if (isset($lang_topic) && ($id)) {
		
		// Description for Topic View (viewtopic, id)	
		$meta_query = process_query('SELECT p.id, p.message, t.first_post_id FROM '.$db->prefix.'posts AS p LEFT JOIN '.$db->prefix.'topics AS t ON p.id = t.first_post_id WHERE t.id ='.$id);		
		$meta_desc = pun_htmlspecialchars($meta_query['message']);
	
		
	} else { 
		
		// Description for All Other Pages	
		$meta_desc = pun_htmlspecialchars($pun_config['o_board_desc']);
			
	}

	// Remove BBCode
	$meta_desc = preg_replace('#\[[^\]]+\]#', '', $meta_desc);
		
	// Restrict to 200 Characters & Add Ellipsis
	$meta_desc = truncate($meta_desc, 200, "&hellip;");	
	
	
	
	//
	// Display Icons
	//
	
	echo '<link rel="icon" href="' . $pun_config['o_base_url'] . '/style/Default/images/meta/icon.png">';
	echo '<link rel="apple-touch-icon" href="' . $pun_config['o_base_url'] . '/style/Default/images/meta/touch.png" />';
	
	
	//
	// Display Meta Tags
	//
	
	if (!isset($lang_topic)) {
	
		// Only display Meta Description for pages other than topics. 
		// Search engines will instead get their descriptions from the topic content.
		echo '<meta name="description" content="'. $meta_desc . '" />';
		
	}
	
	if (isset($lang_topic) && ($pid)) { 
	
		// Is this linking to an individual post (pid) instead of a whole thread (id)? 
		// Don't index these as they clutter search engine results and generate duplicates.
		echo '<meta name="robots" content="noindex, follow" />'; 
		
	};


	//
	// Display Open Graph Tags
	//

	echo '<meta property="og:title" content="' . generate_meta_title($page_title, $p) . '">';
		
	if (isset($meta_desc)) { 
	
		// Only display Meta Description if a description has been set.
		echo '<meta property="og:description" content="' . $meta_desc . '">'; 
		
	};
		
	echo '<meta property="og:url" content="' . get_current_url() . '">';
	echo '<meta property="og:type" content="website">';
	
	if (isset($meta_query)) {
	
		// If the description was generated from a query, retrieve images from IMG tags 
		// in the description and add those as tags in addition to the standard cover image.
		generate_meta_images($meta_query['message']);
		
	}
		
	echo '<meta property="og:image" content="' . $pun_config['o_base_url'] . '/style/Default/images/meta/cover.png">';
		
?>

Be aware that some of the tags look for images that are assumed to be in the style/Default/images/meta folder, including icon.png (a 64 x 64 high-res favicon), touch.png (a 256 x 256 icon that will be used when bookmarking your site on the home screen of an iOS or Android device) and cover.png (a 512 x 512 image that is used as the default cover image for your site when being linked to from Facebook or Twitter). Since these images are specific to each site, I can't provide them here with the code, although you can see what ThinkClassic's look like for reference:

http://www.thinkclassic.org/style/Defau … a/icon.png
http://www.thinkclassic.org/style/Defau … /touch.png
http://www.thinkclassic.org/style/Defau … /cover.png

The meta.php doesn't require any modifications to the FluxBB core and is called from within main.tpl like so:

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<pun_head>

	<pun_include "includes/meta.php">
	
</head>

As is the case with any code I share, I'm far from a professional at PHP and chances are whatever I produce won't be as efficient as it should be. It's probably worth letting someone more knowledgeable look over it and make corrections before using it in your own production environment.

Cheers,

iMic smile


EDIT (29-08-14): Updated code to escape special characters in descriptions (pun_htmlspecialchars).

Last edited by micbr (2014-09-11 13:45:21)


Administrator, ThinkClassic - A vintage Apple computer community.

Offline

Board footer

Powered by FluxBB 1.5.6