import get from "lodash/get";
-import { getQueryParams, stripMillisecondsFromTime } from "../utils";
+import { getAllowedCards, getQueryParams, stripMillisecondsFromTime } from "../utils";
import { generateTagsForEntity } from "./entity";
import {
generateAuthorPageSchema,
@@ -601,6 +601,9 @@ src/structured-data/structured-data-tags.js
if (!isStructuredDataEmpty && pageType === "story-page-amp") {
const newsArticleTags = generateNewsArticleTags();
newsArticleTags ? tags.push(storyTags(), newsArticleTags) : tags.push(storyTags());
+ if (story["story-template"] === "visual-story") {
+ tags.push(visualStorySchema());
+ }
}
if (!isStructuredDataEmpty && structuredData.header) {
@@ -649,6 +652,48 @@ src/structured-data/structured-data-tags.js
return {};
}
+ function visualStorySchema() {
+ if (!story || !publisherConfig) return null;
+ const storyCards = get(story, ["cards"], []).filter((card) => getAllowedCards(card));
+ const galleryItems = storyCards.map((card) => {
+ const imageElement = card["story-elements"].find((el) => el.type === "image");
+ if (!imageElement) return; // for now schema is added only for images
+ const titleElement = card["story-elements"].find((el) => el.type === "title");
+ const textElements = card["story-elements"].filter((el) => el.type === "text" && el.subtype !== "cta");
+ const description = textElements.reduce((acc, current) => `${acc}. ${current.text}`, "");
+ return {
+ "@type": "ImageObject",
+ image: imageUrl(publisherConfig, imageElement["image-s3-key"]),
+ name: get(titleElement, ["text"]),
+ contentUrl: story.url,
+ description: description,
+ caption: get(imageElement, ["title"]),
+ };
+ });
+ const heroImgSrc = story["hero-image-s3-key"];
+ if (heroImgSrc) {
+ galleryItems.unshift({
+ "@type": "ImageObject",
+ image: imageUrl(publisherConfig, heroImgSrc),
+ name: get(story, ["headline"]),
+ contentUrl: story.url,
+ description: get(story, ["subheadline"]),
+ caption: get(story, ["hero-image-caption"]),
+ });
+ }
+
+ const metaDescription = get(story, ["seo", "meta-description"], "");
+ const subHeadline = get(story, ["subheadline"], "");
+ const headline = get(story, ["headline"], "");
+ const schema = Object.assign({}, getSchemaMainEntityOfPage(story.url), {
+ name: story.headline || "Media Gallery",
+ description: metaDescription || subHeadline || headline,
+ // author: authorData(story.authors, [], publisherConfig),
+ hasPart: { "@type": "ImageGallery", associatedMedia: galleryItems },
+ });
+ return ldJson("MediaGallery", schema);
+ }
+
// All Pages have: Publisher, Site
// Story Page have : Article/NewsArticle/LiveBlog/Review as appropriate
return tags;