Clicky

CutOut – Floating Images in RapidWeaver
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

CutOut – Floating Images in RapidWeaver

Floating images. There's a stack for that – right? Right the tenth, or eleventh stack from the top of the library! Float an image to the right, or left of your text content. I never used it because I come from the world of DTP and found that floating images could look quite terrible compared to a professional layout app. However CSS is slowly catching up and Will Woodgate has released a new stack that takes advantage of the latest CSS additions: CutOut – a free stack from Stacks4Stacks.

CutOut is a stack that allows your text to gracefully flow around your image instead of the standard rectangular float that we have become used to. Check out the screenshot below:

CutOut – Stacks4Stacks
The left half of the image displays a regular floating image. The right half of the image displays a floating image when using CutOut. Notice a difference?

cutout – S4SCutOut makes use of the new 'shape-outside' CSS definition which is supported by all newer browsers (If you wish to know exactly which browsers take a look here). Shape Outside allows a text to flow around a pre-defined form. The form can be circular or polygonal. Polygonal shapes are highly experimental, but 0% 0%, 100% 0%, 50% 100% for instance, will create a triangular shape. CutOut degrades to a regular floating image on older browsers.

You can drop any Square (i.e. with equal length sides) image into CutOut and your image will automatically be displayed as a circular image which your text will flow around. If you require a more complicated shape, you'll need to search the web for shapes, or experiment.

How it works. Drag Cutout into a stacks page and you'll be presented with a dummy text. Replace the text with your text and drag your image into the image well in the stack settings panel. It's that simple. Of course, CutOut wouldn't be an S4S stack, if it didn't support warehoused images, but you'll also notice that it also has a setting for WebYep CMS images [Teaser]. WebYep2 is nearing release and CutOut already supports the new CMS system (as will a number of other S4S stacks).

Stack settings
Image Source – Drag & Drop, Warehoused, WebYep CMS
Standard Image
Retina Image
CutOut Shape – Circle (default), Elipse, Inset, Polygon
Image Float – Left, Right
Apply Border Radius – Default 50%
Breakpoint
Spacing – Space between image and content below breakpoint
Image Width – px
Image Margin – Top, Bottom, Left, Right
Image Width – Below breakpoint
Image Link
Content Type – HTML, Markdown, Text (default), WebYep Short and Long
Content Padding – Top, Right, Bottom, Left

With some experimenting, CutOut will allow you to create some very interesting text flows around your images. Oh, and did I mention that CutOut is a free stack?

blog comments powered by Disqus
  • Stacks Image 35399
  • Stacks Image 35402
  • Stacks Image 35405
  • Stacks Image 35408
  • Stacks Image 35411
  • Stacks Image 35414
  • Stacks Image 35417
  • Stacks Image 35420
  • Stacks Image 35423
  • Stacks Image 35426
  • Stacks Image 35429
  • Stacks Image 35432
  • Stacks Image 35435
  • Stacks Image 35438
  • Stacks Image 35441
  • Stacks Image 35444
  • Stacks Image 35447
  • Stacks Image 35450
  • Stacks Image 35453
  • Stacks Image 35456
  • Stacks Image 35459
  • Stacks Image 35462
  • Stacks Image 35465
  • Stacks Image 35468
  • Stacks Image 35471
  • weaverthemes
  • Stacks Image 35477
  • Stacks Image 35480
  • Stacks Image 35483

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

x

Don’t miss a post!
Sign up for our monthly newsletter.

A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.

* indicates required

Contact Information

My Image

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—16

This website was built with loving care on a Mac using Foundation. For more information, contact me.