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

Changing .og:image thumbnail

Discussion in 'Styling and Customization Questions' started by Luke B, Jun 18, 2011.

  1. Luke B

    Luke B Active Member

    Good afternoon all,

    I would like my og thumbnail to show images from the site instead of the default thumbnail (how it would show on facebook for example). The catch is, I have some specific specifications for certain pages on the forum and I'm not sure how to go about it.

    Home page: Any of the photos in the "Latest Photos" block.

    User profile: Show the users profile image.

    Album Photo: Show the album photo in the thumbnail. Example: this image would show as a linked thumbnail in facebook, http://slruser.com/useralbums/leo-jpg.14/view-image
    I understand this is the "User Albums" app.

    I'm assuming bellow is the code that needs to be altered. What would I change the "content =" to and how would I alter it on the pages specified above?

    All other pages (thread list, thread...) would use the default thumbnail.

    Code:
    <meta property="og:image" content="http://slruser.com/styles/default/xenforo/logo.og.png" />
    Thank you
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Edit the content templates for those pages:

    Admin CP -> Appearance -> Templates
    > forum_list
    > member_view
    > xfr_useralbums_image_view

    You will see the open_graph_meta template included in these templates. For example, in forum_list you will see this code:

    Code:
    <xen:container var="$head.openGraph">
    	<xen:include template="open_graph_meta">
    		<xen:set var="$url">{xen:link 'canonical:index'}</xen:set>
    		<xen:set var="$title">{$xenOptions.boardTitle}</xen:set>
    	</xen:include></xen:container>
    
    You need to pass in an image. You can use $avatar which is already used by the open_graph_meta template for og:image:

    Code:
    <xen:container var="$head.openGraph">
    	<xen:include template="open_graph_meta">
    		<xen:set var="$url">{xen:link 'canonical:index'}</xen:set>
    		<xen:set var="$title">{$xenOptions.boardTitle}</xen:set>
    		<xen:set var="$avatar">http://slruser.com/yourimage.png</xen:set>
    	</xen:include></xen:container>
    
     
  3. Luke B

    Luke B Active Member

    Thank you Jake

    If I'm understanding this correctly, I'm still setting a specific image for each template using this method. That is one step closer but ultimatly what I would like to achieve is to allow the image/images that are on the current page to be represented in the linked avatar. So If a visitor is viewing an album image for example, that very album image will show up as the thumbnail on facebook. Or if someone is linking to a user profile page on my forum, that users profile image will show up as the thumbnail on facebook.

    Basically what it comes down to is on every page besides those that have no images (thread list, thread...) an image that is currently on that specific page is then represented as a thumbnail.

    Thank you
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    You don't have to hard-code a specific image. For example, member_view uses this to call on the user's avatar:

    Code:
    <xen:container var="$head.openGraph"><xen:include template="open_graph_meta">
    	<xen:set var="$url">{xen:link 'canonical:members', $user}</xen:set>
    	<xen:set var="$title">{$user.username}</xen:set>
    	<xen:set var="$avatar">{xen:helper avatar, $user, 'm', '', 'true'}</xen:set>
    </xen:include></xen:container>
    
    This passes the avatar URL of the user whose profile page is being viewed, as opposed to hard-coding a specific image for all profile pages.

    I don't use your album addon, but presumably there is an image record available to xfr_useralbums_image_view which you can pass into $avatar. I can probably come up with specific code for your album pages if you give me a URL and admin login to your forum. Or link me to that specific addon so I can install it and test it on my own forum.
     
  5. Luke B

    Luke B Active Member

    Thank you Jake

    As soon as I get back home in a few hours I might have to take you up on that offer!

    Thank you again.
     
  6. Luke B

    Luke B Active Member

    Jake,

    Here is the link to the addon. 1.0.0 b2

    Thank you very much for the help on this one. If you prefer not to install it, just let me know.

    Luke
     
  7. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Use this code in your xfr_useralbums_image_view template:

    Code:
    <xen:container var="$head.openGraph"><xen:include template="open_graph_meta">
    	<xen:set var="$url">{xen:link 'canonical:useralbums/view-image', $image}</xen:set>
    	<xen:set var="$title">{$album.title}</xen:set>
    	<xen:set var="$avatar">{xen:helper fullurl, $image.thumbnailUrl, 1}</xen:set>
    </xen:include></xen:container>
    
    That will add appropriate tags to this page (including the thumbnail image):

    http://slruser.com/useralbums/leo-jpg.14/view-image
     
  8. Luke B

    Luke B Active Member

    Thank you so much for this Jake

    Where about do I place this code in the xfr_useralbums_image_view template?
     
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I put it near the top, like so:

    Code:
    <xen:require css="xfr_useralbums_images_list.css" />
    <xen:title>{$album.title}</xen:title>
    <xen:h1>{$album.title}</xen:h1>
    
    <xen:description>
    	{xen:phrase xfr_useralbums_album_created_by_x_date_y,
    		'name={xen:helper username, $album}',
    		'date=<a href="{xen:link useralbums/view, $album}">{xen:datetime $album.createdate, html}</a>'}
    </xen:description>
    
    <xen:container var="$head.openGraph"><xen:include template="open_graph_meta">
    	<xen:set var="$url">{xen:link 'canonical:useralbums/view-image', $image}</xen:set>
    	<xen:set var="$title">{$album.title}</xen:set>
    	<xen:set var="$avatar">{xen:helper fullurl, $image.thumbnailUrl, 1}</xen:set>
    </xen:include></xen:container>
    
    <xen:navigation>
    	<xen:breadcrumb source="$breadCrumbs" />
    </xen:navigation>
    
     
  10. Luke B

    Luke B Active Member

    I went ahead and pasted the code where you have it and refreshed the page but I'm still not seeing any thumbnail in facebook for the album images. Could this be a Facebook cache issue?
     
  11. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    The meta data is showing in the page source now:

    http://slruser.com/useralbums/leo-jpg.14/view-image

    It could very well be a cache issue with respect to facebook. I have never used facebook so I'm not familiar. Try posting a new picture.
     
  12. Brogan

    Brogan XenForo Moderator Staff Member

  13. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  14. Luke B

    Luke B Active Member

    Thank you Brogan, that is very handy.

    Jake, I also see it in the page source as well. Not sure what to make of this :/
     
  15. Luke B

    Luke B Active Member

    Interesting, it seems as though the Facebook URL Linter just took a nose dive for some reason. The link Brogan supplied works fine, but when you try another URL you get a big fat "Sorry, something went wrong. We're working on getting this fixed as soon as we can"
     
  16. Luke B

    Luke B Active Member

    It works! It must have been a cache issue with respect to facebook. Jake and Brogan, thank you for your help on this.
     

Share This Page