Closed andizer closed 5 years ago
From an internal conversation: question: should this new component offer the ability to set an image alt
to be used as og:image:alt
? Currently, the only way is by setting an alt
text in the media modal, which is a site-wide change. Not so ideal because the purpose of the image changes depending on the context where it is used.
@afercia Let's create a new issue for that in case we decide to add an extra alt text input field.
I've been investigating some more which image dimensions result in square, landscape or portrait mode in the preview.
At first, it looked like that the cutoff point between square and portrait was somewhere between a (width/height) ratio of 0.8495 and 0.8155 (350x412 became a square, 336 x 412 became portrait mode). However, when I decided to test an image with a ratio between those two, I ended up with a landscape mode 😕. On top of that, for the 336 x 412 dimensions, I also saw occurrences of square modes.
@jono-alderson Can you maybe shed some light on this?
Ah, double checking this one in the Facebook Debugger shows an error; it's missing the og:image
tag.
That might impact what/how it selects/crops?
@jono-alderson Thanks for your help. We've decided to keep the current logic from the social previews repo.
The FacebookImage component will be rendered as an
img
Example of the preview with landscape image.
Properties
The type is relevant for the way we display the image. See the specifications below.
Specifications
An image has a minimum width of 500px to be a landscape image. When the ratio is 1:1 it will be a square image. When portrait the max-height will be 236 pixels. If the width is lower than 158 px a square image is rendered.
Styling
The image will be placed in a container:
In square mode:
In portrait mode:
Styling of the image
The image itself will have the following CSS attributes:
In square mode:
Parent #814 814