Skip to content
🎤 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now
Get help on Slack

How to model an image with alignment in Sanity CMS

8 replies
Last updated: Jun 16, 2022
Hi guys, I’m just starting off using Sanity (after years of WordPress work), and the first project I’m trying to set up is rebuilding an existing site and migrating the content. The first page I set out to do has an image that is floated in the written content (see screenshot) and I can’t for the life of me work out how to model this in Sanity.
Am I missing something, or is this breaking the idea of separation of concerns (content / design) etc. Is there a solution so I can keep the content working as is, or should I rethink it? Ideally I’m looking to migrate some clients for WP to Sanity so it is something they are likely to reach for
Jun 16, 2022, 2:11 AM
I am interested in this myself, because the idea of content being structured is very bright and practical, in a property-value sort of way. Things having attributes, all that jazz. And I totally get the idea behind a raw/pure compartmentalization of the kind of content portable text is, versus pulling it back and forth into different already-compiled formats.
But this software, as a CMS-like place to go for people to edit content...any regular person will want to treat the editor like the ones they've seen every other place, and will be weirded out when they can't. Especially, certainly if they're attempting to bring over existing content.

The way I have it right now, is I can put an image in the text, but the image has its own separate field for an alignment value, in the form of a radio (left, center, right).

It doesn't preview like that in the editor (although I am sure someone has figured that out) but it works great on my front end and I can even re-use the value from the data to automatically generate the class name rather than applying a style directly.


{
            title: 'Additional Information',
            name: 'additionalInformation',
         
            type: 'array',
            of: [
                {
                    type: 'block',
                    
                },
                {
                    type: 'object',
                    title: 'Image',
                    name: 'blockImage',
                    fields: [
                        {
                            type: 'image',
                            name: 'inlineImage',
                        },
                        {
                            type: 'string',
                            layout: 'list',
                            name: 'alignment',
                            options: {
                                list: [
                                    { title: 'Left', value: 'left' },
                                    { title: 'Center', value: 'center' },
                                    { title: 'Right', value: 'right' }
                                ],
                                layout: 'radio',
                                direction: 'horizontal'
                            }
                        }
                    ]
                }
            ],
        },

Jun 16, 2022, 2:34 AM
user H
Ah right, so you just sit it in between text content where you want it. This is probably fine… ideally (long term), it would be great to have it behave appropriately in the preview, but I guess I can set up the Sanity editor to show a preview of the actual page side by side to the content being edited (when I say I can, I’ve seen that it is possible).
Jun 16, 2022, 2:40 AM
Preview pane is definitely the way to go. I just did this with tailwind on the front and then options to float left and float right etc. There's also both mobile and desktop previews in the window so you can get a couple of views in the pane.Here's a link to the preview pane plugin:

https://www.sanity.io/plugins/iframe-pane
Jun 16, 2022, 2:52 AM
Amazing. Thanks
user J
and
user S
Jun 16, 2022, 2:55 AM
If you did need an image truly inline in the editor, the block type has an "of" property where you can stick other fields. I threw up an example earlier this week where you could drop a reference to another document type (in the example it was a Person) right in the middle of a line of text, speculating that on various front ends you could ask for anything you needed in that context so long as the connection was made there ( just their name on one page, for example, or spinning out a mailto: link with their email and their name as the inner text.
I have thought about something like that just showing a picture preview, but when it comes to aligning, having that be eventually floated on the real page and just stranded like an island in the preview seems like a different kind of impractical, so that's why I haven't done it with my two total ideas I've had so far
😃
Preview definitely sounds like it because it's direct and handles what they'll wanna know, which is, what's going to happen to my stuff if I make these decisions, and what will the adoring public see
😃
Jun 16, 2022, 3:00 AM
Hi everyone!y’all did a great job already with bringing up the preview pane.
👏I just wanted to add, that there is a good way to render objects, references etc. within the Portable Text Editor in Sanity:
Customizing the Editor .There is also a wonderful guide by
user Y
which explains how to render a youtube player into the editor .
And for anyone, who would like to see it in action between schema, studio, editor and front-end can have a look at some of
my snippets .
Hope that helps!
☺️
Jun 16, 2022, 9:36 AM
user J
That's super cool! I didn't make the connection before that it was like the document previews where you "tee up" the component property by loading the "select" (including a kind of dereferencing it seems because I was able to get my image address naturally in place.
Jun 16, 2022, 2:22 PM
Jun 16, 2022, 2:27 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
Error when adding color-input plugin to schemaApr 6, 2020
Learning to create custom Sanity Desk components with tutorial videos and guidesApr 30, 2020
Understanding custom input components for complex objects in Sanity.ioApr 14, 2020
Issue with setting value using custom component in Sanity.ioNov 30, 2020
Accessing root document properties in custom input element in Sanity.ioAug 19, 2020
Tips for opening links in a new tab using custom annotation in Sanity.ioApr 14, 2020
Adding a word counter to a content block in Sanity.ioJul 9, 2020
Discussion of server errors and certificate issues in Slack thread.Jun 3, 2020
Custom input components can enable conditional fields in Sanity.io.Jun 17, 2020
How to visually format custom styles in Sanity's block content/richtext editor field.May 20, 2020

Related contributions

Turbo Start Sanity
Template

Featured

The battle-tested Sanity template that powers Roboto Studio's websites

Schema UI - Next.js Sanity Starter
Template

Featured

A Next.js starter template with Next.js 15, Tailwind CSS, shadcn/ui, and Sanity CMS with Live Editing. Get production-ready React components with matching Sanity schemas and queries. Build dynamic pages faster while keeping full control over customization.

Serge Ovcharenko

The Swaddle
Made with Sanity

Featured

A new brand identity to represent a more mature company, to signify The Swaddle’s evolution from publisher to production house, combined with an easier to navigate platform that can surface multiple content types - drawing readers through The Swaddle’s content offering.

Nightjar