Custom OG Image Generator

1. Create a file with this content and replace content as required.

import get from "lodash/get";
import { FocusedImage } from "quintype-js";

import { ImageTags } from "@quintype/seo";
import { getPublisherAttributes } from "../load-data";

export const imageTagGenerator = () => {
  return (seoConfig, config, pageType, data, { url = {} }) => {
    const publisherConfig = getPublisherAttributes(config);
    const imageCdnUrl = publisherConfig.cdn_image;
    
    let imageTags = ImageTags(seoConfig, config, pageType, data, { url });

    if (pageType === "story-page") {
      function pickImageFromStory() {
        const story = data.data.story;
        function getAlt(type, key, fallback) {
          return get(story, ["alternative", `${type}`, "default", "hero-image", `${key}`], fallback);
        }

        const altHeroImg = getAlt("home", "hero-image-s3-key", null);
        const altSocialHeroImg = getAlt("social", "hero-image-s3-key", null);
        const storyHeroImage = get(story, ["hero-image-s3-key"], null);
        const fallbackSocialImage = get(seoConfig, ["fallbackSocialImage"], null);

        if (altSocialHeroImg) {
          const metadata = getAlt("social", "hero-image-metadata", {});
          return new FocusedImage(altSocialHeroImg, metadata);
        } else if (altHeroImg) {
          const metadata = getAlt("home", "hero-image-metadata", {});
          return new FocusedImage(altHeroImg, metadata);
        } else if (storyHeroImage) {
          const metadata = get(story, ["hero-image-metadata"], {});
          return new FocusedImage(storyHeroImage, metadata);
        } else if (fallbackSocialImage) {
          return fallbackSocialImage;
        } else {
          return null;
        }
      }

      const getDefaultOgImage = () => {
        // default image will be updated once we receive default social share image from client team
        const defaultEngOgImage = ``;
        const defaultBanglaOgImage = ``;

        return config["sketches-host"].includes("en") ? defaultEngOgImage : defaultBanglaOgImage;
      };

      const imageContentParams = (imageRatio) => {
        const imageContentParamsObj = {
          w: 1200,
          ar: imageRatio.join(":"),
          auto: "format,compress",
          ogImage: true,
          mode: "crop",
        };

        const imageContentParamsObjUpdated =
          pickImageFromStory() && pickImageFromStory().path
            ? { ...imageContentParamsObj }
            : { ...imageContentParamsObj };
        return `https://${imageCdnUrl}/${pickImageFromStory().path(imageRatio, imageContentParamsObjUpdated)}`;
      };

      const storyTwitterImage =
        pickImageFromStory() && pickImageFromStory().path ? imageContentParams([40, 21]) : getDefaultOgImage();
      const storyOgImage =
        pickImageFromStory() && pickImageFromStory().path ? imageContentParams([40, 21]) : getDefaultOgImage();

      imageTags.forEach((imageTag, index) => {
        if (seoConfig.enableTwitterCards && imageTag.name === "twitter:image") {
          imageTag.content = storyTwitterImage;
        }

        if (seoConfig.enableOgTags && imageTag.property === "og:image") {
          imageTag.content = storyOgImage;
        }
      });

      imageTags = imageTags.filter(
        (imageTag) => imageTag.property !== "twitter:image:alt" && imageTag.property !== "og:image:alt"
      );
    }

    return imageTags;
  };
};

2. import this file in server/app.js

3. import tags from SEO library.

import { AuthorTags,
  generateStaticData,
  generateStructuredData,
  SEO,
  StaticTags,
  StoryAmpTags,
  StructuredDataTags,
  TextTags, } from "@quintype/seo";

4. Call the imageTagGenerator in generateSeo function.

function generateSeo(config, pageType) {
  return new SEO({
    staticTags: Object.assign(generateStaticData(config)),
    structuredData: Object.assign(generateStructuredData(config), {
      enableLiveBlog: true,
      enableVideo: true,
      enableNewsArticle: true,
    }),
    enableTwitterCards: true,
    enableOgTags: true,
    enableNews: true,
    generators: [TextTags, imageTagGenerator(), AuthorTags, StaticTags, StructuredDataTags, StoryAmpTags],
  });
}