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

Extend image in block content #91

Closed
fschroiff opened this issue Mar 12, 2023 · 6 comments · May be fixed by #94
Closed

Extend image in block content #91

fschroiff opened this issue Mar 12, 2023 · 6 comments · May be fixed by #94

Comments

@fschroiff
Copy link

I can't quite grasp what you have to do to get metadata (palette for example) in an image field in block content.

In my query I have a mainImage where I can get the palette and do stuff with it. In the body there's also an image. What do I need to do to hav that return the palette as well?

	mainImage: q
		.sanityImage('mainImage', {
			additionalFields: {
				alt: q.string(),
			},
			withAsset: ['base', 'dimensions', 'palette'],
		})
		.nullable(),
	body: q
		.array(
			q
				.object({
					_type: q.string(),
					_key: q.string().optional(),
					style: q.string().optional(),
				})
				.passthrough(),
		)
		.nullable(),

To test I tried (knowing that asset isn't a string):

	body: q
		.contentBlocks({
			markDefs: q.object({
				_type: q.literal('image'),
				asset: q.string(),
			}),
		})
		.nullable(),

But just got Invalid literal value, expected "block". I can't quite wrap my head around what I would need to do.

@b3nk3
Copy link
Contributor

b3nk3 commented Mar 20, 2023

I am having similar issues. Based on the error message, it does not even make it to that asset property. Fails on the q.literal('image')

Just looking at the sample test data, it would seem that markDefs expected to be inside a block still...

Based on my research: declaring custom types, such as this image example is not yet supported by groqd

If I have time I may implement something.

@fritz-c
Copy link
Contributor

fritz-c commented Apr 10, 2023

Here's a demonstration of how you might write it with the existing API:

https://codesandbox.io/p/sandbox/content-blocks-with-images-i7758q?file=%2Fsrc%2FApp.tsx&selection=%5B%7B%22endColumn%22%3A6%2C%22endLineNumber%22%3A32%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A17%7D%5D

@tutods
Copy link

tutods commented Sep 17, 2023

Any solution @fschroiff?
I'm having some issues using sanityImage inside a content block, the PortableText tells me that _key needs to be string | undefined and not string | null (this for my images options inside content block).

@tutods
Copy link

tutods commented Oct 3, 2023

Here's a demonstration of how you might write it with the existing API:

https://codesandbox.io/p/sandbox/content-blocks-with-images-i7758q?file=%2Fsrc%2FApp.tsx&selection=%5B%7B%22endColumn%22%3A6%2C%22endLineNumber%22%3A32%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A17%7D%5D

Hey @fritz-c
For me this isn't working. Any idea how to use it and solve the problem on Portable Text?

@carbonrobot
Copy link
Contributor

carbonrobot commented Oct 30, 2023

Closing as stale. Please reopen if we need further discussion on the original issues.

@b3nk3
Copy link
Contributor

b3nk3 commented Mar 2, 2024

Not to reopen, but to perhaps provide a solution:

export const imageBlockSelection = {
  _type: q.literal('image'),
  alt: q.string(),
  caption: q.string(),
  asset: q.object({
    _ref: q.string(),
  }),
};
content: q('content')
      .filter()
      .select({
        '_type == "block"': ['{...}', q.contentBlock()],
        '_type == "image"': imageBlockSelection,
        'default': {
          _key: q.string(),
          _type: ['"unsupported"', q.literal('unsupported')],
          unsupportedType: ['_type', q.string()],
        },
      }),

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

Successfully merging a pull request may close this issue.

5 participants