Rendering Fields

RONIN makes it easy for you to display the fields of your records in your app. Below, we will dive into how this is done in detail.

Blob Fields

When retrieving records that contain fields of type “Blob”, you will be provided with a value that looks similar to the following for each of those fields:

export interface Blob {
  key: string;
  /** The URL of the binary object. */
  src: string;
  meta: {
    /** The byte size of the binary object. */
    size: number;
    /** The pixel width of the image, if the binary object is an image. */
    width: number;
    /** The pixel height of the image, if the binary object is an image. */
    height: number;
    /** The MIME type of the binary object. */
    type: string;
  };
  /** A base64 encoded preview to display while the image is loading, if the binary object is an image. */
  placeholder: {
    base64: string;
  };
}

Image Placeholders

If you are building a web application, in order to ensure the smoothest possible experience for the people making use of your application, we strongly advice displaying a low-quality blurred version of every image, until the full image has finished loading.

Like this, you can avoid empty white gaps in your page, and instead always display something that at least remotely resembles what the image will look like, until the image is available in its entirety. At this point the image can overlay the blurred low-quality version.

When using Next.js, for example, you can easily display the placeholder like so:

<Image
  src={field.src}
  placeholder={field.placeholder.base64}
  alt="A description of the image"
  width={500}
  height={500}
/>

In order to allow the remote image to be loaded securely (when deploying to Vercel), you will need to add the following config to your next.config.js file:

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'media.ronin.co',
        port: '',
        pathname: '/**',
      },
    ],
  },
};

If you aren’t using Next.js, you may render the placeholder like so:

<img src={field.placeholder.base64} />

Image Performance

To ensure that the final image finishes loading as quickly as possible, it is recommended to have its size automatically optimized by RONIN, or your deployment provider.

Vercel

If you’re using Vercel, your images will automatically be optimized if you load them from RONIN as described in the “Image Placeholders” section above. No further changes needed.

Other Providers

If you’re deploying Next.js to other providers, you can use a custom image loader to have RONIN handle the optimization of images for you.

const imageLoader = (
  { src, width, quality }: { src: string; width: number; quality: number; }
) => {
  return `${src}?w=${width}&q=${quality || 75}`;
};

<Image
  src={field.src}
  placeholder={field.placeholder.base64}
  loader={imageLoader}
  alt="A description of the image"
  width={500}
  height={500}
/>

If you’re not using Next.js, you can easily optimize images using the following query parameters:

• w: The desired pixel width of the image (optional).

• h: The desired pixel height of the image (optional).

• q: The desired quality of the image (number between 1 and 100 – optional).

Rich Text Fields

Next to many other field types, RONIN also has a field type called the “Rich Text”.

This field acts like an editor inside RONIN, allowing you to write long structured content such as product descriptions, blog posts, or even complete news articles.

When saving the Rich Text field inside the RONIN dashboard, its contents are saved in a format called “Prosemirror JSON”.

To render the field's contents inside your application, you can parse the format manually or use a library such as tiptap/html or prosemirror-to-html-js.

A custom, more lightweight renderer crafted especially for content saved inside RONIN (which the docs you are reading are currently already using, as RONIN … uses RONIN) is being worked on.