Rich DeBourke

Hi @priscillamc,

Changing the array order does it. I traced how Polylang inserted their og:locale:alternate tags and did the same thing.

Here’s my revised code I’m using in the functions.php file in the child theme:

// Add a second OG image (a square one for WhatsApp)
use Yoast\WP\SEO\Presenters\Abstract_Indexable_Presenter;

class Second_OG_Image_Presenter extends Abstract_Indexable_Presenter {
    public function present() {
        $images = $this->get();
        if ( empty( $images ) ) {
            return '';
        }

        $return = '';
        $return .= '<meta property="og:image" content="' . esc_url( $images['url'] ) . '" />';
        $return .= \PHP_EOL . "\t" . '<meta property="og:image:width" content="' . $images['width'] . '"/>';
        $return .= \PHP_EOL . "\t" . '<meta property="og:image:height" content="' . $images['height'] . '"/>';

        return $return;
    }
    
    public function get() {
        $images = ['width' => 400,
                   'height' => 400,
                   'url' => esc_url('https://www.mysite.com/wp-content/uploads/2019/08/Open-Graph-Sq.png')
                  ];

        return $images;
    }
}

function add_second_og_image( $presenters ) {
    $_presenters = array();

    foreach ( $presenters as $presenter ) {
        $_presenters[] = $presenter;
        if ( $presenter instanceof Yoast\WP\SEO\Presenters\Open_Graph\Image_Presenter ) {
            $_presenters[] = new Second_OG_Image_Presenter();
        }
    }
    return $_presenters;
}

add_filter( 'wpseo_frontend_presenters', 'add_second_og_image' );

As for a second set of Open Graph image tags conflicting with the first, that’s not a problem.

The Open Graph protocol supports multiple image tags. That’s how a page can provide one image with a 1.91 aspect ratio for Facebook, LinkedIn, and some messaging apps, and another image with a square aspect ratio for WhatsApp (technically, the second image is not just for WhatsApp, but as far as I know, WhatsApp is the only application that will look for other OG images beyond the first one). If there’s only one OG image, then WhatsApp will crop that image (which is what they do to Yoast’s OG image – they crop off the one guy with the logo on his shirt, so no branding happening).

WhatsApp using the last OG image makes it so web designers don’t have to make one OG image work in all sizes and aspect ratios, which is nice.

Thanks for your help.

Hi Tom – I compared how your page is loading MG_2628_blended-2.jpg (the image you’re listing for og:image, which is also included in your page) with what happens in a request for just the image, and one difference is when the page requests the image, it includes in the Request Headers referer: https://tommccaul.com/. When I request just the image, there is no referrer (of course) and I get the 403 Error Forbidden message (same as Joy). If I edit the Request Headers for just the image to include referer: https://tommccaul.com/ and resend it, your server sends me the image.

I’m not sure what’s causing your site to reject requests that don’t have a referer. I checked one of the WordPress sites I support (which is https & 5.2.3) and it has no problem with a request for an image without a referer.

There is a post on wordpress.stackexchange.com for a similar problem from 4 years ago (403 Forbidden when accessing image in wordpress), but the post doesn’t list a solution (although I followed the links the original poster had and his site does now work).

One thing you could try is to temporarily disable all of your plugins to see if the problem goes away. At least that might point to what’s causing your site to reject requests without a referer.

Rich

PS. You might want to look into an image lazy load plugin – your home page is 70 megabytes and to get the 403 error, I need to have my cache disabled, so it takes a while to reload your page.

Thanks to Gul Jamal Zim at Stackoverflow, I have a solution:

add_action( 'wpseo_add_opengraph_images', 'add_images' );

function add_images( $object ) {  
  $default_image_url = WPSEO_Options::get('og_default_image', '');  

  if( $default_image_url !== '' ) {
    $default_image = array( 'url' => $default_image_url, 'height' => 100, 'width' => 200 );
    $object->add_image( $default_image );
  }

  $secondary_image = array( 'url' => 'https://exampledomain.com/images/secondary-image.jpg', 'height' => 100, 'width' => 200 );
  $object->add_image( $secondary_image );
}

Hi Tor-Bjorn and Yui,

Thanks for the responses and Tor-Bjorn, thanks for running a test page (that worked).

Cyrillic addresses working on a different system led me to think the problem isn’t related to WordPress. The Cyrillic address was being redirected to a Chinese address (which wasn’t valid), but the redirect wasn’t coming from WordPress or .htaccess. Turns out the redirect was being done by the hosting company. Apparently there’s a small box on the registration page for the hosting site where we could have selected URLs in character sets other than English and Korean.

I’ll just adjust the page slugs and I’ll be all set.

Thanks again for the help.

Thanks for your help (and all of your time writing up responses). I’ll trust that the changes in the child theme will work and move forward with the projects.

I’m just hoping you can work it out (I’ve seen your answers to other questions regarding Twenty Seventeen – you seem to be the go-to-guy for this theme).

My second question (which is more for educational purposes rather than a technical problem) was because I couldn’t get my head around first setting the header image to position: fixed; left 50%, then translating -50% (which puts it back to where it was, I think), and then changing for the individual pages (have a separate set of styles for the individual page header image makes sense, but the different translateX and Y values didn’t make sense to me).

If you’re not aware of the original logic behind the left and transform values for my second question, it’s not worth putting in the time. My main concern is if I override the translateY value from 0 to 50% (which should only be applicable to Microsoft browsers), am I at risk of screwing up the display on a unusual configuration (e.g. a Microsoft Surface).

Thanks,
Rich

Hi Andrew,

The difference is Twenty Seventeen sets the transformY at 0. I’m setting it to 50%.
The header image is styled in the parent them at lines 1683 ~ 1700 as:
transform: translateX(-50%) translateY(-50%);

The parent theme at lines 1728 ~ 1736 overwrite the transform settings for the header image to:

.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
bottom: 0;
transform: translateX(-50%) translateY(0);
}

Then, for Chrome, etc., the style is set to object-fit: cover and transform: none

What I’m doing is replacing the transform from the parent:
transform: translateX(-50%) translateY(0);
with:
transform: translateX(-50%) translateY(50%);

I’m setting the translateY to 50% instead of 0, which puts the image in the center, same as the object-fit does, without having to integrate anselmh’s polyfill.

Hi Stilman, thanks for responding.

I did find a solution – I need to add a priority to the add_action call.

The original add_theme_support call is in the function twentyseventeen_setup() in the parent function.php file, That function is called by the command:
add_action( 'after_setup_theme', 'twentyseventeen_setup' );

In my child theme, I had my own add_theme_support in a function that was called by the command:
add_action( 'after_setup_theme', 'set_theme_custom_logo_size' );

Since neither the parent call nor my call specified a priority, both calls were at the default priority of 10. Adding a priority of 11 to the child theme causes the parent function to fire first and then the child theme’s function (with the lower priority) will fire second.

I found the answer at a question regarding remove or update add_image_size on StackExchange.

The code below changes the size settings that show up in the Site Identity Customizing page:

// Add theme support for Custom Logo.
function set_theme_custom_logo_size() {
	add_theme_support( 'custom-logo', array(
		'height'      => 250,
		'width'       => 946,
		'flex-width' => true,
	) );
}
add_action( 'after_setup_theme', 'set_theme_custom_logo_size', 11 );