Make it possible to define an image for sharing of the front page of a WordCamp site

[Kau-Boy]

On the front page of the [WordCamp Berlin 2015](​https://berlin.wordcamp.org/2015/) we have a similar issue as described in #1019. Our static front page has no featured image. When the page is shared on social media, the last sponsor logo from the page is used.

All sponsor logos are too small (less than 200px height). So it seems that Jetpack is picking the last image, if no large enough image was found. I tried the following to solve the issue:

1. Adding a widget (which is before the content) with a hidden logo
2. Adding a hidden logo at the end of the front page's content
3. Adding a featured image and setting the height to 0, so it is not visible but spacings still apply
4. Define the Site-Icon through the Customizer in the hope, that the Site-Icon is used, if no large enough image was found

The solutions 1 - 3 worked, but they are all not optimal. They add an image to the page, which is not shown to the visitor, but has to be downloaded. It's only used so that Jetpack will pick a correct image.

As the image used on the shared post is a sponsor logo (and one of the lower level sponsors), that is really an issue.

I would really like to see this solved in a better way that by the Jetpack function. In my opinion, there are some possible solutions:

1. Add a theme option or setting to be able to set a default fallback, if no image is found
2. Add a meta box to every page/post which enables an author to set an image for sharing onle (just like the featured image or as a simple URI)
3. Always use the Site-Icon (if large enough), when no good image could be found

[kraftbj]

A couple of things here.

1. Jetpack isn't supposed to accept an image that isn't 200x200. There are checks in place for that ( ​https://github.com/Automattic/jetpack/blob/master/functions.opengraph.php#L238 ), so there may be something else in play, but beside the actual issue. Even if the logos were 200x200 or larger, WordCamps may not want them to be used.

2. The route, IMO, to get a solution is an UI pathway toward more author control. At a minimum, an option to override default Jetpack handling to use the site icon, if none present.

[iandunn]

[ This was initially discussed at ​https://wordpress.slack.com/archives/meta/p1443471330000535 ]

I ​posted this to make/Community to see if the team want to approve it.

[Otto42]

Question: is the featured image, if specified, also used as the og:image?

Question 2: if so, why not just add a featured image and display:none the resulting image on the page itself?

[kraftbj]

Replying to Otto42:

Question: is the featured image, if specified, also used as the og:image?

Yes, the featured image is the first choice when set.

[Otto42]

Okay, so, the way they worked around this is method 3 above, which is essentially to include this in the custom CSS module:

.home .post-thumbnail img { height: 0; }

Which is more or less functionally equivalent to my suggestion.

So, this works fine. Why does this need extra UI, exactly? It's kind of a one-off, as I see it. Not every site needs it, and the few sites that do have easily enabled workarounds. Adding additional UI options for it adds long-term complications which don't really have any benefits.

[Otto42]

Additionally, using a 200x200 image is not ideal for Facebook, as I have discovered. Sometimes it ignores small images in favor of larger ones. If you want sharing to work and use the image you specify all the time, make it a 1200x630 image. See #975 and ​https://developers.facebook.com/docs/sharing/best-practices#images .

[Kau-Boy]

But than the workaround using an invisible image would be even worse, as the 1200x630 would be a lot larger and it's still useless to the visitor.

Having an optoin would also prevent any similar issues on other pages, as mentioned in the community post: ​https://make.wordpress.org/community/2015/09/28/approval-for-1261-meta-sharing-images/comment-page-1/#comment-21267

[Kau-Boy]

Hm, that's quite interesting. I justed check with another page (​https://berlin.wordcamp.org/2015/neue-tickets/), which has no image at all. In this case, Jetpack picked the Site-Icon, but the 32x32 size.

If you check with the Open Graph Object Debugger (​https://developers.facebook.com/tools/debug/og/object?q=https%3A%2F%2Fberlin.wordcamp.org%2F2015%2Fneue-tickets%2F), this image is not taken, but the default large WordPress banner. How is this solved?

[iandunn]

This didn't get any traction on the Community p2, so I'm closing it out. It can be re-opened if the team approves it.