The Image component is for adding images to a layout. Images can be set to display in their natural aspect ratio or set to cover the containing component's available space.
Key information about this component:
Layout canvas elements
- Image - Provides the image element. Note: Within the Styles tab, the image has been given a minimum height of 1px. This is to improve browser support for IE11.
Component form fields
- Image - Provide the image. When the content author selects an image, the image browser used will be the one set within Site Studio > Configuration > System settings. When an image is selected from a media library, the image is used but the media entity is not.
- Alt tag - An Alt tag field is provided but it has not been set to mandatory because it's not appropriate to add an alt tag if the image is decorative.
- Image size - The image component includes a select list of images styles. This list is not dynamic. If you add additional Image styles to Drupal and want them to be available within this list, you need to add them manually to the component.
- Height - Sets the image height to its natural height or to fill the space available. The Fill space available option applies the css property object-fit:cover to the image. This makes the image fill the available space without deforming the image. The image will likely be cropped to cover the space.
- Space below image - Adds a margin below the image. This is required to separate it from content that might be placed below it.
Site Studio