Image

The Image component is for displaying images with layout and alignment options. It supports both internal and external sources and allows you to define how the image fits its container.

Preview

Fields

  • imageChooser (default: image) - A switchable field for selecting the image source:

    • If image is selected:

      • image (required) - Internal image chooser from Magnolia DAM.

      • altText (optional) - Alt text for accessibility.

    • If externalImage is selected:

      • externalImage (required) - Full URL to the external image.

      • externalImageAlt (optional) - Alt text for accessibility.

  • objectFit (default: contain) - A switchable field that controls how the image is resized to fit its container:

    • contain - Image scales to fit within container without cropping.

      • alignment (default: center) - Alignment of the image:

        • left

        • center

        • right

    • cover - Image fills the container and may be cropped.

Behavior

  • If objectFit is set to cover, the image fills the container and may be cropped.

  • If objectFit is set to contain, the image scales to fit inside the container:

    • The image is aligned based on the selected alignment.

Creating the component

To create this component in your project, run:

npm run mgnl -- create-component Image -p image
This command adds a local copy of the component to your project. You can fully customize it afterward.

Available in

Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the Magnolia CLI docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules