From dbcc2f4d64f45a3a5fd6e9b927e53899fb6f5a17 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Tim=20D=C3=BCsterhus?= <duesterhus@woltlab.com>
Date: Thu, 25 Jun 2020 11:47:19 +0200
Subject: [PATCH] Output external images with unknown dimensions in AMP pages
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

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       | 12 ++++++++
 .../output/AmpHtmlOutputProcessor.class.php   | 28 +++++++++++--------
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/com.woltlab.wcf/templates/ampHeader.tpl b/com.woltlab.wcf/templates/ampHeader.tpl
index 31b3c23fc3..78ca050c65 100644
--- a/com.woltlab.wcf/templates/ampHeader.tpl
+++ b/com.woltlab.wcf/templates/ampHeader.tpl
@@ -261,6 +261,18 @@
 				overflow: auto;
 				padding: 10px;
 			}
+			
+			.unknownDimensionContainer {
+				position: relative;
+				width: 384px;
+				height: 216px;
+				max-width: 100%;
+				display: inline-block;
+			}
+			
+			.unknownDimensionContainer amp-img img {
+				object-fit: contain;
+			}
 		</style>
 		{literal}<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>{/literal}
 		<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
diff --git a/wcfsetup/install/files/lib/system/html/output/AmpHtmlOutputProcessor.class.php b/wcfsetup/install/files/lib/system/html/output/AmpHtmlOutputProcessor.class.php
index 0e5b2cb27b..b343b1fe7b 100644
--- a/wcfsetup/install/files/lib/system/html/output/AmpHtmlOutputProcessor.class.php
+++ b/wcfsetup/install/files/lib/system/html/output/AmpHtmlOutputProcessor.class.php
@@ -65,18 +65,6 @@ class AmpHtmlOutputProcessor extends HtmlOutputProcessor {
 			while ($elements->length) {
 				/** @var \DOMElement $element */
 				$element = $elements->item(0);
-				if ($tag === 'img') {
-					$styles = $element->getAttribute('style');
-					if (preg_match('~\bheight:\s*(\d+)px\b~', $styles, $matches)) $element->setAttribute('height', $matches[1]);
-					if (preg_match('~\bwidth:\s*(\d+)px\b~', $styles, $matches)) $element->setAttribute('width', $matches[1]);
-					
-					if (!$element->getAttribute('height') || !$element->getAttribute('width')) {
-						DOMUtil::removeNode($element);
-						continue;
-					}
-					
-					$element->removeAttribute('style');
-				}
 				
 				$newElement = $element->ownerDocument->createElement('amp-' . $tag);
 				
@@ -87,6 +75,22 @@ class AmpHtmlOutputProcessor extends HtmlOutputProcessor {
 					$newElement->setAttribute($attr->localName, $attr->nodeValue);
 				}
 				
+				if ($tag === 'img') {
+					$styles = $newElement->getAttribute('style');
+					$newElement->removeAttribute('style');
+					if (preg_match('~\bheight:\s*(\d+)px\b~', $styles, $matches)) $newElement->setAttribute('height', $matches[1]);
+					if (preg_match('~\bwidth:\s*(\d+)px\b~', $styles, $matches)) $newElement->setAttribute('width', $matches[1]);
+					
+					if (!$newElement->getAttribute('height') || !$newElement->getAttribute('width')) {
+						$newElement->setAttribute('layout', 'fill');
+						
+						$container = $newElement->ownerDocument->createElement('span');
+						$container->setAttribute('class', 'unknownDimensionContainer');
+						$container->appendChild($newElement);
+						$newElement = $container;
+					}
+				}
+				
 				$element->parentNode->insertBefore($newElement, $element);
 				DOMUtil::removeNode($element);
 			}
-- 
2.20.1