Create a FacebookImage component

andizer commented 5 years ago

The FacebookImage component will be rendered as an img

Example of the preview with landscape image.

Properties

src (full path to the image)
type (square, portrait or landscape)

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:

  line-height: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  display: block;
height: '{the height of the given image}px'
  width: 500px;

In square mode:

    background-color: #fff;
    height: 158px;
    width: 158px;

In portrait mode:

    height: 236px;
    width: 158px;

Styling of the image

The image itself will have the following CSS attributes:

     height: 100%;
    min-height: initial;
    width: 100%;
    position: relative;

In square mode:

    height: auto;

Parent #814 814

afercia commented 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.

IreneStr commented 5 years ago

@afercia Let's create a new issue for that in case we decide to add an extra alt text input field.

IreneStr commented 5 years ago

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.

Landscape (720x824, ratio: 0.87378): https://hyperallergic.com/400390/jason-karolak-prospects-mckenzie-fine-art-2017/?fbclid=IwAR1l2s_J-b0D4ghyIH1mZmYZHwFfUREJJGeyC4IvRRsd-HYsCZ0fRTBmlxM
Square (350x412, ratio: 0.8495): https://www.askideas.com/47-fairy-with-flowers-tattoos-ideas/cool-fairy-with-flower-tattoo-design-for-leg/
Square (336x412, ratio 0.8155): http://ecuriedeole.fr/cheval-tribal-tattoo/
Portrait (336x412, ratio 0.8155): https://lezwatchtv.com/character/elaine/

@jono-alderson Can you maybe shed some light on this?

jonoalderson commented 5 years ago

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?

IreneStr commented 5 years ago

@jono-alderson Thanks for your help. We've decided to keep the current logic from the social previews repo.

Yoast / yoast-components