Add an image

Every thumbnail should have an image, huh? Let's add it!

Let's add an Image component (imported from React Bricks) and we give a bit of style to the wrapper div, so that it becomes a real thumbnail:

// Thumbnail.tsx
import { types, Text, RichText, Image } from 'react-bricks/frontend'

interface ThumbnailProps {
  title: types.TextValue
  description: types.TextValue
  image: types.IImageSource
}

const Thumbnail: types.Brick = ({ title, description, image }) => {
  return (
    <div className="my-6 mx-6 p-6 text-center w-1/3 border rounded-lg shadow-xl">

      <Image
        propName="image"
        source={image}
        alt="Fallback alt tag" // Fallback if the editor doesn't set an ALT tag
        maxWidth={600} // For image optimization 
        imageClassName="mb-6"
      />

      <Text
        propName="title"
        value={title}
        renderBlock={({ children }) => (
          <h1 className="text-2xl font-bold">{children}</h1>
        )}
        placeholder="Type a title..."
      />
      
      <RichText
        propName="description"
        value={description}
        renderBlock={({ children }) => (
          <p className="text-lg text-gray-500">{children}</p>
        )}
        placeholder="Type a description"
        allowedFeatures={[
          types.RichTextFeatures.Bold,
          types.RichTextFeatures.Highlight,
        ]}
      />
    </div>
  )
}

Thumbnail.schema = {
  name: 'thumbnail',
  label: 'Thumbnail',
  getDefaultProps: () => ({
    title: 'Hello, world!',
    description: 'Lorem ipsum dolor sit amet.',
  }),
}

export default Thumbnail

Now, if you add a Thumbnail block, you should see something like this:

Upload an image

Click on the image placeholder: a popup opens to let you load an image: you can upload from your computer, from Unsplash, from a URL or from the Media Library (to use an image already loaded).

Use the Playground to set a default image

The image placeholder you saw as you added the Thumbnail is the default image when no default value is configured via getDefaultProps(). To add a default value, we'll use the Playground.

You see that, beside the Editor tab, there is a Playground tab: click it.

The Playground is a sort of lab where you can experiment with all the available bricks.
Let's click on the Thumbnail brick from the left sidebar.
Now, you see that as you edit the content, you can see below the currently applied props.

This is very convenient to create the default content. You can tweak your props and visual content until you get a good default: then you may just copy the props and paste them inside the getDefaultProps function's return value.

So, let's do it: set a title and description, upload an image and copy the props into the getDefaultProps returned object. Now, that's our new default.

Image optimization

React Bricks optimizes your images as you upload them.

In particular, it creates responsive versions of each image and proper sourceSet to serve the best image based on the screen resolution. It will also create a webp version with proper fallbacks.

It also creates a blurred low resolution version to load when the image is outside of the viewport. This technique il called "lazy loading": when the image enters the viewport, as the user scrolls down the page, the image is loaded and the low-res version is replaced by the real one. In this way, we don't load at all images which are not needed. React Bricks will use the native lazy load of the browser if available, otherwise it will use it's own lazy load mechanism.

The maxWidth prop of the Image component tells our algorithm which is the maximum width at which the image is rendered on the screen. In this way React Bricks will create the biggest image at 2x this image size (for retina display).

You can also set the quality prop for JPEG or PNG images to set the desired image compression (by default 80).

The Image component has other props that we can't see here. I suggest that you read the full documentation for it.