AutoFloat demo image

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.

Example

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

Features

  • Generates an organized layout automatically
    (see image).
  • For non-technical users or as a time-saver.
  • Compatible with all WYSIWYG editors and the Insert module.
  • Avoids inline styling. When creating a float manually with the Rich Text (WYSIWYG) editor, undesired inline code is added that cannot be overridden with CSS (see video).
  • Insert images later without messing up the alternating left/right floating pattern, as would happen with manually added floats.
  • Classes are configurable to:
    ◦ auto float images added by other modules.
    ◦ ignore sets of thumbnails or single images.
  • Configure the starting side to be left or right.
  • Flips images to the opposite sides in right-to-left themes for multi-language sites.
  • Pre-configured to work out-of-the-box with the Flickr module.

Configuration

  • Add the autofloat filter to one of your text formats at:
    /admin/config/content/formats (D7)
    /admin/settings/filters (D6).
    Put it below other image related filters in the:
    filter processing order (D7)
    Arrange tab (D6).
  • 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?

Troubleshooting

Images don't float in Edit mode. Text filters are applied in View mode only.
This is normal behavior.

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 class '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 files accordingly.

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.

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).

2.x branch

For D6 and D7 the 2.x branch uses XPath 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').

Feel free to use this potentially better release. It will be made the recommended release to use once we reach a dozen of reported installs of the 2 version without issues. Meanwhile feedback is appreciated. D8 only makes use of the XPath method thus has only one version.

D8

Fully functional. Tested on Drupal 8.0-alpha 4-6. A stable version will be released once a stable D8 gets released.

Related projects

Use the Float filter module instead to target inline styled floating images with CSS. It does not float images automatically like this module, nor does it avoid inline styling.
MouseWheel.net | Drupal Examples Explained

This module is sponsored by MouseWheel.net

Project Information

Downloads