From f49932e6ee0d245d7d81a583869fde0dc4b95a62 Mon Sep 17 00:00:00 2001
From: Ya-Chen Hsieh <1697814+ychsieh@users.noreply.github.com>
Date: Wed, 14 Feb 2024 01:22:09 +0800
Subject: [PATCH] Fix issue where amp-img are not rendered inside amp-list in
story page attachment (#39806)
---
examples/amp-story/attachment.html | 23 +++++++++++++++++++++++
extensions/amp-list/0.1/amp-list.js | 10 ++++++++++
2 files changed, 33 insertions(+)
diff --git a/examples/amp-story/attachment.html b/examples/amp-story/attachment.html
index 2ebef4ad8375..a39804139482 100644
--- a/examples/amp-story/attachment.html
+++ b/examples/amp-story/attachment.html
@@ -6,6 +6,8 @@
+
+
Attachments
@@ -232,6 +234,27 @@
+
+
+
+
+
+
+ amp-story-page-attachment: amp-list of amp-img.
+
+
+
+
+
+
+
+
+
+
+
diff --git a/extensions/amp-list/0.1/amp-list.js b/extensions/amp-list/0.1/amp-list.js
index fd573986efcf..04e885452533 100644
--- a/extensions/amp-list/0.1/amp-list.js
+++ b/extensions/amp-list/0.1/amp-list.js
@@ -1147,6 +1147,16 @@ export class AmpList extends AMP.BaseElement {
this.addElementsToContainer_(elements, container);
}
+ // For amp-list embedded in the amp-story-page-attachment, because the attachment is initially in
+ // nodisplay mode, the layoutCallback of all amp-img elements are not called at all, even after
+ // the attachment is opened and amp-list fetches results and inserted built amp-img(from templates)
+ // into DOM. Force call layoutCallback to render images.
+ if (this.element.closest('amp-story-page-attachment')) {
+ this.container_.querySelectorAll('amp-img').forEach((element) => {
+ element.getImpl().then((impl) => impl.layoutCallback());
+ });
+ }
+
const event = createCustomEvent(
this.win,
AmpEvents_Enum.DOM_UPDATE,