Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

possible to re-use a serializer inside a custom serializer? #3

Open
zackseuberling opened this issue Feb 11, 2021 · 1 comment
Open

Comments

@zackseuberling
Copy link

I have configured a "gallery" block with an array of image fields:

export default {
  title: "Gallery",
  name: "gallery",
  type: "object",
  fields: [
    {
      title: "Images",
      name: "galleryImages",
      type: "array",
      of: [
        {
          type: "image",
        },
      ],
    },
  ],
};

I'd like to easily be able to wrap my gallery blocks in some custom HTML, but rather than re-write the image serializer, re-use the default serializer when the block encountered is an image. is there an easy way to do this?

@zackseuberling
Copy link
Author

I have come up with a solution, but it's not ideal:

FWIW, I am using Eleventy to render my data, which can handle a number of different templating languages.

injecting HTML into my markdown meant the markdown template rendered my code as a string, so I switched to @sanity-io/block-content-to-html. converting my blocks to HTML means I need to tell my template that my string is safe.

here's the solution I came up with

const BlocksToHtml = require("@sanity/block-content-to-html");
const h = BlocksToHtml.h;

const image = (block) => BlocksToHtml({ blocks: block, ...client.config() });

const serializers = {
  types: {
    gallery: ({ node }) => {
      return h("div", {
        className: "gallery flex w-screen",
        innerHTML: node.galleryImages.map((i) => image(i)).join(""),
      });
    },
  },
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant