You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Oct 4, 2022. It is now read-only.
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).
The text was updated successfully, but these errors were encountered:
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
Explanation
Twitter previews are displayed in one of two card types:
Please note that the Twitter documentation page for the
summary
card erroneously displays thesummary_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
andwidth > 280
. Otherwise, thesummary
card type gets selected. This logic was taken from the previous implementation inyoast-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 thesummary_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 indetermineImageProperties.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
card_type
variable present in the code. When an image should appear in asummary
card, this is indicated by giving the image the propertymode = square
; when an image should appear in asummary_large_image
card, this is indicated by giving the image the propertymode = landscape
. Acard_type
variable will probably be implemented in issue Create a TwitterPreview component #48.summary_large_image
card, and that thesummary
card should be used otherwise. In any case, this logic has already been implemented, albeit with different numbers (280x150).The text was updated successfully, but these errors were encountered: