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.

CommentFileSizeAuthor
#8 float2.jpg104.49 KBprotools
#7 float.jpg63.91 KBprotools
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

quicksketch’s picture

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.

JohnnyX’s picture

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

Mitnick’s picture

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.

JohnnyX’s picture

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

Mitnick’s picture

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.

protools’s picture

protools’s picture

FileSize
63.91 KB

ore best

protools’s picture

FileSize
104.49 KB

multi

JGO’s picture

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

herojig’s picture

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!

JGO’s picture

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.

Mitnick’s picture

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

protools’s picture

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

JGO’s picture

I agree 200% :)

desierto’s picture

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.

mwbyrd’s picture

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?

JohnnyX’s picture

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.

sachbearbeiter’s picture

+1 for classes attached

franzkewd’s picture

+1

altavis’s picture

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.

protools’s picture

@altavis

Insert is not for images only

but more often image then file!

maybe separate project like IMAGE INSERT will be better

W.M.’s picture

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

W.M.’s picture

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

ohcray’s picture

subscribe

W.M.’s picture

@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) ?!

Todd Young’s picture

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.

W.M.’s picture

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

Todd Young’s picture

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

JGO’s picture

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

JohnnyX’s picture

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!

protools’s picture

+1 as optional feature

Todd Young’s picture

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.

soulfroys’s picture

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

JohnnyX’s picture

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

soulfroys’s picture

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

lolandese’s picture

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.

Jason K UK14’s picture

Issue summary: View changes

If anyone's still following this topic, I created seperate preset image styles in "Configuration > Image Styles". For example I created "Half page left", "Half page right" and "Half page centred" styles, then added each one as Enabled insert styles in the content type's image field settings under Insert. These are then added to the <img> tag as classes that you can float/align in your theme's CSS.

Seems to work pretty well for me.

Snater’s picture

Status: Active » Closed (won't fix)

I acknowledge this being an old issue ticket; Working on the Drupal 8 version, I deal with the Drupal 7 version occasionally only. Just as pointed out in the first comment, this is nothing that can be supported by the Drupal 7 version in a sensible way. A major problem would be that placed images would need to be tracked by the Insert module as it should also be possible to change alignment after placing the image. Tracking images is out of scope for the Drupal 7 version. (It might be possible to implement such a feature in the Drupal 8 version though.)

Several workarounds have been mentioned in the comments, most prominently either use the editor toolbar's image button to align images after inserting or create individual images styles per alignment.