Thank you for purchasing my script. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
About
sEditor is build to replace need for Photoshop when you want to add some simple efects to your image.
For instance, if you just want to pixelate or blur part of the image, or add a pointer/marker on a image, or add some text on it, or add a frame, or apply some effects similar to instagram, or just want to crop part of your image, or... then sEditor is perfect tool for you.
Requirements
This script require PHP 5.xxx and PHP GD library enabled (it is enabled by default on most servers)
If you want to use pixelate effect, you must have PHP 5.3 or above
and that's it
How to install
Installation is simple and easy. This script is working only with images and therefore is not needed to install any database files.
Unpack the zip package into folder where you want to place sEditor.
Leave the folders structure intact, and the write permission to folder /temp
To use the script, point your internet browser to sEditor folder, and you are done.
And that's it!
Settings and customization
sEditor is using three types of effects:
PHP effects
These efects are available from PHP and they can be founded under top menu by moving mouse to first button from the left that has description 'Effects'.
List of this effects is placed in $simpleEffects array in settings.php file, if you want to disable some of them simply comment line which is representing effect:
// simple effects
$simpleEffects=array(
array('value'=>'Pixelate','name'=>'Pixelate'),
array('value'=>'Pixelate-out','name'=>'Pixelate outside'),
array('value'=>'Negative','name'=>'Negative'),
array('value'=>'Greyscale','name'=>'Greyscale'),
array('value'=>'Greyscale-out','name'=>'Greyscale outside'),
//comment out line to disable some of effects
//array('value'=>'Blur','name'=>'Blur'), //-> this effect won't be available in sEditor
array('value'=>'Blur-out','name'=>'Blur outside'),
array('value'=>'Brightness','name'=>'Brightness'),
array('value'=>'Contrast','name'=>'Contrast'),
array('value'=>'Colorize','name'=>'Colorize'),
array('value'=>'Emboss','name'=>'Emboss'),
array('value'=>'Text','name'=>'Text'),
array('value'=>'Crop','name'=>'Crop')
);
Adding png watermarks
To add a png watermark sEditor uses simple .png transparent images which are placed in effects/ folder.
Effects folder can contain as many subfolder as you want.Those sub folder are ment to be as a group of similar png efects, for instance: Arrows, Pointers, Logos... etc. In this example we have Arrows, Frames and Badges
Name of every effect subfolder is displayed as category option in menu bellow the main editing image in sEditor, and pressing on one of them all png images will be loaded as available effects.
Therefore if you want to add more transparent images (png effects) to your sEditor, just create transparent png image with some content (curved arrow, map pointer, your logo...) then create a sub folder in effects folder and place your png file(s) in that folder. Automatically name of that folder would appear in lower menu as an option which you can use containing all of png images from it.
If you want to disable some of png effects just delete them from efects folder or subfolder.
Important: if you want to allow your user to change the color of png effect while it is used in sEditor, content of your png image/effect must be black. Take a look in Frames and Arrows folder that came with this package and you will se example png images.
Compiled effects
Compiled effects are defined set of actions that can be applied to image with one click. They are placed under Default Effects option in menu bellow the editing image.
List of those effects is located in $compiledEffects array placed in settings.php file.
Some of them or all of them can be disabled simply by commenting out line which representing one effect (same as in PHP effects described above
// compiled effects comment if you dont want to use them
$compiledEffects=array(
array('value'=>'Rosie','img'=>'web_images/compiledEffects/Rosie.jpg'),
array('value'=>'Patty','img'=>'web_images/compiledEffects/Patty.jpg'),
array('value'=>'Juliette','img'=>'web_images/compiledEffects/Juliette.jpg'),
array('value'=>'Sonny','img'=>'web_images/compiledEffects/Sonny.jpg'),
array('value'=>'Oddie','img'=>'web_images/compiledEffects/Oddie.jpg'),
array('value'=>'FilmFrame','img'=>'web_images/compiledEffects/FilmFrame.jpg')
);
Other settings which you can change in settings php file are:
How to save edited image
sEditor can save edited image in two different ways: overwrite original image and save as new image
Overwrite original
This option can be used, if you want to add some effects on existing image. For example, if you want to pixelate someones face, or to add a marker on some part of image, or you can allow your users to that after they upload theirs image.
If you want to overwrite original image, the image MUST be loaded in sEditor with relative path and NOT with absolute path.The folder where that image is placed must have right read and write permissions
For instance, if you want to edit and overwrite image from previous example you must pass the URL variable to sEditor like this:
www.yourwebsite.com/sEditor.php?URL=../image_directory/MAG0416.jpg
After you finish with editing image, just go to top menu->save button->overwrite original-> save
If everithing goes right, you should get this pop-up message:
"Original image has been overwritten!"
and if script s not able to overwright the original image you will get next message:
"I am not able to overwrite original image!" - > if you get this error it means that permissions on original image or folder are preventing script to overwrite the original image
Save as new image
If you want to save edited image as new, it is not needed to load image with relative path, this options is not required. You can use relative or absolute path, because original image will remain intact.
To save edited image as new one, go to:
top menu->save button->Save as new image->Insert new name for image->Save
and image will be saved on your computer. After that you can upload this image to your web site
How use it in my project
sEditor needs to have image URL passed in varible called: URL.
You can use index.php which has field to enter image URL or you can just pass your own URL to sEditor like this:
www.yourwebsite.com/sEditor.php?URL=www.yourwebsite.com/image_directory/MAG0416.jpg
For instance, you can add a link next to image on your site which can call the sEditor and allow your user or administrator to edit that specific image:
<a href="www.yourwebsite.com/PATH_TO_sEditor/sEditor.php?URL=www.yourwebsite.com/image_directory/IMAG0416.jpg"> <img src="www.yourwebsite.com/image_directory/IMAG0416.jpg" /> </a>
When the image is visible in sEdtior, you can start editing.
By working with image, original image wont be edited until you choose to save option from main menu.
Javascript files
JQuery - http://jquery.com
JQueryUI - http://jqueryui.com/
Color picker - www.eyecon.ro
Jcrop - http://ttps://github.com/tapmodo/Jcrop
scrollingCarousel - www.convergent-evolution.co.uk
Some graphic elements:
Thomas Bossée - http://dribbble.com/shots/306239-Sticky-Butterscotch-UI-Kit-Free-PSD