<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">{$thread.title}</xen:set>
<xen:set var="$avatar">{xen:helper avatar, $thread, m, 0, 1}</xen:set>
</xen:include></xen:container>
<xen:comment>extract first thumbnail URL from first post, for use in open_graph_meta below</xen:comment>
<xen:if is="{$firstPost.attachments}">
<xen:foreach loop="$firstPost.attachments" value="$attachment" i="$i" count="$count">
<xen:if is="{$i} == 1 AND {$attachment.thumbnailUrl}">
<xen:set var="$ogThumb">{xen:helper fullurl, $attachment.thumbnailUrl, 1}</xen:set>
</xen:if>
</xen:foreach>
</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">{$thread.title}</xen:set>
<xen:set var="$avatar"><xen:if is="{$ogThumb}">{$ogThumb}<xen:else />{xen:helper avatar, $thread, m, 0, 1}</xen:if></xen:set>
</xen:include></xen:container>
Do you think adding images from [ img ] is possible?
This code is a little ugly. I couldn't find a way to access the first attachment from $firstPost.attachments without using foreach. There may be an easier way, but this code works in my testing.
I came up with this template edit that sets the thumbnail of the first attachment in the first post as an og:image. Otherwise it will fall back to using the avatar of the thread author which it already does by default.
Edit this template:
Admin CP -> Appearance -> Templates -> thread_view
Replace this code:
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">{$thread.title}</xen:set> <xen:set var="$avatar">{xen:helper avatar, $thread, m, 0, 1}</xen:set> </xen:include></xen:container>
With this:
Code:<xen:comment>extract first thumbnail URL from first post, for use in open_graph_meta below</xen:comment> <xen:if is="{$firstPost.attachments}"> <xen:foreach loop="$firstPost.attachments" value="$attachment" i="$i" count="$count"> <xen:if is="{$i} == 1 AND {$attachment.thumbnailUrl}"> <xen:set var="$ogThumb">{xen:helper fullurl, $attachment.thumbnailUrl, 1}</xen:set> </xen:if> </xen:foreach> </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">{$thread.title}</xen:set> <xen:set var="$avatar"><xen:if is="{$ogThumb}">{$ogThumb}<xen:else />{xen:helper avatar, $thread, m, 0, 1}</xen:if></xen:set> </xen:include></xen:container>
For referenece:
http://xenforo.com/community/threads/changing-og-image-thumbnail.17141/
is this applicable still in 1.1 ?
thanks jake.
does this mod also covers if images posted from photobucket or other sources?
The template mod I posted uses the thumbnail for the first attachment in the first post. If there is no attachment to use then it will default to using the avatar of the thread author. And in addition to those content-specific images there is the default og:image that is also used:
Admin CP -> Appearance -> Style Properties -> Header and Navigation -> Facebook Open Graph Logo
yup but the weird thing is when you copy the url of your thread and post it in fb,
it will display the default og.logo of xenforo , and 2nd thumbnail is the first image posted in the message.
just wondering why fb wont display by default your first image in your message and not the default og.logo of xf
<xen:if is="{$xenOptions.facebookAppId} OR {$xenOptions.facebookAdmins}">
<meta property="og:site_name" content="{$xenOptions.boardTitle}" />
<xen:if is="{$avatar}"><meta property="og:image" content="{$avatar}" /></xen:if>
<xen:if is="!{$avatar}"><meta property="og:image" content="{xen:helper fullurl, @ogLogoPath, 1}" /></xen:if>
<meta property="og:type" content="article" />
<meta property="og:url" content="{xen:raw $url}" />
<meta property="og:title" content="{xen:raw $title}" />
<xen:if is="{$xenOptions.facebookAppId}"><meta property="fb:app_id" content="{$xenOptions.facebookAppId}" /></xen:if>
<xen:if is="{$xenOptions.facebookAdmins}"><meta property="fb:admins" content="{xen:helper implode, {$xenOptions.facebookAdmins}, ','}" /></xen:if>
</xen:if>
on my old VB site I feel like fab book would find every image on the page including avatars & [ img ] tags. then let me pick one. would deleting the og:image lines all together give that back to me? is that a bad idea & if so, whats the down side?
I miss that, I'd rather have an image that's related to the thread then some generic one.on my old VB site I feel like fab book would find every image on the page including avatars & [ img ] tags. then let me pick one. would deleting the og:image lines all together give that back to me? is that a bad idea & if so, whats the down side?
<xen:comment><xen:if is="{$avatar}"><meta property="og:image" content="{$avatar}" /></xen:if></xen:comment>
<xen:comment><meta property="og:image" content="{xen:helper fullurl, @ogLogoPath, 1}" /></xen:comment>
<xen:comment><xen:set var="$avatar">{xen:helper avatar, $thread, m, 0, 1}</xen:set></xen:comment>
Its pretty important to have OG:Image pickup a relevant image from the page. I may resort to commenting out the lines, but perhaps there should be a better way of dealing with this?
<xen:if is="{$xenOptions.facebookAppId} OR {$xenOptions.facebookAdmins}">
<meta property="og:site_name" content="{$xenOptions.boardTitle}" />
<xen:if is="{$avatar}"><meta property="og:image" content="{$avatar}" /></xen:if>
<meta property="og:image" content="{xen:helper fullurl, @ogLogoPath, 1}" />
<meta property="og:type" content="article" />
<meta property="og:url" content="{xen:raw $url}" />
<meta property="og:title" content="{xen:raw $title}" />
<xen:if is="{$xenOptions.facebookAppId}"><meta property="fb:app_id" content="{$xenOptions.facebookAppId}" /></xen:if>
<xen:if is="{$xenOptions.facebookAdmins}"><meta property="fb:admins" content="{xen:helper implode, {$xenOptions.facebookAdmins}, ','}" /></xen:if>
</xen:if>
We use essential cookies to make this site work, and optional cookies to enhance your experience.