Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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.
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.
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.
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.
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?
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.
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.
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.
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
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.
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) ?!
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).
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!
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.
The AutoFloat filter floats your inserted images automatically, alternating them left and right (in View mode, not during editing) ... and without using inline styles.
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.
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.
Comments
Comment #1
quicksketchGenerally 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.
Comment #2
JohnnyX CreditAttribution: JohnnyX commentedOk, 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
Comment #3
Mitnick CreditAttribution: Mitnick commentedWhat i did was to add an additional class on my style.css - left-align/right-align.
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.
Comment #4
JohnnyX CreditAttribution: JohnnyX commentedHello 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
Comment #5
Mitnick CreditAttribution: Mitnick commentedHey 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.
Comment #6
protools CreditAttribution: protools commentedsub
like this http://drupal.org/files/issues/media_float_0.jpg
Comment #7
protools CreditAttribution: protools commentedore best
Comment #8
protools CreditAttribution: protools commentedmulti
Comment #9
JGO CreditAttribution: JGO commentedPlease 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 :|
Comment #10
herojig CreditAttribution: herojig commentedInteresting 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!
Comment #11
JGO CreditAttribution: JGO commentedherojig, 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.
Comment #12
Mitnick CreditAttribution: Mitnick commentedProtools, can you please show us how did you do this. Thanks.
Comment #13
protools CreditAttribution: protools commented@MitNick - it's not on drupal ... :) but very nice like idea for insert :)
Comment #14
JGO CreditAttribution: JGO commentedI agree 200% :)
Comment #15
desierto CreditAttribution: desierto commentedI 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.
Comment #16
mwbyrd CreditAttribution: mwbyrd commentedWhat 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?
Comment #17
JohnnyX CreditAttribution: JohnnyX commentedMaybe 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.
Comment #18
sachbearbeiter CreditAttribution: sachbearbeiter commented+1 for classes attached
Comment #19
franzkewd CreditAttribution: franzkewd commented+1
Comment #20
altavis CreditAttribution: altavis commentedIt's not so crucial. Can't you just prepare two styles in any WYSIWYG editor?
In ckeditor it's like:
and corresponding css styles:
Insert is not for images only.
Comment #21
protools CreditAttribution: protools commented@altavis
but more often image then file!
maybe separate project like IMAGE INSERT will be better
Comment #22
W.M. CreditAttribution: W.M. commentedI 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
Comment #23
W.M. CreditAttribution: W.M. commented@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.
Comment #24
ohcray CreditAttribution: ohcray commentedsubscribe
Comment #25
W.M. CreditAttribution: W.M. commented@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) ?!
Comment #26
Todd Young CreditAttribution: Todd Young commentedWYSIWYG 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.
Comment #27
W.M. CreditAttribution: W.M. commentedLet'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).
Comment #28
Todd Young CreditAttribution: Todd Young commentedI 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...
Comment #29
JGO CreditAttribution: JGO commentedI completely agree, some other modules support this like imagepicker and is very handy. Why not this module ??
Comment #30
JohnnyX CreditAttribution: JohnnyX commentedHello quicksketch,
no chance to add it as optional feature (enable/ disable in configuration)? Would be really great and push insert on the top!
Comment #31
protools CreditAttribution: protools commented+1 as optional feature
Comment #32
Todd Young CreditAttribution: Todd Young commentedIt 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.
Comment #33
soulfroysGood news for CKEditor users! The latest version (3.6.3) now align objects with "float", see details here: http://dev.ckeditor.com/ticket/7430
Comment #34
JohnnyX CreditAttribution: JohnnyX commentedAlso 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...
Comment #35
soulfroysI meant: aligns images using the icon on the toolbar. This was not possible prior to version 3.6.3 ... :)
Comment #36
lolandese CreditAttribution: lolandese commentedInline 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.
Comment #37
Jason K UK14 CreditAttribution: Jason K UK14 commentedIf 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.
Comment #38
Snater CreditAttribution: Snater commentedI 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.