Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

This drop zone is where you'll provide the main, required image for the Image tool. You can use the following file formats for this drop zone, as well as the Retina Image drop zone, below.

Here you can optionally add a Retina Image, in addition to the required normal Image above, for high DPI displays.

Provides you a way to add an ALT Tag to your image. The ALT tag is used in HTML to specify alternative text that is rendered when the element to which it is applied cannot be displayed. It is also used by screen reader software so that a person who is listening to the content of a webpage (for instance, a person who is blind) can interact with this element.

When enabled you can add an ARIA label for accessibility to your Image.

When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.

The Foundry Image tool provides you several different ways to size your images. Below we look at each of them and how they affect your images.

When enabled you'll be given a setting to tell the Image tool what your image's original width and height are. Specifying specific dimensions for your image can help to avoid Content Layout Shift.

This setting allows you to align the Image to the left, center or right of its parent container. In Uniform mode this alignment will be set the same for all 6 breakpoints.

Clicking on the small plus icon will give you the ability to adjust the alignment of the Image independently at each of the 6 responsive breakpoints giving you more granular control.

Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.

Used to add a decorative shadow to this tool. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.

Allows you to choose from 5 different preset border widths for easy styling. If you need something different you can choose the Custom option to set your of border thickness. By default the border is set to None.

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the Image's border. You're also provided an option to choose a custom one-off color as well.

Enabling this feature lets you add a link to your image. If you want to use the Image to trigger a Modal you'll also need to make sure this feature is enabled.

Allows you to provide a link to a URL, whether it be an internal page or an external link. When using an Image to trigger a Foundry Modal be sure to leave the link blank.

This feature allows us to use this tool to trigger the opening of the Foundry Modal. This allows us to decouple the Modal from its trigger, which in this case is an Image, which gives us much greater control over our page's design and layout.

The Unique Modal ID you enter here should match the Unique ID you've setup in the Modal tool's settings. This allows the Image to know which Modal to terigger when your visitor clicks it. This ID links the two page elements together.

Lazy loading images as the visitor scrolls down the page can improve page load times when you must use large images on your page. The feature uses HTML's native lazy loading property. This is supported by most modern web browsers.

Here we can choose between having a simple Tooltip or a more advanced Popover added to the Image. These elements appear when the visitor hovers over the Image. By default we have the Type set to None, which turns off this feature.

While there's no 100% sure fire way to protect your's sites images from being downloaded, we do offer a couple of options that help dissuade visitors from doing so. You can choose to protect each individual image from being drag-and-dropped from the page onto the visitor's computer as well as prevent the visitor from being able to right-click on an image to save it.

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

This field allows you to replace the default HTML Comment with your own text.

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.