Stand-Alone Image Editor

The Stand-Alone Image Editor is an Expression Engine add-on that allows your site's members to upload and manage images in weblog entries from a stand-alone form.

Support can be found in the comments and in this EE forum thread.

Current Version: 1.3 (released 10 November 2008)

* Works with ExpressionEngine 1.6 and higher.

Concept

Stand-Alone Entry Forms are a great way to allow site members to create and edit weblog entries. Unfortunately, the file upload functionality in Stand-Alone Entry Forms is very limited - it simply creates a link that when clicked opens a pop-up window with the file upload screen that you would normally see on the EDIT screen in the EE control panel. This means that members can choose an upload directory and can see other files that have been uploaded. Also, the members must have access rights to the control panel, which you may want to avoid.

The Stand-Alone Image Editor solves this problem by allowing you to upload and view multiple images to a weblog entry, to delete individual images, and to limit the number of images that can be uploaded.

Find out more about Stand-Alone Entry Forms in the online documentation

How It Works

The Stand-Alone Image Editor uploads images that are in accordance with your file upload preferences, such as allowed file types, maximum dimensions and file size, etc., to the specified upload directory. It stores the names of the uploaded files in a custom weblog field.

Case 1: Upload images from a Stand-Alone Entry Form

To allow your site members to upload images from a stand-alone entry form, place the following code in your template:

<input type="hidden" name="upload_field" value="my_upload_field" />
<input type="hidden" name="upload_destination" value="my_upload_destination_id" />   // optional
<input type="file" name="file1" />
<input type="file" name="file2" />
<input type="file" name="file3" />

Change my_upload_field to the custom field name that you want the images to be stored in.

Change my_upload_destination_id to the id of the upload destination that you want to use, or leave it out to use your default settings.

You can have as many file input fields as you want, just make sure that they all have different names.

Here is an example of using this in a stand-alone entry form:

{exp:weblog:entry_form weblog="articles"}

  <input type="hidden" name="upload_field" value="images" />
  <input type="hidden" name="upload_destination" value="2" />   // optional
  Title: <input type="text" name="title" /><br/>
  <input type="file" name="file1" /><br/>
  <input type="file" name="file2" /><br/>
  <input type="file" name="file3" /><br/>
  
{/exp:weblog:entry_form}

Case 2: Upload or delete images from a Stand-Alone Edit Form

You can also allow your site members to upload or delete images from a stand-alone edit form. In other words to an existing weblog entry.

The module provides you with the code to display the images that have been uploaded for the current weblog entry. Each image has a "delete" button beneath it that removes the image from the entry (it does not delete the image from the server). If the number of images in the weblog entry is less that the upload limit then an upload button is also displayed.

To display the image editor, place the following code in your template:

{exp:image_editor:display entry_id="16" max_images="3" field_name="my_upload_field" upload_destination="1"}

The entry_id parameter is required, and specifies the weblog entry to upload the images to.

The max_images parameter is optional, and specifies the maximum number of images that can be uploaded for this weblog entry. The default value is 3.

The field_name parameter is optional, and specifies the name of the custom weblog field that holds the names of the uploaded images. The default value is "images".

The upload_destination parameter is optional, and specifies the id of the upload destination to which the image should be uploaded. The upload destinations can be found at Admin -> Weblog Administration -> File Upload Preferences. Default value is 1.

It will often be useful to place the call to the Stand-Alone Image Editor within a weblog entries tag in order to get the entry_id:

{exp:weblog:entries weblog="articles" author_id="CURRENT_USER" limit="1"}

  {exp:image_editor:display entry_id="{entry_id}" field_name="my_images"}

  {if no_results}
    You have not published any articles yet
  {/if}

{/exp:weblog:entries}

The Stand-Alone Image Editor does not create thumbnails when uploading images. To create the thumbnails using css, put the following sample code in your stylesheet:

.image_editor_thumb img {
  width: 144px;
  height: 90px;
}

Case 3: Get the images from the weblog entry

Since there can be multiple images in a single field in a weblog entry, use the following tags to get the individual images (again entry_id is required).

{exp:image_editor:images entry_id="16" field_name="my_images" upload_destination="1" limit="2"}

  {count}. <img src="{image_source}" />

{/exp:image_editor:images}

This will loop through all of the images that have been uploaded to this entry, unless the limit parameter is specified. The variable count returns the iteration of the loop (1, 2, 3, ...), image_source returns the full url of the image.

