OG thumbnail image meta data bug on A List Apart

[zeldman]

A List Apart seems to have stopped feeding the correct image OG meta data to Twitter, with the result that tweets no longer show artwork. Compare the following two screenshots: the Facebook post picks up the first piece of art used in the content, and shows it as a thumbnail. But the tweet shows no image at all—or, rather, it shows a "missing content" image placeholder. This is like showing a "missing GIF" image as a thumbnail.

What should happen:

• If the meta data is formatted correctly, Twitter grabs the custom illustration from an article and uses it as the thumbnail image—when the article starts with a custom illustration. (Imageus Cornellus.)
• If the article does not start off with a custom illustration, but the meta data is formatted correctly, and the article contains body illustrations (charts, tables, screenshots, etc.) Twitter should grab a body illustration from the article body. (This is what Facebook is doing.)
• If the article contains neither a custom illustration nor any body illustrations, and the meta data is formatted correctly, Twitter should show the ALA laurel wreath artwork—our branded default placeholder image.

[brettdewoody]

Twitter now provides two options for preview cards:

1. Summary Card

2. Summary Card with Large Image

Would it be beneficial to conditionally use the Summary Card with Large Image if the article contains an article_responsive_illo (custom illustration) or body illustration, and the Summary card to display the ALA laurel wreath otherwise?

[zeldman]

@brettdewoody

Yes, it absolutely would be!

cc @michellekondou

[brettdewoody]

Great.

I'd be happy to submit a PR. Or are PRs from the public not being accepted yet? I was confused by the contribution guidelines.

[zeldman]

PRs from the public are being accepted. Sorry the guidelines are unclear. We will work on that!

cc @michellekondou

[brettdewoody]

@zeldman @michellekondou

Unfortunately it doesn't look like there's a way to pull the first image from the article body using the built-in ExpressionEngine tags. This leaves us with:

1. When the article starts with a custom illustration, use the custom illustration with the Summary Card with Large Image.

2. Otherwise, use the ALA laurel wreath with the Summary Card

However, it does appear there are some EE plugins which might be able to pull the first image from the article content.

• CE String
• Find & Replace

I did a search through the templates to see if either of the plugins was installed but didn't find them in use. If one of these plugins can be installed we can add the 3rd option to use the first image from the body with the Summary Card with Large Image.