Output external images with unknown dimensions in AMP pages
authorTim Düsterhus <duesterhus@woltlab.com>
Thu, 25 Jun 2020 09:47:19 +0000 (11:47 +0200)
committerTim Düsterhus <duesterhus@woltlab.com>
Thu, 25 Jun 2020 09:53:54 +0000 (11:53 +0200)
commitdbcc2f4d64f45a3a5fd6e9b927e53899fb6f5a17
tree467d860e1e80261edd2958d0f593786c5599add5
parentb6ea711aed85bba8a1169e98a2693c172d2354ab
Output external images with unknown dimensions in AMP pages

The `layout="fill"` attribute allows to embed an `<amp-img>` with unknown
dimensions. This comes with the drawback that the image will stretch as
far as possible, not maintaining the aspect-ratio and taking up the whole
page.

To solve this a container with known dimensions needs to be put around it
and the `<img>` within needs to have the `object-fit: contain` property.
This property will contain the image within the container while maintaining
aspect ratio at the drawback that the empty space of the container will be
filled with void.

This container was selected to be a 16:9 aspect ratio, with a size of
384×216 Pixels (one fifth of Full HD in each dimension), hopefully
minimizing the void on common image formats.

The resulting AMP was checked against the AMP validator and passed.

Fixes #3264
com.woltlab.wcf/templates/ampHeader.tpl
wcfsetup/install/files/lib/system/html/output/AmpHtmlOutputProcessor.class.php