Image
Basic and reusable Image block using the media collection.
We are currently in early stage. Properties, structures and naming conventions may differ in the near future. If you would like to provide feedback, please feel free to join our new community at Discord.
Installation
You can add the pre-configured image elements to your project with the command below. If you only want to install the image block check the reference here.
npx @basepl/cli add BaseplImageCurrently, basepl doesn't automatically update the payload types. So if you install the configuration and the component you have to update the types. Simply run
npm generate:typesIf not you will get an error in the blocks/BaseplImage/Component.tsx file. Because the BaseplImageType is not present.
Image block configuration
Here is the result in the admin panel and the pre-configured image block itself. You can change it to your needs in the blocks/BaseplImage/config.tsfile.
Image component configuration - optional
Per default the image block will be installed with prebuild and fully customizable component. To only install the image block read more here.
The basepl image act as a wrapper for the nextjs image tag, to apply admin configurations. You can change it to your needs in the blocks/BaseplImage/Component.tsx.
If you want to find out more about the nextjs image tag and configuration options, take a look at the documentation at next image.
Predefined image options
If you want to include an image, you can upload one or choose one from the media collection. You can also choose between different image options.
Size
You can select between different sizes. If you select the option "custom" you can set either absolute width and height or relative width via input fields.
Object settings
If you choose the "custom" option, you can define the object fit and position using the select fields.
Priority
You can check the checkbox if you want to prevent lazy loading for this image.