Is it possible to add additional options like alt and title fields? It would be great to set a float left or right before insert the image into the body field.

Files: 
CommentFileSizeAuthor
#8 float2.jpg104.49 KBprotools
#7 float.jpg63.91 KBprotools

Comments

Generally this probably will not be supported. Because floating left or right requires quite a bit of collaboration between the CSS of the site, the markup inserted into the editor, and the configuration of your input formats. However this *can* be done already through adding new options to the drop down select list and then theming the insert-image.tpl.php file. But due to the difficulty of creating a general solution for this, I don't think Insert module will support it.

Ok, was just a question ;) A working way is to insert the image, resize it (image_resize_filter) and than use the wysiwyg editor image settings (float, borders,...). Works but is a second step to do after insert it. But I think insert works fine so far.

Thanks

What i did was to add an additional class on my style.css - left-align/right-align.

img.left-align{float:left;}
img.right-align{float:right;}

After making the insert, you'll see the class portion on your insert, just add inside the class property your preferred alignment - left/right. I think this is so far te simplest way to get around this issue on Insert.

This should work if you are not using any text/image editors like wysiwyg.

Please let me know if there are other ways to treat this. Thanks.

Hello MitNick,

I use wysiwyg/ ckeditor and can add float via image button. I searched for a faster/ easier way but think it should be ok to do it with 2 or 3 steps instead of 1 step.

Best regards

Hey John! Thanks!

What I am looking for now is how to make Insert to insert third party videos without editor.
Also, how to do insert like what facebook do on their "Notes" section, i.e. < image 1 >, < image 2 > unlike what we currently have long img tag. Had you ever came across any of these topics?

Thanks in advance.

StatusFileSize
new63.91 KB

ore best

StatusFileSize
new104.49 KB

multi

Please make an option for easy float/left right and I embrace this module immediately :)
It's far too complicated now to achieve it, it would be great if options were added like in protools screenshots. I've always used the imagepicker plugin which does this too. But I would really like to use the insert module since this allows attach per node.

Imagepicker just adds style="float: right;" or style="float: left;"
I've been using this successfully for quite some time and would love to see it inside the insert module asap :|

Interesting discussion. I am using the class option and CSS to do floats, but I have a field for each type of float! Love Protools idea... well, good luck!

herojig, can you do it without altering the raw html code ? Or do you need to add the class manually ? Don't see immediately how to do it automatically.

Protools, can you please show us how did you do this. Thanks.

@MitNick - it's not on drupal ... :) but very nice like idea for insert :)

I agree 200% :)

I think this module is good, but think with a few other options like float: right; option, for example, it would be far more useful.

It is far more common for someone to insert an image into content aligned than not, so this module is not useful for most people. Of course you can use the image button on TinyMCE to do this after inserting, but most users would never know this, esp. as it is a 2 step process.

Just my 2 cents.

What I'm running into using ckeditor is that when I insert the image and select float, it looks great in the ckeditor, but when I save the node, it fails to float the text when viewing the node.

Any ideas? Do I have something misconfigured in ckeditor?

Maybe the styles are filtered. Did you use filtered html or full html input filter? If you change to full html it should work. I use wysiwyg_filter because I wouldn't use full html filter...

You can also check it into source code. If you disable the cheditor you should see the float in source code. If filtered html is used and the float missing after saving the node, it's should be filtered.

+1 for classes attached

+1

It's not so crucial. Can't you just prepare two styles in any WYSIWYG editor?

In ckeditor it's like:

{ name : 'Image to left' , element : 'img' ,   attributes : { 'class' : 'img-left' }},
{ name : 'Image to right' , element : 'img' ,   attributes : { 'class' : 'img-right' }},

and corresponding css styles:

.img-left{
float: left;
margin-right: 10px;
}
.img-right{
float: right;
margin-left: 10px;
}

Insert is not for images only.

@altavis

Insert is not for images only

but more often image then file!

maybe separate project like IMAGE INSERT will be better

I think this will be a great add-on to Insert module.

One way to achieve this is to provide an option (i.e. list of options) to wrap the inserted image inside a div container. The div container/s will be styled using css.

Basically we need three containers to choose from:

a. middle of page, no floating
b. float left
c. float right

@quicksketch

Would you please tell me where to add custom code inside insert.module file in order to load custom form (select list) that would allow the specification of the value of a custom php variable to be later used inside "insert-image.tpl.php" file.

The custom php variable should set the class type (css style) for the div container.

Your help is highly appreciated.

subscribe

@quicksketch

I have noticed that someone mentions the "Additional CSS classes" option (can be specified per content type). Do you think that this already available feature can solve the current issue of this post (that is, specifying css classes to align left, right, center and float) ?!

WYSIWYG editors are for the birds. This module is great, but only adds an incremental benefit over the default behavior.

Adding "Float Left" and "Float Right" options would make it a slam-dunk, must-have module. No doubt.

Seriously.

No doubt.

Let's say that we need 3 classes:

.align-right
.align-left
.centered

A php variable could set the img class in the img html code. All that is needed is a patch that allows the user to select one of the three classes above upon inserting an image (or any additional classes, even multi-select).

I really like this module. I would LOVE it if it supported this feature!

Am I over-selling it?!? ;^)

If the author would like help I'd be happy to assist where I can...

I completely agree, some other modules support this like imagepicker and is very handy. Why not this module ??

Posted by quicksketch on May 12, 2011 at 5:23pm
Generally this probably will not be supported. Because floating left or right requires quite a bit of collaboration between the CSS of the site, the markup inserted into the editor, and the configuration of your input formats. However this *can* be done already through adding new options to the drop down select list and then theming the insert-image.tpl.php file. But due to the difficulty of creating a general solution for this, I don't think Insert module will support it.

Hello quicksketch,

no chance to add it as optional feature (enable/ disable in configuration)? Would be really great and push insert on the top!

+1 as optional feature

It looks like it ain't happenin' unless someone else takes it on. But in the meantime, I have been floating images left in CSS using the page's class. Sure, you can't float left-and-right all willy-nilly, and you can't necessarily target specific images, but it works if the area you are targeting through CSS doesn't have any non-floated images in it at the same time.

If the Insert module added classes to the images, you could target Insert-added images more specifically, but I don't think it does.

Good news for CKEditor users! The latest version (3.6.3) now align objects with "float", see details here: http://dev.ckeditor.com/ticket/7430

Also floated at older ckeditor releases...
Tested and compared.

CKEditor 3.5.2.6450
<p><img alt="" src="http://a.cksource.com/c/1/inc/img/img-leading-screen.gif" style="float: right; width: 209px; height: 140px; "></p>

CKEditor 3.6.3.7474
<p><img alt="" src="http://a.cksource.com/c/1/inc/img/img-leading-screen.gif" style="float: right; width: 209px; height: 140px; "></p>

I use it already. First step insert image and second step float it with ckeditor...

I meant: aligns images using the icon on the toolbar. This was not possible prior to version 3.6.3 ... :)

Inline styling has it's drawback.

The AutoFloat filter floats your inserted images automatically, alternating them left and right (in View mode, not during editing) ... and without using inline styles.