Floated Content

Floated Content is the option to wrap text around an image. For instance, in the screenshot you see below, the image is floated within the text region for this page. Using this option, images can be floated to the left or right of a text region. This is best used for images that cannot be easily resized like logos or event photography.

Before adding Floated Content to a page, make sure that your image is no wider than 1440px and less than 1MB in size.

Uploading Your Image

  • Navigate to the _cdncontent site in Cascade.
  • Create a new folder by navigating to your site, found under hermes > images > Your Site Name. Then select the Add Content at the top of the page. Select Default and then select Folder. Name your folder (ex: “floated”) to indicate that these are images that you will be floating on the page, rather than a lead image.
  • Upload each image as a standard image file in this new folder by selecting Add Content again. From that menu, select Default and then select File. You can upload just one or multiple images from the file upload screen.
  • Publish the images or the entire image folder.
Screenshot of Floated Content menu
Floated Content menu
Screenshot of Floated Content menu

Adding it to Your Page

  • Navigate to your site in Cascade, and select Edit from the page where you would like to add Floated Content.
  • To add Floated Content to a text region, scroll down to Main Content and open up the Content Region menu. Under Content Type, select Text Region.
  • Open the Text Region menu that appears, and then open the Floated Content menu, and under the Content Type menu, select Image with Caption.
  • Open the Image with Caption menu that appears, and add your image by selecting Choose File. Select your file and then add a short description of the image in the Alt Tag text box. Please note, this field is required. You may also enter text in the caption field, if you wish.
  • Under the Floated Direction menu, you may select whether you would like the image to be left or right justified, by selecting Left or Right in the Mobile, Tablet, and Desktop fields. On Mobile, images set to Left will appear above the text region at full width, and images set to Right will appear below the text region.
  • Under the Floated Content Grid Sizes menu, you may select the width of the image based on its percentage of the main content region. Typically, mobile should be set to 100%, and tablet and desktop should be set to 50% or less.
  • Under the Padding menu, you may select the number of pixels that can surround the image, to allow for more room between the image and the text. Typically, the default setting of 1 pixel is enough for mobile, tablet, and desktop screen sizes.
  • Finally, be sure to add any text that you would like to have surrounding the image inside the Content Region Copy field.
  • Submit and publish your page to view the final result.