• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Different og:image for each forum category

Brent W

Well-known member
#1
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

XenForo moderator
Staff member
#2
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:

Code:
<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

Well-known member
#3
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

XenForo moderator
Staff member
#4
Then you can use code like this:

Code:
<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.
 

vkams

Active member
#10
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:
Code:
#header {
 
background: #FAF8E0 url("/styles/default/xenforo/header.jpg") repeat-x;
 
...
 
}
How can I make it special for certain forum node indexes?