Investigate and implement the logic for determining the card type for the TwitterImage component

[johannadevos]

Explanation

Twitter previews are displayed in one of two card types:

• Summary

• Summary with large image

Please note that the Twitter documentation page for the summary card erroneously displays the summary_large_image card as example. The two screenshots above were taken from #50 (the pink rectangles surrounding the images can be ignored).

When the user uploads an image, it needs to be decided in which card type this image gets displayed. Currently, we select the summary_large_image card type for images with the following dimensions: height > 150 and width > 280. Otherwise, the summary card type gets selected. This logic was taken from the previous implementation in yoast-social-previews/js/twitterPreview.js, but it is unclear whether this is the logic that is actually used by Twitter to determine the card type. One strange side effect also is that large square images are rendered in the summary_large_image card, and therefore displayed in landscape rather than square mode.

What needs to happen in this issue is to find out what logic Twitter (or is it the user?) uses to determine the card type, and implement that logic in the determineImageMode function in determineImageProperties.js.

For more context on this issue, see the discussion in the UX Slack channel from 26-03-2019 and 02-04-2019, and the Twitter Card documentation.

Technical decisions

• Currently, there is not yet a card_type variable present in the code. When an image should appear in a summary card, this is indicated by giving the image the property mode = square; when an image should appear in a summary_large_image card, this is indicated by giving the image the property mode = landscape. A card_type variable will probably be implemented in issue Create a TwitterPreview component #48.
• There is another issue (Let TwitterImage type depend on image size #150) which also deals with determining the card type, but that issue seems deprecated. This is because the discussion in the UX channel has shown that we are no longer sure that images with minimum dimensions of 300x157 should be rendered in a summary_large_image card, and that the summary card should be used otherwise. In any case, this logic has already been implemented, albeit with different numbers (280x150).

[maartenleenders]

https://yoast.slack.com/archives/CSYSU835E/p1580732675006900

As noted in the linked conversation, the technical decisions above are no longer accurate (I can see there were some doubts back then too).

What happens is that Twitter just listens to the meta tag that is said in the header. It will inflate and/or crop images to make them fit the specified card.

So as this issue is concerned with implementing the logic for determining card type: the solution is to listen to the general setting (because what we output in the headers hinges on that setting). Will be indeed implemented in #48