Markdown content with media - images info saved in another field

Show and Tell
1

Hi!

  • I’m using a simple article type with content in markdown using local images, with upload plugin.
  • I needed to know images dimensions in article, to let frontend do the magic (responsive images).
  • So I set a new media field (multiple), where I store all the media info used in article content.
  • I set hooks in lifecycle model to get images from content field and put references in the new field.

Here the code:

/api/articles/models/articles.js:

'use strict';

const saveImages = async (data) => {

    const regexp = /\!\[[^\]]*\]\((data:image[^)]+|.+?\.(jpe?g|png|webp|gif)[^)]*)\)/g;
    const images = data.content.matchAll(regexp);
    // images is a field with multiple media, we only need to store id's of upload files
    data.images = []

    for (const src of images) {
        if(src[1].match(/^data:image\/([^;]+)/)) continue
        // we get the correct upload file reference
        const img = await strapi.plugins.upload.services.upload.fetch({url: src[1]});
        if(img&&img.id)
            data.images.push(img.id)
    }
}

module.exports = {
    lifecycles: {
        async beforeUpdate(params, data) {
            await saveImages(data)
        },
        async beforeCreate(data) {
            await saveImages(data)
        }
      }
};