An easier way to add images to posts (a complete rewrite of img_assist)

Benshell and I plan to merge many of these changes into the current img_assist module for the upcoming 4.7 release. We both agreed that there's no benefit in yet another inline image mod.

The concept of co-developers (i.e., other user's with CVS commit blessings) has worked very well for me, with TinyMCE being my first attempt. I hope to do more of this, especially with the ecommerce package. (Sorry for getting slightly off-topic)

Please use my contact to get in touch.

Anyone else want to pony up a bounty to have this backported to 4.6? Unless, Ben and Matt, you can let me know if this is not possible?

hello Benjamin,
Your rewrite of img_assist is exactly what I want. Thanx a lot !
Unfortunatly, it doesn't work. When I push add an image (the camera of the first version of img-assist is no more here. Normal ?), a pop-up opens but in it, there is the message page not found.
I think that I did not install well.... But don't know how to fix the problem.

Thank you very much for your help !

Lisadol

OK, I've downloaded your new version and unzipped the file. I'm a little confused regarding the contents. Obviously the unzipped drupalimage folder goes in the plugin folder of tinymce. No problem there.

Now, here is what I have.

tinymce.module replaces the same in the /modules/tinymce folder.

img_assist.module,
image_assist.js
image_assist.css all go in the /modules/image_assist folder

Where do the following go:
tinymce.js - someplace in the tinymce folder, but where?
textarea.js - beats me on this one. Where does it go?

Additonally, in the install.txt file, for 4.6 you reference the following:

"There is section in this function (starting around line 282
of tinymce.module) that says:

