AutoFloat

Primary tabs

A text format filter that floats images automatically, alternating them left and right. A time-saver when inserting images in the text.

It adds an odd/even class and uses CSS to float. No more inline styling is needed.

Example

The filter turns:<img src="/path/photo.jpg">
into:<img src="/path/photo.jpg" class="autofloat-odd">
or in the 1.x branch of the module into:<span class="autofloat-odd"><img src="/path/photo.jpg"></span>

Settings at:
◦ /admin/config/content/autofloat (D7)
◦ /admin/settings/autofloat (D6)
Options :
◦ Starting side, left or right.
◦ If desired, exclude the autofloat.css file to use your theme's style.css instead.
◦ Add classes to:
- target a 'span' if a caption is displayed under the image
- exclude a 'div' for a set of thumbnails.

Re-save existing nodes you want to apply AutoFloat to.

Usage

All images will float unless they have the class 'nofloat'.

A 'span' with the class 'float' will float all containing content, e.g. to use for images with a caption under it.

Images in a div with the class 'nofloat' do NOT float, to use for a set of thumbnails.

Optionally define a custom class used for thumbnail sets (inside a 'div') or images with a caption (inside a 'span'). Use your browser's inspector to find them.

The class 'nofloat' of a nested image has priority over classes set in the parent element, therefore the whole parent will not float.

What popular 'caption' modules are tested to work with AutoFloat?

The Flickr module adds a caption taken from the info available on Flickr. Apart from the title this can also include the date taken, location and photographer. One of the easiest ways to add a caption to embedded images.

jCaption. This captioning works without the need of additional user action per image. In the jCaption settings 'Copy class' has to be selected (is the default).

Troubleshooting

Images don't float after installing the module or changing the configuration options.
Re-save existing nodes you want to apply AutoFloat to. If you still can't see any changes, try clearing both your site and browser cache.

They still don't float or other unexpected display problems occur.
It should be noted that the cascading stylesheets defined by modules are by default loaded before theme CSS (see Drupal API). AutoFloat's style might be overwritten by the theme stylesheets. In that case copy and paste the code from the autofloat.css file to the bottom of your theme's style.css file or use this solution.OR
Your theme might not use the HTML5 article tag or class/id'content' to target the node body, if it does not follow standard Drupal core classes. Use your browser inspector to find the ones used by your theme and adjust the class used in the module's CSS file accordingly.

Remember an element floats within the block-element containing it. If that doesn't cover the full width, the image might not float as expected. AutoFloat is intended for a relative 'flat' node body structure (not deeply nested).

The images in the blocks also Auto Float.
Use another text format that doesn't include AutoFloat for your blocks.OR
change the class/id to target in the module's CSS files. Try to use 'content-content' instead of 'content' (depending on your theme). Leave the leading dots and hashes.

Override AutoFloat behaviour using Flickr Filter tags.
If you enable the AutoFloat module using Flickr Filter tags, it precedes over the existing 'floatleft' and 'floatright' classes found, but not over the inline styles. Thus inline styling is a way to override AutoFloat behaviour, for example:[flickr-photo:id=9247388074, size=m, style=float:right;]
The margins on the 'text side' of the image from autofloat.css get applied anyway, so the text doesn't lean against the image.

2.x branch

The 2.x branch uses the XPath method for parsing instead of a regular expression. The minor difference a site builder might notice is that instead of wrapping elements in a span, an alternating odd/even class is added directly to the element itself (<span> or <img>).

D8 only makes use of the XPath method thus has only one version.

D8

Fully functional. Tested on Drupal 8.0.0-beta11. A stable version will be released once a stable D8 gets released.