Image

Base Foundry stack

Use the Image stack to insert photos and graphics on your pages, and style the way the look. Add a filter, change their shape and more.

  • Easy drag and drop image insertion
  • Option to use remote images instead of drag-and-drop
  • Set image alignment
  • Apply image sizing: Normal, upscale to 100%, set max-width (at each breakpoint), or percentage based
  • Use placeholder image for page layout
  • Add and style border on your image
  • Add Instagram-style image filters
  • Apply image border shapes
  • Add Tooltips
  • Add links to your images

Example

Upscale to 100%
Image
Rounded corners
Image
Rounded corners
Image
Aden Filter
Image
Early Bird Filter
Image
Tooltip Bottom
Image
Tooltip Top
Image

Using Image

General

Image Type v2
You can opt for the traditional drag-and-drop method or you can use a remote URL for your image. When you choose drag-and-drop you'll be given an image well for you to place your image inside and RapidWeaver will manage your image for you. If you've opted for the remote URL feature you'll be given a link button that allows you to type the URL of your remote image where it exists on your server, and you'll need to manage your images manually using your ow FTP software.

Alloy Droplet support has been added (as of v2.3.0) to allow you to use an Alloy Droplet tag to set your Image.

Image
Drag-and-drop your image into the image drop zone.

Style
Choose from four different image styles: Standard, Rounded, Circular, Thumbnail or the new Custom Rounded setting v2.

Round Corners v2
When the image style is set to Custom Rounded you're given controls for setting the border radius of your image's corners. This allows you to set a different amount of roundness to each of your images four corners.

Alignment
Allows you to set the justification of your image. You can set the alignment to Left, Center or Right. You can opt to set the alignment differently at each of the three breakpoints.

Remove Base Margin
Allows you to disable the preset standard spacing that is applied to the bottom of the Image stack.

Image Shadow

Shadow
Allows you to enable / disable drop shadows for your image.

Disable at Mobile Breakpoint
Used to eliminate the drop shadow on mobile devices.

Vertical Offset
Set the distance you wish for the shadow to go in the vertical direction. You are able to set a different distance for this offset at each of the breakpoints. You can use either positive or negative numbers for the offset values.

Horizontal Offset
Set the distance you wish for the shadow to go in the horizontal direction. You are able to set a different distance for this offset at each of the breakpoints. You can use either positive or negative numbers for the offset values.

Blur
Use this setting to adjust the size of the drop shadow at each of the three breakpoints.

Color
You are able to adjust the color of your drop shadow to match your site’s styling. You can also use the opacity slider to adjust the shadow’s density.

  • Please Note: Drop Shadows may be cropped by parent stacks. This is because, for good reason, stacks inheriently have their overflowing items set to be hidden. You may enable the Allow Overflow option in the Advanced section to address this.

Image Border v2

Border v2
When enabled you're given the option to set a border size and color for your image. The border is applied uniformly around the entire image.

Image Filter

This feature uses modern CSS techniques and is compatible with more modern browsers.

Filter
You can opt to apply a CSS-based image filter to your image to give it a bit of an Instagram-esque look. You can choose from over 20 different filter types.

Advanced

Image Sizing
This feature allows you to choose how Foundry displays your image when it comes to responsive sizing. You can choose to have the image display normally, as-is and only scale downwards when the image would otherwise begin to overflow the bounds of its parent container or you can choose one of the following:

  • Normal: The image is left as-is and is not scaled up or set to a specific width. The image will be scaled down for smaller browsers and devices though if the image would exceed the parent stack or page width.
  • Upscale to 100%: Forces the image to scale itself past its original size, enlarging itself to fill out the entire width of its parent container.
  • Max-Width: Set a maximum width for your image. The image will never scale up beyond this value but will still responsively scale downwards to ensure it fits within the bound of its parent container.
  • Max-Width (3 breakpoints): v2 Set a different maximum width for your image at each of the three breakpoints. The image will never scale up beyond these values but will still responsively scale downwards to ensure it fits within the bound of its parent container or page.
  • Percentage: v2 Choose a percentage based width for your image at each of the three breakpoints. The percentage width of the image is based upon the image's parent stack's width or the width of the page itself (if the image is not inside of a parent stack).

Add Link
Enables you to add a link to your image that goes to an internal page, or an external site.

Alt. Tag.
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.

Allow Overflow on Parent Stacks
Enabling this feature will set the Overflow value of all parent stacks to Visible. This will allow elements, such as drop shadows to be properly shown. This is in the Advanced section due to the fact that setting Overflow to Visible may, in rare corner cases, have an undesired effect on some stacks.

Tooltip
Add a popup tooltip to your Button. These can be enabled on a per-icon basis. You can then set the tooltip text and its location, which can be set to either bottom, top, left or right.

  • Please Note: For Tooltips to work you must enable Tooltips in the Theme Vairations within the Foundry theme's settings!

Placeholder Image
You can opt to use a placeholder image instead of a real image, for mocking up your site. This is good for the early stages of designing your site when you’ve not yet settled on artwork. You can define an height and width for the image, but do note that the placeholder image will be responsively scaled as any other image on your site would be.

  • Please Note: Be sure to replace ALL placeholder images on your site with real image before making your site live to the public!
Insight
Remote URLs

Make sure that when you're using the Remote image type that you're linking to images on your own server. It's bad form to link to other people's images on their site.