1. 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

Discussion in 'Styling and Customization Questions' started by BamaStangGuy, Dec 12, 2011.

  1. BamaStangGuy

    BamaStangGuy Well-Known Member

    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?
     
    danswano and Kjartan Simonsen like this.
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
  3. BamaStangGuy

    BamaStangGuy Well-Known Member

    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.
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
    Trombones13 likes this.
  5. BamaStangGuy

    BamaStangGuy Well-Known Member

    Thanks, will that work for threads too?
     
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

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

    BamaStangGuy Well-Known Member

    Great! Could you let me know if the link is now loading for you?
     
  8. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Yep, it works now.
     
  9. DRE

    DRE Well-Known Member

    Cool.
     
  10. vkams

    vkams Active Member

    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?
     
  11. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

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

    vkams Active Member

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

    Jake Bunce XenForo Moderator Staff Member

    vkams likes this.
  14. vkams

    vkams Active Member

    Thank you very much, it works!!
     

Share This Page