Create a TwitterImage component

[andizer]

The TwitterImage component will be rendered as an img

Example of the summary with large image card.

Example of the summary card.

Properties

• src (full path to the image)
• type ( summary, summary-large-image)

The type is relevant for the way we display the image. See the specifications below.

When no SRC has been given, we should show a placeholder:

Specifications

General specs for the image

• Images must be less than 5MB in size.
• JPG, PNG, WEBP and GIF formats are supported.
• Only the first frame of an animated GIF will be used.
• SVG is not supported.

About the summary with large image, Twitter says:

Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels.

And for the summary Twitter gives:

Images for this Card support an aspect ratio of 1:1 with minimum dimensions of 144x144 or maximum of 4096x4096 pixels. [...] The image will be cropped to a square on all platforms.

Styling

    background-color: #E1E8ED;

The square will have a width and height of 123.422px. The large image will have a width of 506px and a height of 253px.

Parent #48

[IreneStr]

@luckickken

1. This is our current Twitter image placeholder:

Could your team provide us with an image that is the same as/closer to Twitter's own placeholder, or should we keep using the current one?

2. The current Twitter preview does not show errors when there is something wrong with the image, but just unsets the image and shows the default: https://github.com/Yoast/yoast-social-previews/blob/b66215b9f70119de5cc4b6acac4aa7fb5fc33662/js/twitterPreview.js#L444

The Facebook preview does have some error handling:
https://github.com/Yoast/yoast-components/blob/566ae09fc706e90700dcf6605980f3d0e85eaa89/composites/Plugin/SocialPreviews/Facebook/components/FacebookImage.js#L144

https://github.com/Yoast/yoast-components/blob/566ae09fc706e90700dcf6605980f3d0e85eaa89/composites/Plugin/SocialPreviews/Facebook/components/FacebookImage.js#L148

Do we want to add this feedback to the Twitter preview as well? And maybe also some specific feedback about not supported image extensions like SVG etc?

[hedgefield]

In the design for this I'm experimenting with making the image placeholder area a drop zone, since that is kind of how the facebook one works as well. Does that work for Twitter? I know facebook doesn't show any image if it can't find a suitable one. Does Twitter still show that placeholder after you post a link with no image, or is that just to there to indicate how the template works?

[IreneStr]

@hedgefield Twitter does use the placeholder:

[hedgefield]

Also for the large card?

Well, regardless, I think the placeholder icon is not as important as making it clear that the user should supply an image there, so I recommend following the drop zone design in https://github.com/Yoast/roadmap/issues/21

As for the error, I agree both Facebook and Twitter should display one when there is a problem with the image.

As for an error about unsupported filetypes, is it even possible to upload an unsupported filetype to the media library?

[IreneStr]

Please note that the above error message is not part of this issue. We'll deal with that in a later stage.

[hwinne]

What's the use of background-color: #E1E8ED when this background is only displayed behind the image, and therefore never visible?

[hwinne]

@johannadevos and I have pushed our work so far. What still needs to be done is:

• When no src is provided for an image, show the Select image field.
• Checking whether an image meets the conditions (e.g., is not larger than 5MB).
• Throwing an error when an image doesn't meet the requirements (e.g., it is too big/small). But that's out of the scope of this issue (@IreneStr).
• Writing unit tests.

[johannadevos]

As just discussed with @IreneStr, all the checks and the display of their corresponding error messages should be implemented in another issue (she already briefly mentioned this above).

This means that the following part of the issue description is no longer part of the current issue:

Specifications

General specs for the image

• Images must be less than 5MB in size.
• JPG, PNG, WEBP and GIF formats are supported.
• Only the first frame of an animated GIF will be used.
• SVG is not supported.

About the summary with large image, Twitter says:

Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels.

And for the summary Twitter gives:

Images for this Card support an aspect ratio of 1:1 with minimum dimensions of 144x144 or maximum of 4096x4096 pixels.

[johannadevos]

@andizer You say that "The large image will have a width of 506px and a height of 254px". However, this is not exactly a 2:1 ratio, which should either be 508/254 or 506/253. Where did you get these sizes from, and which size should we use in the end?

EDIT: I will use 506 x 253, because I've found online that this is the size which Twitter uses.

[johannadevos]

In the design for this I'm experimenting with making the image placeholder area a drop zone, since that is kind of how the facebook one works as well. Does that work for Twitter? I know facebook doesn't show any image if it can't find a suitable one. Does Twitter still show that placeholder after you post a link with no image, or is that just to there to indicate how the template works?

To create this placeholder, for blue and grey I'm using values provided by @hedgefield (#f1f1f1 and #073CBA). They aren't in the standard color palette, but provide more contrast for accessibility.

[afercia]

Closed in #131