WordPress.org

Making WordPress.org

Opened 4 years ago

Closed 4 years ago

#1261 closed enhancement (wontfix)

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

Reported by: Kau-Boy Owned by:
Milestone: Priority: normal
Component: WordCamp Site & Plugins Keywords:
Cc:

Description

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

Change History (9)

#1 @kraftbj
4 years ago

  • Cc kraft@… added

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.
  1. 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.

#2 @iandunn
4 years ago

  • Type changed from defect to enhancement

[ 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.

#3 follow-up: @Otto42
4 years ago

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?

#4 in reply to: ↑ 3 @kraftbj
4 years ago

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.

#5 @Otto42
4 years ago

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.

#6 @Otto42
4 years ago

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 .

#7 @Kau-Boy
4 years ago

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

#8 @Kau-Boy
4 years ago

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?

#9 @iandunn
4 years ago

  • Resolution set to wontfix
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.