Custom Layouts not working?

[avodynamics]

No matter what I can't get a custom layout to work based on the readme.

I'm pretty new to sanity, and I've gotten the component to show up in the studio but it always uses the default layout.

sanity.config.js

plugins: [
    structureTool(),
    visionTool(),
    generateOGImage({layouts: [TestCustomLayout]}),
  ],

TestCustomLayout.jsx

import React from 'react'

export const TestCustomLayout = ({title}) => {
  return (
    <div>
      <h1
        style={{
          color: 'red',
          fontSize: '2em',
        }}
      >
        {title}
      </h1>
    </div>
  )
}

That alone should allow for using the custom layout in the Generate Image tab, right?

When trying to add it to a schema I get an error of 'Unexpected Token "<"' if I follow the readme. Below works to add it to the schema, but it isn't using the custom layout either.

schemas/post.js

import React from 'react'
import {MediaEditor} from '@catherineriver/sanity-plugin-generate-ogimage'

export default {
  /* rest of the schema */
  fields: [
    {
      name: 'ogImage',
      title: 'OG image',
      type: 'image',
      options: {
        sources: [
          {
            name: 'sharing-image',
            title: 'Generate Image',
            component: MediaEditor,
          },
        ],
      },
    },
  ],
}

[catherineriver]

    {
      name: 'ogImage',
      title: 'Картинка для шаринга в соцсети',
      type: 'image',
      options: {
        sources: [
          {
            name: 'sharing-image',
            title: 'Сгенерировать картинку',
            component: (props) => (
              <MediaEditor {...props} layouts={[OgImageEditorLayout]} />
            ),
          },
        ],
      },
    }

@avodynamics Hello! Sorry for the delayed answer. This is a working snippet with code from my project. Please, try to pass in component props.

[TheSirion]

    {
      name: 'ogImage',
      title: 'Картинка для шаринга в соцсети',
      type: 'image',
      options: {
        sources: [
          {
            name: 'sharing-image',
            title: 'Сгенерировать картинку',
            component: (props) => (
              <MediaEditor {...props} layouts={[OgImageEditorLayout]} />
            ),
          },
        ],
      },
    }

@avodynamics Hello! Sorry for the delayed answer. This is a working snippet with code from my project. Please, try to pass in component props.

Hello! I'm having the exact same problem. I tried copy-pasting your snippet but it didn't work.

By the way, I noticed that in the instructions for building a custom layout the code snippet includes importing a LayoutData to use as prop types, but it doesn't seem the package has it. Am I missing something? generateOGImage() also requires passing a parameter and throws an error when you don't, even though the docs say you can just leave it without one (but just passing an empty array or object seems to fix it).

I don't want to be hater or anything like that. I actually appreciate the plugin, but it's very frustrating to need it for a project and being unable to make it work properly even though I've spent many hours going back and forth through the docs. I don't want to share my blog posts without them having OG images because it pretty much guarantees no one will click it, so this problem is really holding my blog back. I hope you understand.

Edit: I figured out what was going wrong in my case. The schema was defined in a .ts file. Passing a React component as a property in sources.component made it freak out, so simply changing it to .tsx (and making any appropriate changes to the file) should fix it. Nevertheless, the custom component I made still doesn't work, unfortunately.

[agi-omar]

facing the same problem, were you able to get it to work @TheSirion