How to Insert an Image into a Portable Text Block with Alt Text and Caption Predefined

31 replies
Last updated: Jul 14, 2020
Newbie Question: Is it possible to configure an image object in Sanity Studio so editors can select and insert an image into a portable text block as an inline image and have the alt text and caption predefined? The perfect scenario would be if the caption and alt text were set when the image is first uploaded, then editors have the ability to override the original values where required in subsequent uses of the image.
Jul 14, 2020, 3:35 PM
i would say yes ... but i think it depends on what you mean by predefined
you can make an inline image component that can be inserted into portable text for sure, and you can add fields for alt and caption to that component.

you can also have initial values for new objects ... this is where i'm not 100% sure what you're asking

do you want to have all new images use a predefined value for alt and caption?

or just that you want the user to add those the first time the image is used?
Jul 14, 2020, 3:42 PM
I'm looking to try to recreate the way that WordPress handles media: the first time an image is uploaded, it's given a unique caption and alt text. When the image is subsequently inserted as an inline image, the caption and alt text are used, with the ability to change / override where required.
Jul 14, 2020, 3:45 PM
mmm, yeah
sanity definitely thinks about content, images included much differently than WP
Jul 14, 2020, 3:46 PM
because reusing an image doesn't bring along your alt and caption
Jul 14, 2020, 3:47 PM
Exactly
Jul 14, 2020, 3:47 PM
I wonder if there is a way to do it?
Jul 14, 2020, 3:47 PM
you'd almost need to create document type of Image
and then do a reference to that Image in your portable text
Jul 14, 2020, 3:47 PM
Is that possible?
Jul 14, 2020, 3:48 PM
but even that isn't the same
Jul 14, 2020, 3:48 PM
since its still only giving you the option of alt/caption usage a single time
Jul 14, 2020, 3:48 PM
so if you update alt/caption, it would be updated everywhere
Jul 14, 2020, 3:48 PM
That would still be better than what I have now!
Jul 14, 2020, 3:49 PM
well, then, yes... you could make a document type and create an object for your portable type to reference that document
Jul 14, 2020, 3:49 PM
Are there any docs on how I can add a reference to another document inside a portable text block?
Jul 14, 2020, 3:49 PM
not sure ... just seems doable in theory
Jul 14, 2020, 3:50 PM
you'd need to create an object component, with a reference inside of it, but that should be possible
Jul 14, 2020, 3:50 PM
actually, i've done something similar but with Videos
Jul 14, 2020, 3:51 PM
Thanks. I'm going to do some more research!
Jul 14, 2020, 3:51 PM
i have a Video document type where i add video with captions and other details
Jul 14, 2020, 3:51 PM
and then i reference that as an Insert for my body copy on articles
Jul 14, 2020, 3:52 PM
That sounds very close to what I'm after!
Jul 14, 2020, 3:52 PM
cool.. yeah the only "downside" i see is again that if you edit the content of your Image document, it will get updated anywhere that document is referenced
Jul 14, 2020, 3:53 PM
I can live with that
Jul 14, 2020, 3:53 PM
here's what my Body Copy in the Article looks like

{
      title: "Body Copy",
      name: "bodyCopy",
      type: "array",
      of: [{ type: "block" }, { type: "inlineImage" }, {type: "reference", to: {type: "video"}}]
    },
Jul 14, 2020, 3:54 PM
its the third item in the
of
Jul 14, 2020, 3:55 PM
reference to video
Jul 14, 2020, 3:55 PM
Gotcha. Thanks
user N
much appreciated!
Jul 14, 2020, 3:55 PM
yep! good luck... let me know if you have questions
Jul 14, 2020, 3:56 PM
I will. It's great to know that there is a helpful community here. I've been on a journey trying to find the best alterantive to WordPress and i think I may have found it!
Jul 14, 2020, 3:57 PM
same! i've been a WP developer for most of my career (and i still love it), but sometimes you just need more or something different ... and i've been loving sanity since finding it
Jul 14, 2020, 3:58 PM
It was Gutenberg that finally drove me away. I've tried ClassicPress which is okay but I found myself using it headless more and more. I'm in the process of settling on Sanity / Gatsby for clients who need a GUI and MDX / Gatsby for everyone else. Thanks again for your help! 😁
Jul 14, 2020, 5:09 PM

Sanity.io – build remarkable experiences at scale

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