Different og:image for each forum category

[Brent W]

Hi,

I would like to be able to define a different og:image for each forum category and have all threads within that category use that image.

For example, on this forum: http://www.secfootballforums.com/ I am using different node icons for each forum. If someone likes the category Florida Football or likes a thread inside the category Florida Football, I would like to tell Facebook to use the Florida logo as the image when they like it.

What is the best way to go about doing this in 1.1?

 

[Jake Bunce]

That link isn't loading for me.

For reference, edit this template:

Admin CP -> Appearance -> Templates -> thread_view

This is the code that sets the og information:

<xen:container var="$head.openGraph"><xen:include template="open_graph_meta">
		<xen:set var="$url">{xen:link 'canonical:threads', $thread}</xen:set>
		<xen:set var="$title">{xen:helper threadPrefix, $thread, escaped}{$thread.title}</xen:set>
		<xen:set var="$avatar">{xen:helper avatar, $thread, m, 0, 1}</xen:set>
	</xen:include></xen:container>

This code can be used in other templates such as forum_view. The red part is what sets the custom og:image for thread pages. It's using xen:helper to pull the full URL of the thread author's avatar. You can enter a different image URL here.

The trick will be finding a way to define a custom image for each forum for use as an og:image. Since you want to use your existing node icons the question becomes, how are those icons currently implemented? Maybe we can reference the URL somehow.

 

[Brent W]

Hmm I switched DNS providers today so it may have to do with that. It still loads fine for me. I'll keep an eye on it though.

The current icons are to small to use, I was just going to upload 50x50 ones that looked the same and direct the code to use those depending on the forum and thread.

 

[Jake Bunce]

Then you can use code like this:

<xen:if is="{$forum.node_id} == 2">
	<xen:set var="$ogimage">ogimage for forumId 2</xen:set>
<xen:elseif is="{$forum.node_id} == 4" />
	<xen:set var="$ogimage">ogimage for forumId 4</xen:set>
<xen:else />
	<xen:set var="$ogimage">ogimage for all other forums</xen:set>
</xen:if>

<xen:container var="$head.openGraph"><xen:include template="open_graph_meta">
		<xen:set var="$url">{xen:link 'canonical:threads', $thread}</xen:set>
		<xen:set var="$title">{xen:helper threadPrefix, $thread, escaped}{$thread.title}</xen:set>
		<xen:set var="$avatar">{xen:raw $ogimage}</xen:set>
	</xen:include></xen:container>

Add more elseif's to check more forumIds.

The red parts need to be full image URLs.

 

[Brent W]

Thanks, will that work for threads too?

 

[Jake Bunce]

Yes it will. The same code will work in both forum_view and thread_view.

 

[Brent W]

Great! Could you let me know if the link is now loading for you?

 

[Jake Bunce]

Yep, it works now.

 

[DRE]

Cool.

 

[vkams]

Jake, will you please advise me how to make individual forum headers? For example, for forum "Grass" (and its subforums) header will be grass field, for "Fruits" - corresponding.

Currently I set the header background common to all forums:

#header {
 
background: #FAF8E0 url("/styles/default/xenforo/header.jpg") repeat-x;
 
...
 
}

How can I make it special for certain forum node indexes?

 

[Jake Bunce]

Which header exactly? I want to be sure which area you are talking about.

 

[vkams]

Page header:
I'd like to show different pictures without creating extra styles which differ only in one parameter.

 

[Jake Bunce]

Like this:

http://xenforo.com/community/threads/set-different-body-background-for-each-forum-css.24511/

But you would add #header, like so:

body.node2 #header
{
	background: #123456 url('path/to/background2.gif') repeat top;
}

body.node8 #header
{
	background: #000000 url('path/to/background8.gif') repeat top;
}

 

[vkams]

Thank you very much, it works!!