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.1 (released 20 August 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"}

  <img src="{image_source}" />

{/exp:image_editor:images}
	

This will loop through all of the images that have been uploaded to this entry. The variable 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:

1. Upload the image_editor folder to the system/modules folder
2. Upload lang.image_editor.php to the system/language/english folder
3. Install the Image Editor module (Control Panel -> Modules -> Install)
4. Upload ext.image_uploader.php to the system/extensions folder
5. 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.

Email:
Code:

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

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

Comments

Leave A Comment