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

Features

  • Generates an organized layout automatically
    (see image).
  • For non-technical editors or simply 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?

  • 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).
  • Image Caption.
  • Caption Filter uses its own system for floating that must be used for those images.

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.

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