Note:

Some people have encountered issues when trying to upload multiple files. A reported solution is to turn off XSS Filtering by going to:

Admin > System Preferences > Security and Session Preferences > Apply XSS Filtering to uploaded files?

Installation

Download and unzip image_editor.zip, then follow the steps below:

Upload the image_editor folder to the system/modules folder
Upload lang.image_editor.php to the system/language/english folder
Install the Image Editor module (Control Panel -> Modules -> Install)
Upload ext.image_uploader.php to the system/extensions folder
Enable the Image Uploader extension (Control Panel -> Admin -> Utilities -> Extensions Manager -> Enable)

Download

Each individual license costs $29.95, which allows you to use the module on one installation of EE. You must purchase a license in order to download the Stand-Alone Image Editor. Once you have completed payment you will be sent a code that will allow you to download the file.

By purchasing the Stand-Alone Image Editor you agree to the license agreement.

If you have already purchased the Stand-Alone Image Editor then you can download it by entering your email and code below.

License

By purchasing the Stand-Alone Image Editor you agree to the following conditions:

One license grants the right to perform one installation of the Stand-Alone Image Editor. Each additional installation requires an additional purchased license.
You may not reproduce, distribute, sell or transfer the Stand-Alone Image Editor, or portions thereof, to any third party.
All copyright and proprietary notices within the Stand-Alone Image Editor files must remain intact and unaltered.
The Stand-Alone Image Editor is provided "as is", without warranty of any kind.
You assume all risk associated with the installation and use of the Stand-Alone Image Editor.

Changelog

Version 1.3

Fixed bug that was causing upload errors
Added limit parameter in the exp:image_editor:images tag
Added count variable in the exp:image_editor:images tag
Improved error reporting

Version 1.2

Strips bad characters from filenames of uploaded files

Version 1.1

Fixed error reporting bug that was encountered when file upload preferences were not satisfied

Comments

Don
10 December 2007

Question: is there a way with this module to limit a user's ability to upload to only one image?

Ben
10 December 2007

hi don. if you want to limit to one image in an entry form then just use one file input field.

if you want to limit to one image in an edit form then use the parameter max_images="1" as described above.

hope this helps

Corey Snipes
24 December 2007

Heya, I encountered some div wierdness in image_editor:display. It appeared the output was producing too many new divs. I addressed it by changing the DIV tags to /DIV @ lines 165 and 190 of mod.image_editor.php. Hope it helps!

Ben
26 December 2007

hi corey, the divs are added for easy styling. sounds like you figured out the solution for your particular case, thanks for posting it!

Simon Rudkin
22 January 2008

Fantastically useful addition...! Anyway to make it respect the maximum image and files sizes in a neater way? At the moment it seems to just ignore any images above the limits, and bypass the standard EE message.

Ben
30 January 2008

hi simon, not at the moment but i will definitely add this in the next release. thanks for the suggestion.

Zac
18 February 2008

Great module. Is there a way that it can be used for more than one field in one entry? When I try to do this it uploads the image to the second of upload_field.

Ben
18 February 2008

hi zac, i'm afraid it's not possible to do it on the same form. if you had two sepereate forms with one field in each then it would work, otherwise i'm afraid not.

Zac
18 February 2008

Thanks Ben. Do you think there is a way then to somehow submit the form upon uploading one image then use ajax to refresh the page to an edit page and have it ready to upload to another field... like a two step process?

Ben
18 February 2008

you could do this simply with the return parameter in the SAEF

Shawn
24 April 2008

Ben... a cool feature would be some type of upload progress bar. Like one that sparkles and turns your cursor into a butterfly. Ok, maybe not the sparkles and butterflies, but an upload bar would be a great addition!

:)

Ron van der Plas
13 May 2008

I purchased SA Image Editor but it is unclear which code I have to enter. I tried both: the transactionnumber and the number of the delivery. Since I can't find an e-mail/support I use the comments to get in touch.

Simon Rudkin
23 May 2008

Hi! Any news on some support for maximum file size? Be super-useful!

carl schulz
19 June 2008

ben,
so i read that you can't post to more than one field using this module. Im trying to get functionality to post up to 9 files on one form. Is there a limit for this? I can't seem to submit any more than 3 or 4 files. it just kicks into a blank screen. (I have turned up the character count limit on the field its going into.) Any ideas?