switch ($theme_name) {
case 'advanced':
$init['extended_valid_elements'] = 'a[href|target|name|title|onclick],img[class|src|border=0|alt|title|width|height|align|name]';
$init['theme_advanced_buttons3_add_before'] = 'tablecontrols,separator';
$init['plugins'] = 'drupalimage,table,emotions,fullscreen';
$init['theme_advanced_buttons3_add'] = 'drupalimage,emotions,separator,fullscreen';
break;"

But, in the tinymce.module file included in your zip file, these lines are included:

"// Add some extra features when using the advanced theme.
switch ($theme_name) {
case 'custom':
$init['extended_valid_elements'] = 'a[href|target|name|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]';
$init['plugins'] = 'drupalimage,emotions';
//$init['theme_custom_buttons1_add_before'] = 'drupalimage,emotions,separator,';
//$init['theme_custom_buttons1_add'] = 'drupalimage,emotions,separator';
break;"

Are the changes in the install.txt file to be made here? I am bit confused and that confusion has made both image_assist and tinymce inop for me.

Thanks in advance for the help.

Where is the direct link to download the modified version of img_assist?

-zach
------------------------
harkey design

Could someone explain why Image.module and img_assist.module are seperate any benefits of doing it so? - from user/usage point of view.

also looking into the cvs. (4.7) that image.module is not one of the default, again is there any benefit of it?

-imho- image handling is not optional for most websites or cms's but essential part of it.

i would extent the necessity to a media.module, sections handling -image, video and sound combined to be step ahead from all other CMS' or CMF's or whatever you define in an opensource 'product'

Thanks benshell! Finally a image inertion module that actually works! You are my god.

Kindest Regards,

gtoddv

I just submitted a feature request (I hope I did it in the right spot) that says:

As ejort mentions here, I'd love to have a checkbox that gave the option to "Delete original image" (the one that you're uploading) so I/Drupal user can just use the resized/resampled image.

Another commenter suggested, "Just resize before upload." which I know how to do, but most of my clients (Drupal users) don't know how to do and they're going to upload their 2 MB images from their digital cameras and wonder later why (1) their servers are full, (2) the images load slowly, (3) you get the idea.

Thanks,

- Bradley

From what I see here this module is being developed for 4.6? Is that correct?

Will it be possible to use this in 4.7 when it arrives?

wellsy
like someone else here said "always use a test site"
permit me to add "backup your database regularly"
orchidsonline.com.au

Benshell, I really appreciate the work you are doing. As a designer, not a programmer, I am kinda at the whim of your efforts.

Adding a way to get images into posts easily is probably the biggest drawback of Drupal for me at this time. Sure I can use some code to get the images I have to show in posts, but that is a real pain.

What I would like is to have an image float left and to have text wrap around it nicely. I would also like all images to be 20% as wide as the column I am working with, and when you click on them, a full size picture of the image opens in its own window.

for a live example of what I am looking for, look here: http://main.greasyfur.com

Obviously I have to tweak this code for every picture. It also has the disadvantage of having the browser redraw the picture smaller, rather than GD.

I loaded your version of image assist, I was able to get the window with the thumbs to come up, but when I click "insert" nothing happens. Have I done something wrong or stupid? I also had big problems with the original image_assist, which I could not get to do what I wanted at all.

I am using drupal 4.6 on a server hosted by hostgator.

Just a couple of requests.

1. Can the drop-down box be the list of image galleries instead of my images (and if configured taxonomy terms)?

2. Can we have a text box for configuring the padding for the text wrap?

Thanks again for some great work. This is the type of stuff that will really make drupal appeal to the greatest number of folks.

gtoddv

First of all, great work. I am so into this. My users are already thanking weeping in joy.

After some testing, the main item that keeps coming up is the upload form. The fact that it uses the main stylesheet but not the actual page template causes most of my layouts to get munged up. Also, the pop up window is just too small (and not resizable) to accomodate the entire image node creation form.

Tell me what you think of this idea: Instead of presenting the full create image node form in a small popup window, what if it presented a greatly simplified on the fly form that only had the absolute minimum:

1. Title
2. Description
3. Image upload button

If the user wants to specify Authoring information, Options, User comments, path aliases, Input Formats, Attachments, Menu OTF, etc. he can use the normal 'create image' option on the website, and don't forget he can always go back and make changes to the other fields later anyway. But otherwise the streamlined form should just use the defaults without presenting them.

For the image galleries I suggest a default img_assist gallery that all images are posted to at first (they can always be moved later). Maybe the user could even specify it in the img_assist settings?

-zach
------------------------
harkey design

Have it working fine on one site, but on another site operating off the same code base I'm getting errors relating to not finding "node_revisions" table - I think this has to do with the fact that I was using the old version of img_assist on this site, but had not used it at all on the site that works. But neither site has a "node_revisions" table. Looking at the image_assist.module source, this appears to be related to legacy code, but I'm not quite sure what to do about it. Would really like to be using this, the integration with TinyMCE is so much better. Any suggestions would be greatly appreciated.

Also, is there a newer version of your module available for download?

Thanks,
T

I just made an update so that img_assist will work without clean URLs. No need to upgrade unless you need this.

As far as I see it, the ability to easily choose/upload images on the fly is the single most important feature lacking from Drupal (It's almost a dealbreaker).

I've been testing this version extensively and here are my thoughts, and notes from watching over the shoulders of 12 brand new users (a design class I teach) one at a time as they attempted to place an image (followed by a list of possible improvements). Note: I am not using Tiny HTML Area, but I am using Markdown.

Overall. I like the ability to generate a new sized image on the fly, but not if it comes at the expense of the defaults. My users are constantly breaking my layouts. The best thing about the image module is that the admin/theme designer can determine an appropriate thumbnail and preview size (exactly, to the pixel) for the layout/theme/node, but the user doesn't have to think about it. They just upload whatever sized original they want and the preview size fits perfectly. (I tell them as a rule, don't upload anything larger than 1000px wide or it'll take forever to upload, and that does the trick.)

The problem with the current implementation is that in most situations, the user is going to want to use the default sizes, and this makes it very hard because they have to manually enter it in every time. Which means they have to go look in their notes and see that it needs to be, for example, 465px wide for a perfect fit.

The problem is they don't do this. They either just leave the default values of 200 x whatever, (which are hard coded into the module so even if I change these values in the code so that it defaults to my preferred size, all my sites (30 or so in a multisite setup) inherit the same value and they all have different size constraints. Even if they do take the time to enter the appropriate value that I specified for the thumbnail for instance, instead of using the existing thumbnail, it creates a duplicate.

I have spent many hours considering the best way to handle these things and here is an detailed list. I realize some of these aren't exactly quick fixes and I'm trying to determine the best way to move forward myself, but nonetheless here's the list:

1. The add image window should not create its own thumbnail if it can use the default thumbnail image module has already created (since it is mandatory anyway).
2. Size should offer (either by dropdown or radio group) all of the image sizes that have been specified in the Image settings first, with the last choice being 'other'. If 'other' is selected, it could activate a previously disabled fieldset where the user can specify the width and height. (It's my opinion that the only time img_assist should generate an image is if this is selected. Otherwize it should use the existing versions. It's a unecessary to have so many derivatives of the same image. Some of my images have like 7 sizes.)
3. The pre-selected default should be 'thumbnail' (or pref in img_assist settings). The 'other' fields should not be pre-filled in with any default values - like they are now with 200 x 200 - because there is no way to edit or specify these values.
4. 'Align' should offer at least left, right and center(no-float), and these should be implemented through css classes (e.g. .image-left, etc.) located in the img_assist.css instead of the current method of inline styles. This would allow theme designers to specify additional styles for inline images (e.g. margins and padding on the floats, etc.)
5. An alternative route would be to rename 'Align' to 'Layout' and let the user choose from a list of classes that are defined in the stylesheet.
6. All Popup windows should(must) be resizeable (frames too).
7. Do we have to use frames at all? I would love to get the whole thing in one page, and use fixed positioning for the header and a scrolling div for the thumbs or something. You've already reduced one frame it seems.
8. Bonus feature: Provide the option for the image to be a link, and even provide options for the target. For example (very rough):

   When clicked, the image should:
   [x] Do nothing (not a link)
   [ ] Go to the image's standard node view (preview size)
   [ ] Open original in popup window
   [ ] Go to [http://___________________________]

I still haven't addressed the taxonomy/gallery situation, but I wanted to get these ideas out there. If it would be helpful, I am willing to comp up some static UI screenshots to fully flush out the flow. I would also love to help in any other way I can. I'm kind of confused about how this version is being developed. Is it officially been absorbed into the existing img_assist module? Is it in the CVS somewhere? If I make some modifications to the code, is there a place where I submit a patch?

-zach
------------------------
harkey design

This looks very nice. Well done!

An idea that you may want to look into i would love to see done, instead of popping up a new window which the user has to juggle, why not try putting it on the same page using a collapsible fieldset with an IFrame in it. Its not a too distant jump from what you already have now ...

I think we really need an upload status indicator. It isn't uncommon for an image to take a full minute to upload and during this time there is no feedback to the user, who is likely to think the upload failed or their browser froze.

It doesn't have to be an accurate progress bar, just some kind of message that says, 'image uploading, please wait.' and maybe a small looping animation. It would also be cool if we could disable the submit button (gray it out).

I really think this is an important usability feature.

Now that I think about it, is this something that should be implemented in img_assist, or probably image/upload module, or maybe even Drupal core?

-zach
------------------------
harkey design

Here's a one-line-patch to make the link-attribute work. It links to the image node if |link=1| or any other value. Using only |link| doesn't work. You might also use the $attributes['link'] as a url easily, that is, treat this attribute as an url-string not a boolean value. I.e: |link=http://some.url/|

Unfortunately, I am *also* encountering this problem - I can't get the drupal image camera to work, and if I enable the add image text link and then click on the text link to insert an image, I get a window from which I can choose my image, but when I click "insert" nothing happens.
Any tips on how to get the drupalimage plugin working?
Or how to get the text link working?

I am using drupal 4.6 hosted on a Windows Brinkster account (which I cannot recommend), not using clean urls.

Michal Ehrman
Boutique - Online Fashion Magazine
http://www.boutique.co.il

how difficult would it be to make it also compatible with images uploaded to a menalto G2 gallery ?

also, i found a rounding error: i uploaded image.jpg using this new img_assist module, changed nothing to the suggested view size (200x155) and got the following results:

original size = 1642 x 1276
img_assist preview size = 200 x 155
img_assist view size = 199 x 155

it would also be great to have a single file for the preview generated by the image module and the one generated by the img_assist module

regards,
thx for this wonderful module

I could write a short book about how incredible this aspect of things is (tools to make it easy easy easy for the "average end user" or "web site owner" or contributor to put text and graphics on the internet), but I'll try to refrain... Other than to say, as others have mentioned regarding the general topic, there probably isn't anything more central or basic when it comes to the "comfort level" of that "average end user." And, from what I've seen, img_assist (with the image.module) takes care of the graphics part of that equation in a way that should make it possible for even those nearer the "average end idiot" end of the spectrum (people like me), to be able to include images with near-zero knowledge (of anything) and one eye closed...

Exellent job!

I also want to say that this particular thread is one of the best I've come across on the Drupal site. I'm sure there are many more like it, but everyone who's contributed to it ought to know it's: A) an impressive display of intelligent collaboration (a nice mix of things from "experts" and "not so experts," and good all around input from all concerned); and B) one that I found particulary helpful.

For example, Artem's "Installation screenshots" and "no-brainer" instructions made it possible for me to get the whole thing downloaded, installed and, wonder of wonders, working in something like 15 minutes... Not only that, but after installing everything, something seemed not quite right. Mainly, I couldn't see/find the options to position images on the right or left. After another 15 minutes of wondering and looking more closely, I figured out I ought to download the newer version from the page linked in Benshell's initial post. Made that switch and presto! All fixed.

And here's what's "impressive" about all that: As mentioned, I'm new to Drupal, don't come close to understanding it yet (taxonomy, vocabularies, books, nodes, etc.), and while I get the concept of modules and have looked them over (a real candy store!), I hadn't dared mess with any of them. So, being a near-average end idiot, it's only natural that the first thing I'd try to figure out is how to make it easy for people to insert graphics into whatever text they'd be adding to whatever sites I'd put together with Drupal... Never mind site structure, linking, etc. (see taxonomy, etc. above), let's just jump in here and see about getting a photo into a "story!"

And - thanks to img_assist and this thread (and Artem's guide for those in a hurry) - it looked like it might be, and, more importantly, actually was, a snap. So thanks everybody! This has been a good day for at least one Drupal beginner that will make things a LOT easier from here on out, no doubt (now that I've got this module installation things down and all - "Piece of cake" ;).

Okay... Pardon the length. I must be excited. And for all that, I do have a question that pertains to the images.module galleries... While I understand the necessity of the galleries being there, how can I set things so they don't show up as part of the "visible" site? That is to say, is it possible to set galleries to "invisible" so their only purpose is to serve as a "background repository" for the images placed via img_assist and not as "content items"? (If that makes sense.)

Also, is it possible for people to edit an image (right or left placement, description, etc.) after it has been inserted? Is there a way to bring it's img_assist "file" back up to edit the same way a story can be editied or is it best/simplest to just delete the code from the "story" and "re-add" the image? (If that makes sense).

I made a small update today to my version of img_assist:

I also moved the float left/right CSS into the img_assist.css file, per an earlier suggestion. That required me to also set up img_assist.css to be referenced from every page (it wasn't this way before).

Second, I fixed a bug that was preventing the editing of existing img_assist tags with TinyMCE.

And finally, I added a "link" field to the img_assist form (which affected several javascript files including the drupalimage plugin for TinyMCE). The PHP code in theme_img_assist_inline() controls how the link string is used. Right now it's setup to link to the URL specified, if the link string uses a proper URL format. It links to the image node if the link string is anything else. And of course there is no link if the string is blank. More advanced functionality can be added later, but I wanted to get the basic linking functionality into the code now.

So, like many other drupal devs, I'm moving some sites to 4.7. I've come around to the rich text editor/image management phase of the deployment, and, lo and behold, img_assist is broken.

We desperately need a well-supported image manager. TinyMCE is the editor of choice, so there should be no gotchas when running them together. Moxiecode has a good one that is, or soon will be, integrated with drupal (authentication etc). ATM, I'm willing to pay $40 for something that works. Long term, though, let's get this problem solved!

Concerns:

• This code should be in CVS.
• Is this going to be merged with the original img_assist? The screenshots look nice, and there seems to be lots of positive feedback.
• There is an effort to port the original img_assist to 4.7. If this is the new img_assist, then we should be porting it to 4.7.

Benjamin, Matt, what's the plan?

Respectfully,
Eric D