Ability to add captions to images in the rich text editor

[AlessioGr]

I would like to be able to set the caption for each specific image in the rich text editor (“upload” node type). Or, at least a checkbox as to when to enable the pre-set caption field.

This would give me more fine-grained control as to when the image caption should be displayed and when not.

[jmikrut]

Hey @AlessioGr — I have good news for you! This is possible right now.

We are going to be releasing new series of guides and tutorials, and one of the tutorials planned is how to do exactly what you're looking for. There is a feature that we built, and its config is shown in the richText field docs, but the docs are fairly lacking at the moment.

We'll be improving those docs once we launch the corresponding tutorial. But, the jist is that you can actually define "fields" for your rich text upload component, on a collection by collection basis.

So, if you:

• have a rich text editor field that supports upload elements
• have a collection with slug media
• you want to add captions, or any other type of custom data to your upload elements

You could write your rich text field like this:

import { Field } from 'payload/types';

const richTextFieldExample: Field = {
  name: 'content',
  type: 'richText',
  admin: {
     upload: {
      collections: {
        media: {
          fields: [
            // any fields that you would like to save
            // on an upload element in the `media` collection
            {
              name: 'caption',
              type: 'text',
            }
          ],
        },
      },
    },
  }
}

You can see above that we are specifying fields to show up on the media collection. If you do this, you get a fancy new Edit button on your rich text upload elements:

The above is a screenshot from the Payload demo, where you can try this out on your own.

How's that?

[AlessioGr]

Can you share more info about what is happening here? What is that screenshot of? I'm afraid I can't follow ☠️

Is that a screenshot of your upload document within a rich text field?

So basically, that's my JSON response: https://write.wheelcosmos.com/api/posts-test (put it through some json prettifier),
If you search for caption, you can find something like this for the upload field within the rich text field:

I used to have a caption field directly on my media collection, which I have removed. However, it seems that it's still outputted in the REST API – together with the new field I added. Is it possible to clean that old field from the database, as I have already removed that entry from my collection?

[jmikrut]

Ah I see. Yeah that just looks to be old data that's coming through then.

When we want to modify the shape of documents in the database itself, we generally write migration scripts using the Payload Local API. Here is an example of a migration script that regenerates media sizes:

const payload = require('payload');
const path = require('path');

require('dotenv').config();

const { PAYLOAD_SECRET_KEY, MONGO_URL } = process.env;

payload.init({
  secret: PAYLOAD_SECRET_KEY,
  mongoURL: MONGO_URL,
  local: true,
});

const regenerateMediaSizes = async () => {
  const media = await payload.find({
    collection: 'media',
    depth: 0,
    limit: 300,
  });

  try {
    await Promise.all(media.docs.map(async (media) => {
      try {
        const staticDir = path.resolve(__dirname, '../media');

        await payload.update({
          collection: 'media',
          id: media.id,
          data: media,
          filePath: `${staticDir}/${media.filename}`,
          overwriteExistingFiles: true,
        });

        console.log(`Media ${media.alt || media.id} regenerated successfully`);
      } catch (err) {
        console.error(`Media ${media.alt || media.id} failed to regenerate`);
        console.error(err);
      }
    }));
  } catch (err) {
    console.log('Something horrible has happened');
    console.error(err);
    process.exit(0);
  }

  console.log('Media size regeneration completed!');
  process.exit(0);
};

regenerateMediaSizes();

You could take something like the above but modify it to do whatever you need to your old data.

Does that make sense?

[jmikrut]

PS - I am a sim racer myself..... Formula 3 in iRacing. 👍

Pretty neat to see sites related to sim racing being built on Payoad!

[AlessioGr]

Ah I see. Yeah that just looks to be old data that's coming through then.

When we want to modify the shape of documents in the database itself, we generally write migration scripts using the Payload Local API. Here is an example of a migration script that regenerates media sizes:

const payload = require('payload');
const path = require('path');

require('dotenv').config();

const { PAYLOAD_SECRET_KEY, MONGO_URL } = process.env;

payload.init({
  secret: PAYLOAD_SECRET_KEY,
  mongoURL: MONGO_URL,
  local: true,
});

const regenerateMediaSizes = async () => {
  const media = await payload.find({
    collection: 'media',
    depth: 0,
    limit: 300,
  });

  try {
    await Promise.all(media.docs.map(async (media) => {
      try {
        const staticDir = path.resolve(__dirname, '../media');

        await payload.update({
          collection: 'media',
          id: media.id,
          data: media,
          filePath: `${staticDir}/${media.filename}`,
          overwriteExistingFiles: true,
        });

        console.log(`Media ${media.alt || media.id} regenerated successfully`);
      } catch (err) {
        console.error(`Media ${media.alt || media.id} failed to regenerate`);
        console.error(err);
      }
    }));
  } catch (err) {
    console.log('Something horrible has happened');
    console.error(err);
    process.exit(0);
  }

  console.log('Media size regeneration completed!');
  process.exit(0);
};

regenerateMediaSizes();

You could take something like the above but modify it to do whatever you need to your old data.

Does that make sense?

Aaah yeah, that makes sense, thank you a lot!! I'm still in the phase where I experiment with the structure here and then, so since I don't have too many collections I just manually removed those fields in MongoDB atlas 😅 But I'll definitely keep that in mind once my database starts growing. I'll maybe try to make such a migration script which automatically tries to find data which isn't used anymore and deletes it.

[AlessioGr]

PS - I am a sim racer myself..... Formula 3 in iRacing. 👍

Pretty neat to see sites related to sim racing being built on Payoad!

oo cool, sim racing really is growing! What gear do you use?

I had quite a journey with my sim racing site. Went from WordPress to nextjs + markdown files, then strapi + sveltekit, then directus and now payload + sveltekit and I finally think that's something I can keep using to grow that site long-term.

I'm trying to bring some actual helpful content for sim racing there with a lot of dynamic data, like a wheel database or even user-generated reviews. I hope that'll work out well