Ben
19 June 2008

hi carl, try making sure that the maximum image and files sizes are in accordance with those of the upload destination. that might be causing the blank screen.

Steve Crofts
26 June 2008

I need to setup a member profile system for a client and think I will be using the solspace user module, however one requirement is that the member can upload 3 images (max) about their business, does your module work with the user module?
Cheers
Steve

Ben
26 June 2008

hi steve, i haven't used that particular module so i'm afraid i can't say for sure. if you try it and it doesn't work for you then i would refund you no problem.

Simon Rudkin
03 July 2008

Quick bump on some support for maximum file size??? Cheers!

padwan
18 July 2008

Mate, your site is not XHTML valid, you've got a lot of errors (60+) and thats mostly due to the fact that you have a selector called admin_comment - you should make this a .class

Lakeshia
27 July 2008

I'm interested in buying this module. But i would like to see demo of the form before i buy it. Just to make sure it has the functionally I'm looking for. Do you have any websites url that are using your module.

cberlean
11 August 2008

hello,

I installed the module and followed the instructions to a t, but for some reason the files aren't getting uploaded at all. Any ideas?

Ben
11 August 2008

cberlean: can you make sure that the upload destination you are using is working from the EE file uploader please. perhaps the directory is not writable...?

lakeshia: i'm afraid i haven't got a public demo available, if anyone else can offer a url then that would be great!!

Adam
19 August 2008

I am a bit confused as to whether this add-on honors the max file size preference of EE's file upload preferences. IN the comments here and in the EE forums, it seems that it does not, however, on this page it says:

"The Stand-Alone Image Editor uploads images that are in accordance with your file upload preferences, such as allowed file types, maximum dimensions and file size..."

Can you please clarify this? Thanks.

Ben
20 August 2008

the latest version, 1.1, now strictly honours the file upload preferences, including max file size.

Adam
21 September 2008

Is it possible to strip out bad characters in the image name? For example, & % @ . # ! ~ (etc, etc)?

Ron
28 September 2008

Hi,
Are there upgrade instructions 1.0 -> 1.1?
I uploaded the new version but CP still says version 1.0.
Removing the current version gives the warning that it removes all stored module information so that's not wise.

Second: is it possible to get some CSS or html layout into the upload form elements? Possible into a table or div.

Ben
29 September 2008

adam: i have released 1.2 to strip out bad characters.

ron: it is safe to remove and reinstall the module. no data will be lost and this will update it to the latest version. since you add the html code for the file upload field, you can also add a class field or any CSS you want. for example:

<input type="file" name="file1" class="upload_field" />

Adam
04 November 2008

Ben
How do I only shoow one image out of the three I uploaded?
Cant get the edit to work at all for new input it will delete though.
Can I resize the images using this application? The name suggests it does? Other than that really like it

regards

Adam

Ben
07 November 2008

hi adam,

at the moment the exp:image_editor:images tag loops through all images. i will add a count parameter so that you can set a max number of iterations.

images are not resizable with the module. sorry if the name is misleading, it implies that images can be added and deleted.

Ben
10 November 2008

please update to version 1.3. this will fix any upload errors you may have encountered. it also contains a count parameter that you can use for example to limit the number of images displayed.

Avril
12 November 2008

Hi,

Where can I download the upgrade version? I've already bought a license a few months ago.

Ben
12 November 2008

hi avril, just enter your email and download code above and the download will begin, then upload and overwrite the new files to your server. in modules, click on remove and then install next to the Image Editor module.

Paul Bell
14 November 2008

Great add-on. Couple of quick questions - What happens when someone uploads a file that's already been uploaded (or a file with the same name). Is it renamed? Looking at the code, I guess that's what happens. How about, rather than appending a random number, adding a number or code based on the time of the upload - that way there's no possibility (however small) of coming up with a filename that already exists.

It's a shame that if you try and output images within a weblog entries tag the {count} parameter is {count} of weblog entries, rather than {count} of images. How about renaming it {img_count}?

Just a thought.

Paul Bell
14 November 2008

Couple of other thoughts - does this play nicely when you preview an entry - obviously there isn't an entry_id at this point, so I can't see how I'd get at the edit functionality. Otherwise, I could get preview to work well.

