New to the community? Start here

[SmartCrawl Pro] Default OpenGraph Image & can OpenGraph image be set via function

Hi there,

Two related questions:

1) Is there a way to set a global default OpenGraph image? For example a large company logo. This would be for pages that had no images of their own.

2) Most pages on this particular site do have images, but images that are lazyloaded, so they load after the fact and also don't use the official Featured Image field. Is there a way for me to specify an image to be used for OpenGraph of a specific post/page in code? I would like to limit what the client needs to do manually.

Let me know if the questions are unclear

Thanks

Mon, 10 Dec 2018 15:16:22
More SmartCrawl Pro discussions
SmartCrawl Pro
  • Aditya Shah
    • DevOps Team Lead

    Hi James,

    Thank you for contacting WPMU DEV Support. Hope you are doing great today. :slight_smile:

    1) Is there a way to set a global default OpenGraph image? For example a large company logo. This would be for pages that had no images of their own.

    I would like to update you that there is a way to set a global default OpenGraph image in Smart Crawl. Jump to SmartCrawl -> Titles & Meta. In that area, select Post Types then Pages and scroll down to find the Options section. You’ll see the OpenGraph and Twitter Cards section there. Turn on the Twitter Cards option and upload a default feature image – that will show across all your pages that don’t have a featured image uploaded.

    Let me know if you have any issues, here are a few screenshots to help

    [attachments are only viewable by logged-in members]

    [attachments are only viewable by logged-in members]

    2) Most pages on this particular site do have images, but images that are lazyloaded, so they load after the fact and also don’t use the official Featured Image field. Is there a way for me to specify an image to be used for OpenGraph of a specific post/page in code? I would like to limit what the client needs to do manually.

    To specify an image to be used for OpenGraph of a specific post/page you can go to the page/post -> scroll down to Smart Crawl -> Social – here you can see an option to set OpenGraph title, image, and description which will be specific to the same post/page.

    By the way, I am not sure if I was able to answer your question completely as you mentioned “specify an image to be used for OpenGraph of a specific post/page in code” can you specify which code are you referring to here? Also, if you can elaborate “I would like to limit what the client needs to do manually.” would be more beneficial for me to help you with this.

    Best,

    Aditya Shah

  • James
    • Site Builder, Child of Zeus

    Thanks, Aditya.

    By “in code” I mean can I set the opengraph image without using the UI like you have shown. I know how to do what you described, but I would like to instead populate it programmatically using an image from an Advanced Custom Field.

  • Aditya Shah
    • DevOps Team Lead

    Hi James,

    I would like to update you that there seems to be no straight hook into for og:image, in general none of the og: have any hooks at the moment to change anything.

    So, I am escalating this to the second line support team for further comments. However, we can’t promise if it’s actually possible since there are no obvious hooks yet.

    Best,

    Aditya Shah

  • Kostas
    • CTO

    Hi James and sorry for the late reply.

    You could do some edits if you like on the core files of the plugin to add an image via a filter if you like.

    To do this:

    1] Edit the file at /wp-content/plugins/wpmu-dev-seo/includes/tools/class-wds-opengraph-printer.php

    2] On Line 174 you will find:

    if ( empty( $values ) ) {
    
return;
    
}

    3] Replace it with:

    $values = apply_filters( 'wds_custom_og_image', $values );
    

    
if ( empty( $values ) ) {
    
return;
    
}

    4] Save the file.

    You can now use a filter like this to add a ‘global’ image if no other image exists:

    add_filter(
    
'wds_custom_og_image',
    
function( $image ) {
    

    
if ( empty( $image ) ) {
    
$image = 'http://something.com/image.jpg';
    
}
    

    
return $image;
    
}
    
);

    You can use this in a mu-plugin for example and modify it further if you like to have a different image on home page if you like so on so forth.

    As you can understand since you’re editing core plugin files make sure to keep a backup first before any changes.

    This is a change for you but most likely we will introduce hooks into all OG tags on an upcoming release but I can’t promise an ETA for the time being, so make sure to check before updating just in case you need to re-apply this change.

    I hope this helps and tell me if you need further assistance.

    Regards,

    Konstantinos