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.

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.

The Overlay in Whimsy is the background behind your content, which overlays the image when you hover your mouse cursor over the image. This section of settings allows you to customize this Overlay.

Whimsy's overlay can be styled in a number of different ways to provide a unique look and feel. Here's a look at each of the available options.

When using the presets Style Mode for your overlay you'll be able to choose from one of Foundry's color presets for your backdrop color.

These two color pickers allow you to customize the look and feel of the Overlay. The Solid style mode uses only the Primary color picker, while the gradient styles all use both the Primary and Secondary color pickers.

Allows you to configure the height and width of the overlay in relation to the size of the image itself. Paried with the Placement feature below you can get a variety of different layout configurations.

Sets the origin of the Overlay's placement. If for example you set the placement to be Bottom & Left and the Width is set to 50% and the Height set to 100% the the Overlay would run from top to bottom and fill the left half of the image.

Whimsy has some built-in controls for adjust the padding within the Overlay Content area. If you'd like to customize this padding on a more granular level you can enable this feature and instead add a Spacing tool to the Overlay Content area, which provides a great range of control.

When the above "Use Spacing Tool for Padding" is disabled you can use the Uniform Padding control to adjust the amount of padding around the content.

Allows you to choose what form of sizing units to use for the Uniform Padding value.

This setting gives you the ability to place the content is various different locations, relative to the Overlay itself. You can choose from the following locations within the Overlay:

This color picker provides a base text color for the Overlay Content. Content placed within the Overlay Content area will take on this text color unless that item has its own text styling applied.

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.

This section controls the various animations, easing and duration for each of the animateable elements within Whimsy.

Allows you to choose the animation style that will be applied to the Overlay. This animation is executed when the visitor hovers thier mouse cursor over the Whimsy image. Choosing No Animation here will disable the Overlay's animation, but does not affect the remaining animation effects.

This value determines how long the animation will take to complete. A larger value here translates to a slower animation.

In real life most objects don’t just start and stop instantly, and rarely move at a constant speed. The Easing setting allows us to apply some of this real world feel to our animated objects. We've provided several styles to help you get the feeling you are after.

Allows you to choose the animation style that will be applied to the Background Image itself. This animation is executed when the visitor hovers thier mouse cursor over Whimsy. Choosing No Animation here will disable the animation, but does not affect the remaining animation effects.

This value determines how long the animation will take to complete. A larger value here translates to a slower animation.

In real life most objects don’t just start and stop instantly, and rarely move at a constant speed. The Easing setting allows us to apply some of this real world feel to our animated objects. We've provided several styles to help you get the feeling you are after.

Allows you to choose the animation style that will be applied to the Content inside of Whimsy. This animation is executed when the visitor hovers thier mouse cursor over Whimsy. Choosing No Animation here will disable the animation, but does not affect the remaining animation effects.

This value determines how long the animation will take to complete. A larger value here translates to a slower animation.

In real life most objects don’t just start and stop instantly, and rarely move at a constant speed. The Easing setting allows us to apply some of this real world feel to our animated objects. We've provided several styles to help you get the feeling you are after.

When enabled a visual cue will be placed on the thumbnail image. This indicator lets the visitor know that the thumbnail can be hovered over to show more information.

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. This setting also provides for a Circle setting as well.

This setting determines where the indicator will be located. This location is relative to the thumbnail image. You can place the Indicator in the four corners of the thumbnail image or the very center of it.

Here you can set the overall size of the Indicator's background container. You're given 6 different settings here — one for each of the responsive breakpoints.

Here you can set the size of the Indicator's icon. You're given 6 different settings here — one for each of the responsive breakpoints.

Allows you to choose from several preset icon choices for the Indicator.

Enabling this feature lets you add a link to your the entirety of Whimsy.

Allows you to provide a link to a URL, whether it be an internal page or an external link.

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.

This setting can be used to apply a different shadow, or none at all, to a your image when the visitor hovers over the button on the page.

When enabled a small transition animation, essentially a keyframe animation, will be applied to the image when the visitor hover over it. This will give the transistion from normal Shadow style to Hover Shadow style a bit more personality and visual interest.

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.

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.