Featured Image help

  • Unknown's avatar
    fullofgracedj · Member ·

    So…ever since we added the Instagram side bar, when we post, even if we have inserted a picture into the post, Facebook grabs the instagram picture as the thumbnail. So today, I have a post on Lent with a picture of waffles. No bueno. I already chatted with support and Chrissie told me that I have to select a featured image for Facebook to grab the correct picture. But if I do that, our theme will then insert that image into the title picture on the landing page–which is a wide and skinny space and requires any photo to be cropped. We’ve tried it, and it’s awful. So I need help with a CSS code to tell my theme to leave the landing page pic alone when I set a featured image. Thank you!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    First, having an Instagram image in the sidebar doesn’t sound to me like it should be the image Facebook picks if the post has other images that are large enough in it. We can actually look at the data from your latest post’s page source to see what is being sent to Facebook as well as check a debug tool from Facebook directly.

    Facebook uses a format called Open Graph, and looking at the page source for this post:
    http://fullofgraces.com/2015/02/17/the-top-of-the-hill/

    I see this line:
    <meta property="og:image" content="https://wwwdotfullofgracedotcom.files.wordpress.com/2013/07/img_20130716_164339.jpg?w=300">

    And that is a reference for the “family rules” image:
    https://wwwdotfullofgracedotcom.files.wordpress.com/2013/07/img_20130716_164339.jpg?w=300

    That <meta> tag is formatted to Facebook’s specifications, so that leads me to think that WordPress.com has setup the post correctly and it’s a bug on Facebook’s side that the specified image is not being picked up.

    The image looks correct to me on Facebook’s debug tool as well—I see the “family” rules image:
    https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Ffullofgraces.com%2F2015%2F02%2F17%2Fthe-top-of-the-hill%2F

    See https://cloudup.com/cxRUBC5f383

    From everything I can see, the correct image is being specified. So if the problem is a bug on Facebook’s side (which it might be), then a featured image might not solve the problem but it’s worth a shot. Another thing you might try before making a CSS change is making sure the first image in the post itself is a larger image (although 300px should be large enough, so I’m not sure, might be worth a try).

    I need help with a CSS code to tell my theme to leave the landing page pic alone when I set a featured image

    I can try to help you with that! By landing page, I assume you mean individual post? What we can do is override the design after it gets set.

    For example, here is a single post from the Hemingway Rewritten demo site:
    https://hemingwayrewrittendemo.wordpress.com/2011/09/20/the-sun-also-rises-a-review/

    The featured image for that post is a picture of pinecones. You could switch the image back to the one from the front page, however, the same header image would have to be used for all posts (which might be okay with you) and you would need to remember to update this CSS manually if you want to change out the image in the future.

    .site-header-image {
	background-image: url(http://wwwdotfullofgracedotcom.files.wordpress.com/2014/10/cropped-img_9267.jpg);
}

    I wouldn’t recommend the featured image CSS change if you can get it to work in another way.

  • The topic ‘Featured Image help’ is closed to new replies.