Problem with custom function that adds Post Avatar og:image
-
I’m using a function added to my child theme’s function.php file for the purpose of adding the Post Avatar image to Facebook’s required meta property og:image list in the url.
The code was suggested in this forum exchange, and I used it and it worked. However, I just noticed that when there is no Post Avatar on the page, it leaves a line like this:
<meta property=”og:image” content=””/>
…and Facebook doesn’t like that. Their debugger says:
Errors That Must Be Fixed
Object Missing a Required Value Object at URL ‘https://www.humortimes.com/34003/humor-times-founder-editor-to-appear-on-radio-paralax-show-april-2nd/’ of type ‘article’ is invalid because a required property ‘og:image:url’ of type ‘url’ was not provided.What can I do to address this? Can I add an ‘else’ statement to the function, so that if there is no avatar, there’s a default image to use?
-
What is the size of the default image in relation to post avatar image?
Can you provide me some links:
1) Post with featured image
2) Post with post avatar image
3) Post with default imageActually, the default image size was much larger, but I just changed that. It’s 200px wide now, by 264. The avatars are 200x200px. So I suppose it may not help, as the default is still a bit larger.
1) Post with featured image:
https://www.humortimes.com/34020/rory-mcilroy-first-psychic-golfer/2) Post with post avatar image:
https://www.humortimes.com/34091/faq-religious-freedom-restoration-act/The default image url is just inserted into the meta data, it’s not actually in any posts.
Thanks again for your help!
Do you have any other code that adds the default image?
In my test, if a featured image has been set, default image is not created within
<head>(unlike in link #1)Same thing goes when a post avatar is set, no default image is included in the
<head>code.They are there. If you look at the url page source file for link #1:
The og:image for the attached image is on line 60, for the default, it’s on line 196.For link #2:
The og:image for the avatar image is on line 195, for the default, it’s on line 59.WordPress SEO is supposed to set the default image, however, I noticed that since we added it to the function code, it’s only showing up once, so I guess the function’s default is overriding the other one.
WordPress SEO is supposed to set the default image, however, I noticed that since we added it to the function code, it’s only showing up once, so I guess the function’s default is overriding the other one.
That’s what is happening. Let’s revise the code so that if there isn’t a post avatar it will just fall back to the default image generated by WordPress SEO.
// No post avatar, don't do anything if( isnull( $avatar_array ) ) { return; } else { $og_image = '<meta property="og:image" content="' . esc_url( $avatar_array['avatar_url'] ) . '" />' . "\n"; }Okay, so the full function would be:
add_action( 'wp_head', 'gklpa_ogimage', 99 ); function gklpa_ogimage(){ global $post; $og_image = ''; // featured image exists, no need to proceed if( has_post_thumbnail( $post->ID ) ) return; // Only display on the post itself if( is_single() ){ $avatar_array = gkl_get_postavatar($post); // If there's not post avatar set a default image if( is_null( $avatar_array ) ) { return; } else { $og_image = '<meta property="og:image" content="' . esc_url( $avatar_array['avatar_url'] ) . '" />' . "\n"; } } echo $og_image; }… correct? (Btw, you forgot the _ in is_null again!)
Your code is correct.
Sorry for the bother, how now I think it should be simpler. If there’s an Avatar, add a og:image line for it in the head, if not, don’t do anything — since WordPress SEO is handling the rest of it.
I should’ve clarified that early on, sorry.
So, I set the null value for the og:image at the beginning like you did, but if there is no Avatar, I don’t want it to echo this, or to do anything, so it just returns. Will this work?
add_action( 'wp_head', 'gklpa_ogimage', 99 ); function gklpa_ogimage(){ global $post; $og_image = ''; // Only display on the post itself if( is_single() ){ $avatar_array = gkl_get_postavatar($post); if( is_null( $avatar_array ) ) { return; } else { $og_image = '<meta property="og:image" content="' . esc_url( $avatar_array['avatar_url'] ) . '" />' . "\n"; echo $og_image; return; } } }Also, I read here that if you’re adding Open Graph meta, you need this little section of code. What do you think? I mean, your code was successfully adding the meta without it.
function doctype_opengraph($output) { return $output . ' xmlns:og="https://opengraphprotocol.org/schema/" xmlns:fb="https://www.facebook.com/2008/fbml"'; } add_filter('language_attributes', 'doctype_opengraph');…and if you do think it’s needed, can it be inserted into our function, so it’s only run when needed?
Regarding the additional section of code, that is something you should take up with the WordPress SEO plugin if it’s necessary or not. I not familiar with the open graph protocol to give you an adequate answer.
But if it is, all you’d need to do is drop that code in your functions.php
As for the Post Avatar, you don’t need to use
return;after setting the$og_image. So the following code will work, only outputting the post avatar image meta info if it exists.add_action( 'wp_head', 'gklpa_ogimage', 99 ); function gklpa_ogimage(){ global $post; $og_image = ''; // Only display on the post itself if( is_single() ){ $avatar_array = gkl_get_postavatar($post); // No Post Avatar so get out of here if( is_null( $avatar_array ) ) { return; // Post Avatar exists so let's display it } else { $og_image = '<meta property="og:image" content="' . esc_url( $avatar_array['avatar_url'] ) . '" />' . "\n"; echo $og_image; } } }Awesome, thank you very much.
It’s working exactly as I wanted. However, there’s one more thing I need to do. You’ve gone well beyond the call of duty, so if you don’t want to help me anymore, I don’t blame you.
But, if you don’t mind going further, here’s the remaining problem.
I don’t want to leave the default image up to WP SEO, because it will include it even when there’s an avatar image that we add with this code. Then, FB picks that up instead of the avatar, for sharing.
However, if I just leave a default image out, then if there is no avatar AND the attached image is too small for FB OR there is no image, then there will be no default image for FB to grab.
So, I would like to test for an attached image, and if there is one, check it’s size. If there is no image, or if it’s not big enough, then I’d like to add the default image to the og:image list.
I know this complicates things quite a bit, so I don’t blame you if you don’t want to get involved.
However, this is what I came up with after some research, but it’s not working. If you have any hints, that’d be great.
(This code would come after initially testing for an avatar image — if it is available, the code would just return after adding it to the og:image list. And if the image is not too small, then it does nothing, as WP SEO will be adding it. Btw, I set the default image before this, so that’s why I have the ‘return’ after testing if the image is large enough, so it will quit before adding the default image):
if( has_post_thumbnail( $post->ID ) ){ $image_attributes = wp_get_attachment_image_src( $attachment_id ); // returns an array if( $image_attributes ) { ?> <img src="<?php echo $image_attributes[0]; ?>" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>"> <?php $width = width $height = height if ( $width > "199" || $height > "199" ) return; } }Let me look into this. I’ll have some code for you to try out later.
The code is bit long as I’ve split it into different functions that check for the following:
1. Determine if featured image (based on defined attachment size) meets the dimension criteria. If it does then there’s no need to do anything.
2. If the featured image does not meet the defined criteria then the code checks for the post avatar image.
3. If the post avatar image does not exist, the code will look for any images included within the content and return the first image that meets the dimension criteria.
4. If there’s still nothing available, then show the default image.You can set the image dimensions to check for and what type of attachment size you want to verify against in
$valid_og_image = gklpa_get_ogimage( 199, 'full' );
Set the default URL in$og_image = esc_url( 'URL to default image' );add_action( 'wp_head', 'gklpa_ogimage', 99 ); /* * Display the open graph image meta */ function gklpa_ogimage(){ $og_image_meta = ''; $valid_og_image = gklpa_get_ogimage( 199, 'full' ); if( $valid_og_image != '' ) $og_image_meta = '<meta property="og:image" content="' . esc_url( $valid_og_image ) . '" />' . "\n"; echo $og_image_meta; } /* * Function that checks for an additional image to include in the open graph meta (either post avatar, images in content or default image) * * @param int $min_dim Value to check height/width against * @param string $size Image attachment size to check (for featured images) e.g. thumbnail, medium, full. Defaults to 'full' * @returns string $og_image Valid open graph image * */ function gklpa_get_ogimage( $min_dimension = 199, $size = 'full' ){ global $post; $og_image = ''; if( is_single() ) { $featured_image = gklpa_prep_featured_image( $min_dimension, $size ); // featured image meets criteria so no need to proceed if( $featured_image != '' ) return; $post_avatar = gklpa_prep_post_avatar( $min_dimension ); // post avatar meets criteria so set that as open graph image if( $post_avatar != '' ){ $og_image = $post_avatar; } else { // check for valid images within the post $og_image = gklpa_prep_content_image( $min_dimension ); } // No valid image so let's call the default; if( $og_image == '' ){ $og_image = esc_url( 'URL to default image' ); } return $og_image; } } /* * Ensures that the featured image meets the image dimension criteria * * @param int $min_dim Value to check height/width against * @param string $size Image attachment size to return e.g. thumbnail, medium, full. Defaults to 'full' * @returns string $image_url Valid featured image url or empty string * */ function gklpa_prep_featured_image( $min_dim, $size = 'full' ){ global $post; $image_url = ''; // get attachment id of featured image $image_id = get_post_thumbnail_id( $post->ID ); if ( $image_id != '' ) { // featured image exists so get image details based on attachment size $image = wp_get_attachment_image_src( $image_id, $size ); $width = $image[1]; $height = $image[2]; // make sure featured image meets required dimensions and set url if( $width > $min_dim || $height > $min_dim ){ $image_url = $image[0]; } } return $image_url; } /* * Ensures that the post avatar image meets the image dimension criteria * * @param int $min_dim Value to check height/width against * @returns string $avatar_url Valid post avatar url or empty string * */ function gklpa_prep_post_avatar( $min_dim ){ global $post; $avatar_array = gkl_get_postavatar($post); $avatar_url = ''; // No Post Avatar so get out of here if( is_null( $avatar_array ) ) { return; // Post Avatar exists return the URL } else { $avatar_url = esc_url( $avatar_array['avatar_url'] ); } return $avatar_url; } /* * Checks post content for images and ensures that image meets the image dimension criteria * Based on https://css-tricks.com/snippets/wordpress/get-the-first-image-from-a-post/ * * @param int $min_dim Value to check height/width against * @returns string $image_url Valid image url or empty string * */ function gklpa_prep_content_image( $min_dim ) { global $post, $posts; $image_url = ''; $image_list = array(); ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); // Get images from post content if( $matches ){ foreach( $matches[1] as $image_url ){ // get image dimensions list($width, $height, $type, $attr) = getimagesize( esc_url( $image_url) ); // return the first image that meets criteria if( $width > $min_dim || $height > $min_dim ) { return esc_url( $image_url ); } } } }You’re amazing, thank you.
So the first section is looking for an image at least 199 pixels for both dimensions, right? It actually needs to be at least 200px in each dimension, so I can change that.
However, you say,
3. If the post avatar image does not exist, the code will look for any images included within the content and return the first image that meets the dimension criteria.
Why does it need to look again for another image and check its size, if it does that first? If that first check finds an image that is large enough, it returns, no need to check further, WordPress SEO will pass that image on. But if it’s not big enough, and there is no avatar at that point, it could just go ahead and do the default image for the ‘else’ part in that second function couldn’t it? I don’t know why we need to do any more than that with those other functions, other than the one that checks the avatar size, I suppose.
However, there is a potential problem I spotted: In that second function, you set $og_image = ”; at the start, and then it checks for post image being the required minimum, and if it finds it, it returns. So we’ve left $og_image = ”; — and that’s a problem, because if that gets included in the meta data, FB doesn’t like that.
So the first section is looking for an image at least 199 pixels for both dimensions, right? It actually needs to be at least 200px in each dimension, so I can change that.
You don’t need to change it. It’s looking for an image with height or width that is greater than 199 i.e. 200px
Why does it need to look again for another image and check its size, if it does that first?
If you’ve placed any
<img>tags within the post content, it will get an image from there. You can omit this if you want.However, there is a potential problem I spotted: In that second function, you set $og_image = ”; at the start, and then it checks for post image being the required
You’ll note that the last bit of code displays the default image so that will be returned by the code. You can always set the default image url first.
This is the revised second function without checking for the images in post content as well as default url set at the beginning.
function gklpa_get_ogimage( $min_dimension = 199, $size = 'full' ){ global $post; $og_image = 'URL TO DEFAULT IMAGE'; if( is_single() ) { $featured_image = gklpa_prep_featured_image( $min_dimension, $size ); // featured image meets criteria so no need to proceed if( $featured_image != '' ) return; $post_avatar = gklpa_prep_post_avatar( $min_dimension ); // post avatar meets criteria so set that as open graph image if( $post_avatar != '' ){ $og_image = $post_avatar; } return $og_image; } }Okay, it’s working great, except for this situation. On this page, the attached image is too small on one side (194×259), but it is still being included in the Page Source, and although the default image is listed, FB doesn’t look for it when sharing, it just rejects it and picks some other random image (an ad) on the page: https://www.humortimes.com/34050/isis-gaining-momentum-brick-brick/
If the default image were the only one listed, I believe FB would pick it up.
I’m guessing the image is being added by WordPress SEO, but I don’t know how to stop that. I don’t want to turn off the plugin’s Open Graph meta additions, because it adds a lot of other info, but I can’t selectively tell it to stop including the image. Is there any way to block it from including that via the functions file? Perhaps by using the wpseo_opengraph_image filter they provide?
- The topic ‘Problem with custom function that adds Post Avatar og:image’ is closed to new replies.