Another tip: rather than do your resizing with CSS, you can use the exp:imgsizer plugin from lumis.com, which creates your thumbnails automagically.

Clayton LeNear
17 November 2008

Good Afternoon,

How do you go about getting the most recent version of the module if you've already got it and just need to update? We currently do not have the login for paypal and do not wish to purchase the module again. Thanks for your help.

- Clayton

Ben
17 November 2008

hi clayton, i have emailed you

Clayton LeNear
18 November 2008

Ben,

I emailed you back at the email address you originally emailed me at. I wasn't sure if that was a non-response email address or not. Thanks for your help Ben.

- Clayton

Ty
17 December 2008

Can this/does this add-on interface with the built-in image-resizing tools that EE uses in the control panel when you upload images? We want to allow people to upload some number of images using a stand-alone edit form, but we want to make sure they're of reasonable size.

Ben
19 December 2008

no it doesn't interface with the built-in image-resizing tools, however it does respect the max filesize, width and height of images in the file upload preferences. if an image is too big then the user sees an appropriate error message.

Ron
02 January 2009

Hi Ben,

Is it possible to respect the allowed upload filetypes from the mimes.php of EE? I want users only be uploading .jpg files.

Ben
14 January 2009

hi ron, yes the filetypes from mimes.php are respected, just make sure you select All file types from Allowed File Types in File Upload Preferences (this is actually a bug in EE).

Ron
24 January 2009

OK,
I had set it to 'Images only'. Now 'All files' is respecting but allows also e.g. 'xls'!
I can live with that, thanks. Maybe in future version a specific filetype filter?

Joobs
26 January 2009

Can this be used to upload files other than images, such as mp3s or pdfs through a SAEF?

Ben
26 January 2009

yes it can be used to upload any file (filetypes can be added in EE's mimes.php file)

yann
12 February 2009

hi there, can't find a customer support number/email so I comment here... I bought this module but haven't received any confirmation/license... I sort of need this ASAP so if you could please check on it, you can contact me at the address I posted under, I bought the module with a different email account but it has the same domain name... thanks!

Lee
28 February 2009

Hi Ben, when using case 1: Upload images from a Stand-Alone Entry Form the instructions say "change my_upload_field to the custom field name that you want the images to be stored in". But that puts multiple file names in the same custom field, how can I get a file name per custom field or is there a way to reference individual file names in a single custom field? ...Thanks

Ben
03 March 2009

hi lee, the image editor module puts all of the file names into one custom field. the reason it does this is that it means you don't need to create a seperate custom field for each file the user might upload, i.e. you don't need to create 10 custom fields that the user might or might not use. if you limit the number of files that can be uploaded then it might make sense, but is not possible at the present time i'm afraid.

Chuck
23 March 2009

I keep getting this error when I try to upload an image file...

"A problem was encountered while attempting to upload your file"

I don't even see it in your language file.

Ben
23 March 2009

hi chuck, the error is coming from EE's upload files rather than the module. please ensure that your upload location is set correctly and that the folder is writable.

Chuck
24 March 2009

That was it, the folder's permissions was 755 and not 777. Thanks

Ed
07 April 2009

Hi-

Can you please confirm whether this Image Editor works in conjunction with your "LogMeIn" addon? Before I purchase, I need to know whether they're compatible. I need to create a form that allows non-member site visitors to upload an image file.

Thanks

Ed
07 April 2009

BTW, I should add that for my application, I will need to use ImageEditor and LogMeIn only for anonymous image posting to an ENTRY form, not an edit form. So I won't need to correlate image uploads back to a user, etc.

Thanks again for your help.

Ben
10 April 2009

hi Ed, yes it is compatible with the LogMeIn plugin. it should work for you with no problems.

Sherrills
21 April 2009

I'm trying to get this plugin to work with Lumis' imgsizer and having no luck. Has anyone else figured out how to get this to work? If so, could you share your code / walk us through the process. That would be a huge help!

Brandon
28 April 2009

Hi,
I bought this plugin tonight and cannot get it to work. I've tried the most simple integration that i can think of, but always get this error on submission: Image Uploader Extension: upload_field must be submitted in form

I am sure i am doing something wrong and would love some guidance.

Thanks!

Ben
28 April 2009

brandon, you need to follow the examples above and have this line in your code, changing upload_field to a relevant value:

<input type="hidden" name="upload_field" value="my_upload_field" />

About

Projects

Personal