Filter to Set OpenGraph thumbnail / fallback thumbnail from custom field

#516055
  • Hi, In my Theme I have Custom Field Called poster_hotlink Which it have direct image url…

    I would like that custom field to be used as OpenGraph/Fallback thumbnail instead of default OpenGraph thumbnail.

    How to do it? Is there any filters to use? Thanks.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Hello,

    Thank you for contacting Rank Math and sorry for any inconvenience that might have been caused due to that.

    Yes, there’s a filter to change the Opengraph image. The code is:

    
    /**
     * Allows developers to change the OpenGraph image within theme.
     *
     * The dynamic part of the hook name. $network, is the network slug. Can be facebook or twitter.
     *
     * @param string $attachment_url The image we are about to add.
     */
    add_filter( "rank_math/opengraph/{$network}/image", function( $attachment_url ) {
    	return $attachment_url;
    }); 
    

    You can read more about it here: https://rankmath.com/kb/filters-hooks-api-developer/#change-opengraph-image

    Hope that helps. Please don’t hesitate to let us know if you need our assistance with anything else.

    Thank You

    Thanks…

    But I want the image to be obtained from theme custom field poster_hotlink how to do that..?

    And am using custom post type called “movies” and another one called “series”

    Hello,

    If your custom field poster_hotlink returns an absolute image path, then you can use the following filter code on your website:

    add_filter( "rank_math/opengraph/facebook/image", function( $attachment_url ) {
    	global $post;
    	$new_image_url = get_field('poster_hotlink', $post->ID);
    
    	if($new_image_url){
    		$attachment_url = $new_image_url;
    	}
    
      return $attachment_url;
    });
    

    Let us know how it goes.

    Thank you.

    Thank you but it not working for me Am getting critical Error.

    I added my login info in Sensitive Data Section Please check.

    This info may be helpful

    Post Type to work with is Movies and Series Post type.

    The Custom field poster_hotlink in frontend it show url as example url in backend. /mVl3HmtZynzfbq4Wvh2eRhGJDSZ.jpg but in frontend it produce full url like this https://image.tmdb.org/t/p/w500/mVl3HmtZynzfbq4Wvh2eRhGJDSZ.jpg

    So That Field It is the field that is saved in db and called back in frontend

    And One last thing the image are external images from “https://image.tmdb.org/t/p/w500/……jpg”

    Thanks

    Hi, Any Update in this ticket. Thanks

    Hello,

    There are two issues here.

    First, you are using a different implementation of a custom field so we need to use a different method for retrieving the value. Hence, you are seeing a critical error.

    Second, the value from the custom field isn’t a complete image URL so in the code, you need to specify or prepend the remaining address to complete the URL.

    I went ahead and modified the filter code for you:

    add_filter( "rank_math/opengraph/facebook/image", function( $attachment_url ) {
    	global $post;
    	$new_image_url = get_post_meta($post->ID, 'poster_hotlink', true);
    
    	if($new_image_url){
    		$attachment_url = 'https://image.tmdb.org/t/p/w500' . $new_image_url;
    	}
    
      return $attachment_url;
    });

    Kindly test this and see if this will resolve the issue.

    On another note, your website is currently heavily cache so after applying the filter code, please clear your website cache and check the source code if the og:image is applied correctly.

    Looking forward to helping you.

    Hi, Thank You.. I tried in Discord, Facebook and Telegram I still get the default Opengraph image..

    I also Added Control Panel Logins incase you need

    Hello,

    I’ve added the the following code snippet in your child theme’s functions.php and now it’s working perfectly fine.

    add_filter( "rank_math/opengraph/facebook/image", function( $attachment_url ) {
    	global $post;
    	$new_image_url = get_post_meta($post->ID, 'poster_hotlink', true);
    
    	if($new_image_url){
    		$attachment_url = 'https://image.tmdb.org/t/p/w500'.$new_image_url;
    	}
    
      return $attachment_url;
    });
    
    add_filter( "rank_math/opengraph/twitter/image", function( $attachment_url ) {
    	global $post;
    	$new_image_url = get_post_meta($post->ID, 'poster_hotlink', true);
    
    	if($new_image_url){
    		$attachment_url = 'https://image.tmdb.org/t/p/w500'.$new_image_url;
    	}
    
      return $attachment_url;
    });

    Here you can check on Facebook, it’s showing the correct one:
    https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fwww.pressplay.top%2Fmovies%2Fwatch-black-panther-wakanda-forever-online%2F

    Hope that helps, and please do not hesitate to let us know if you need our assistance with anything else.

    Thank you.

    Thank you so much.. it worked fine.. Rank Math have the best support.

    Hello,

    We’re super happy that this resolved your issue.

    Please feel free to reach out to us again in case you need any other assistance.

    We are here to help.

    Thank you.

Viewing 12 replies - 1 through 12 (of 12 total)

The ticket ‘Filter to Set OpenGraph thumbnail / fallback thumbnail from custom field’ is closed to new replies.