Alignment button or default alignment

subscribe

I always use class:left, class:right or class:center. This enables me to set additional padding commands in CSS. Insert allows a default class attribute to be entered. Provides a good workaround.

I don't plan on adding this functionality. Usually you'd leave this to the WYSIWYG editor you're using.

Administer - Content Type - Manage Fields.
Pick the Image Field in question.
Configure Field.
Choose Insert Option.
Additional CSS Classes is right there.

It is not possibe to tell the richeditor that the insert module should insert html-code like this ".... align='left' ...." or ".... float:left ...". This html tag comes from insert module, only the insert module can set this html code.

Both FCKeditor and tinyMCE have support for the align attribute, you just have to configure them to use HTML 4 instead of XHTML, in which case they will use style="align: left;" instead of align="left". I actually suggest doing this because it allows for more flexibility while preventing users from using extensive CSS that may break your layout.

Right, I'm saying that I won't be adding alignment to Insert because you can already align images with FCKeditor or tinyMCE. It's the same number of clicks either way, plus it makes it consistent if the user later wants to change alignment from left to right.

Current workflow:
- Upload image.
- Click insert.
- Click right or left align from WYSIWYG toolbar.

Proposed workflow:
- Upload image.
- Select right or left align from Insert form.
- Click insert.

There's no benefit to duplicating alignment controls when you already have them in one place.

The big benifit is in the usability! My users don't know, that they can change the view of an image uploaded with insert by clicking a image button somewhere else.. Thats not logical..

There are a lot more options than just alignment though. After aligning left, the user may then want:

- To add a link to the image
- Add some padding around the image
- Add a border

It just doesn't make sense to duplicate all of this in two places. I won't add this feature. That's it.

Ok, It can be done!!!

If you use ImageCache, change imagecache-insert-image.tpl.php to:

// $Id: imagecache-insert-image.tpl.php,v 1.1 2009/10/21 06:23:43 quicksketch Exp $

/**
 * @file
 * Template file for ImageCache content inserted via the Insert module.
 *
 * Available variables:
 * - $item: The complete item being inserted.
 * - $url: The URL to the image.
 * - $class: A set of classes assigned to this image (if any).
 * - $preset_name: The ImageCache preset being used.
 *
 * Note that ALT and Title fields should not be filled in here, instead they
 * should use placeholders that will be updated through JavaScript when the
 * image is inserted.
 *
 * Available placeholders:
 * - __alt__: The ALT text, intended for use in the <img> tag.
 * - __title__: The Title text, intended for use in the <img> tag.
 * - __description__: A description of the image, sometimes used as a caption.
 */

print $url " img style="margin: 10px; float: left;" alt="__alt__" title="__title__" class="imagecache- print $preset_name print $class ? ' ' . $class : '' " />

If you don't use ImageCache, change insert-image.tpl.php to:

// $Id: insert-image.tpl.php,v 1.1 2009/10/21 06:23:43 quicksketch Exp $

/**
 * @file
 * Template file for generic images inserted via the Insert module.
 *
 * Available variables:
 * - $item: The complete item being inserted.
 * - $url: The URL to the image.
 * - $class: A set of classes assigned to this image (if any).
 * - $width: The width of the image.
 * - $height: The height of the image.
 *
 * Note that ALT and Title fields should not be filled in here, instead they
 * should use placeholders that will be updated through JavaScript when the
 * image is inserted.
 *
 * Available placeholders:
 * - __alt__: The ALT text, intended for use in the <img> tag.
 * - __title__: The Title text, intended for use in the <img> tag.
 * - __description__: A description of the image, sometimes used as a caption.
 */

print $url " width=" print $width " height=" print $height " alt="__alt__" title="__title__" print $class ? 'class="' . $class . '" ' : '' />

manuel.solis , I'd love to get your full code too.

Did you try the module "Custom formatters" it works perfectly with the module "Insert".
- I made a formatter "Image float left":
<img style="float: left;" class="imagecache-image220" src="/[filefield-imagecache-image220]">
another "image float right" and a "Image no float".
- After that select your own formatters in "Enabled insert styles:" into your ImageField.
- Now Insert is able to inject your own Format into your text area.

Thanks for the tip PFX!

Why I cannot see imagecache token in my site ? Should additional modules are required ?

So sorry!!!
In imagecache-insert-image.tpl , replace this:

<img src="<?php print $url ?>" alt="__alt__" title="__title__" class="imagecache-<?php print $preset_name ?><?php print $class ? ' ' . $class : '' ?>" />

With this:

So sorry!!!
In imagecache-insert-image.tpl , replace this:

<img src="<?php print $url ?>" img style="margin: 10px; float: left;" alt="__alt__" title="__title__" class="imagecache-<?php print $preset_name ?><?php print $class ? ' ' . $class : '' ?>" />

Good luck!

I can see that it's best to leave this to the wysiwyg editor, but right now the only way to align it in the editor is by using HTML instead of assigning classes - my preferred way. I like the way image(field) assist does it by providing default classes for align left, right and center (and allowing the option of a filter tag instead of having to allow the tag). Then in the css you can have uniform padding, borders for each alignment. Problem is that it doesn't work nicely with WYSIWYG api.

Another quick way of allowing the user to assign alignment (and not just the default) is by creating a different preset for each of left, right and center. Then in the theme assign floats and padding to each. It may mean you get two or three images of the same dimensions but not too many.

How can I accomplish this on D7?

For D7

Change sites\all\modules\insert\templates\image-insert-image.tpl.php

From

<img src="<?php print $url ?>" alt="__alt__" title="__title__" class="image-<?php print $style_name ?><?php print $class ? ' ' . $class : '' ?>" />

To

<img src="<?php print $url ?>" alt="__alt__" title="__title__" class="image-<?php print $style_name ?><?php print $class ? ' ' . $class : '' ?>" style="float: right;"/>