Picture Layout

[adgad]

Picture Layout

Currently, an image inside an article can be one of three widths:

• article width: this is the default behaviour, the image will be the width of a paragraph
• full-grid width: this happens if a "desktop" image is provided.
• thin/inline width: this happens if ((width < 350 || (width < height && width < 580)) 🤷 I think this was a decision made wayyyy at the beginning of Next, when the team basically had to work with what they got from Methode/CAPI.

Also:

• full-bleed/full-viewport: normal articles can't have this, but implicitly scrollytelling images do this.

Presently, these decisions are somewhat arbitrary magic and hidden away in bits of UI code - but I think they are actually editorial decisions. As in, an editor doesn't usually put in an image <350px, they would crop it to that size to make it thin/inline.

It also means there are some things that they can't currently do:

• sometimes they might have a source image <350px but actually they want it centered in the article, which isn't currently possible.
• they can't currently have a high res, or responsive image that is thin/inline.
• they can't have a responsive desktop image without it being full-grid.

Therefore, I think the width an image/imageset takes up in an article should be a separate datapoint, supplied by Spark, that doesn't depend on other aspects of the image.

(side note: there is maybe some crossover with other components that can have different widths, at the moment some layout components can be defined as full/half width. maybe there's no reason a pull quote can't be defined as such. originally in methode world, the "" primitives were designed as empty elements that could be used to handle things like layoutWidth/placing elements next to each other. not sure if it translates as well in Spark).