Fotoedita - A complete photo editing website script

Fotoedita is a complete photo editing website you can set up in less than 1 minute since all you have to do is edit one configuration file and upload the script. Thank you for purchasing this script, I hope this documentation will help you set up your very own photo editing website within minutes.
It features over 100 filters (70 GD filters and 40 imagemagick filters) and a seamless usability using Jquery, allowing users to easily apply effects to all the images they uploaded without having to reupload the same file again.

If you have any issue or question, feel free to visit Codecanyon and either contact me from my profile or post a comment. Don't foget to rate this product if you think it is worth your hard earned money, this will be very much appreciated.

Update :
Added ImageMagick support and 49 ImageMagick filters. Please read the "About ImageMagick" Section if you are upgrading or doing a fresh install.
Adding two cron files to empty the uploads and the photo directory
Fixed a responsive issue
Fixed a vintage filter error

1 minute install, no database required
That's right ! Just edit the configuration file, upload the files and your website is up and running

Mobile & tablet friendly
options allow you to force smartphone camera or not, making it perfect for a webview app

Bundled with more than 100 filters
From classic filters to photo editing, vintage and montage.

Usability

Translation ready (both text and SEO url)
Edit the language file, rename folders and in less than 5 minutes, you can have a fully SEO compliant website in any language

Random filename
Each image generated can have a random filename such as yourwebsite-123.jpg, DSC-256.jpg, filtername-56.jpg

Advertising & Analytics
Just paste your code and your Analytics code in the configuration file

Watermark
You can enable or disable the watermark easily

SEO
Mod rewrite, breadcrumbs and proper headings* will help your SEO

Share buttons & Social network ready
All pages are optimized for Facebook and Twitter
 

When a user visits your website, the script will build the interface by using the glob function (since no database is required) .

In that case, we have the following folder structure on our server : 

And inside classic-filters, the following :

and inside the artistic folder :

 

Once a user clicks on a filter, he will be redirected to the filter page which will display a "template" image :

Furthermore, the link to the filter page will "open" the left menu to the proper subcategory (in that case "color") using Jquery :

Now once the user clicks on the upload button, the file is stored on the server, the filter is applied automatically and the original uploaded image is "stored" under the upload button.

Also, you will notice a set of items appearing below the image :

These allow users to :

- download the file

- generate a page to share on Facebook or twitter

- save the image to "my images" :

Saving the image to "my images" allow the to apply a filter on a picture which already had a filter applied to it.

 

Important : This script requires a PHP 5.2+ server with GD bundled and Mod rewrite enabled. It requires ImageMagick as well but if your server doesn't support ImageMagick, do not upload the ImageMagick filters. Most hosting companies provide their customers with this set up even with basic plans but make sure your server meets the aforementioned requirements

 

Important : This script is SEO friendly, hence it will not work in a subfolder.**
  1. Extract the content of the zip file.
  2. Open the configuration file : /inc/config.php
  3. For now, just edit the first variable and change
    'fotoedita' to 'your website'
  4. Upload the content of the folder at the root of your website except for the admin.php file (delete it from your server if you uploaded it, see the "custom images" section for more information).
  5. Right click on the following folders : photo, result, uploads and set permissions to 777 or 755 (depending on your host)
  6. Go to your website

That's pretty much it, your website is now up and running !

Folders :

css : skeleton and style files

effects : png files for vintage effects

images : UI images (logo, upload button, icons)

inc : see below

js : required js files

photo : this is where processed pictures are stored

props : png files for montage effetcs

result : this is where temporary file generated by some vintage effects are stored

uploads : where user uploaded pictures are stored

Inc folder :

filters : in this folder you will find the en folder containing all the filters

lang : in this folder lies the en.php file used for translation

append.php : called when saving an image to your collection

config.php : main configuration file

config-(index, cat, subcat, filter and page).php : this file creates the left menu and the main content of the pages using glob.

filter.php : main file which is used to apply a filter

store.php : this file allows you to store which picture has been used

upload-local-file.php : the main upload file

Root files :

.htaccess :

admin.php : delete this file unless you want to generate your own template images

cat.php : this file is used to display the filters of a category

fotoedita.jpg : jpg image (used by facebook for instance)

index.php : main index file displaying all items

item.php : this file displays the filter and the upload button

page.php : displays the permalink page

robots.txt : robot file

subcat.php : this file is used to display the filters of a sub category

You will find a directory named "cron" in the zip file, with two files (one to empty the uploads folder, one to empty the photo folder). Rename them and edit them so that they find the correct path to the directories. Use your crontab manager to point to these files if you need to empty the folders on a regular basis.

If you are upgrading :

1. Open the config.php file and set your ImageMagick path at the bottom

2. Upload filter.php (in the inc folder)

3. Upload the inc/en/filters/image-magick/ folder & the props folder

For a fresh install :

Open the config.php file and set your ImageMagick path at the bottom and then upload everything

Fotoedita allows you to customize many aspects, from the width of processed pictures to adding your google analytics tracking code.

Please read carefully all the options found in the configuration file (inc/config.php)

<?php
/*website title*/
//your website title
$websitetitle = 'fotoedita';

/*language*/
//this will define which folder the filters are stored in, and which language 
file will be used
$language = 'en';

/*maximum number of items shown on the index page*/
$limitindex = 10;

/*maximum number of related items shown on the filter page, under the result*/
$limitcarousel = 8;

/*introduction text on index page*/
//show intro text ?
//0 = no
//1 = yes
$showintro = 1;

/*breadcrumbs index*/
//show breadcrumbs on index page ?
//none = do not show
//block = show
$breadcrumbindex = 'none';

/*display menu child items*/
//use block to display all menu child items (icons) or none to hide them
$displayallmenu = 'none';

/*max width of uploaded image*/
//this allows you to resize uploaded images
$uploadimagesize = 900;

/*max width of generated thumbnails*/
//this allows you to resize thumbnails (of uploaded / copied files)
$thumbnail_width = 150;
$thumbnail_height = 150;

/*quality of uploaded JPG file*/
$imagequality = 100;

/*quality of output JPG file*/
$outputquality = 90;

/*maximum width of output file*/
//this allows you to resize the output
$imagesize = 800;

/*random filename prefix*/
//output files can have a random prefix or not (see inc/filter.php)
//0 = no
//1 = yes
$randomprefix = 1;

/*filename prefix*/
//if $randomprefix is set to 0, then the following wll be used
$thumbprefix = 'fotoedita-website';

/*watermark*/
//use watermark ?
//0 = no
//1 = yes
$watermarkoption = 1;

/*upload*/
//force camera for mobile ?
//0 = no
//1 = yes
$camera = 0;

/*google analytics*/
//enable google analytics ?
// yes = 1
// no = 0
$enablega = 0;

//if set to yes, enter your tracking code below
$ua = 'UA-xxYxx-xx';

//advertising html code
$adcode = '<img src="/images/ad.gif">';

/*admin*/
//if you want to generate cover, thumbnail and icon images for your filters 
with your own image, set this to 1
//it is advised to do this locally (i.e. with WAMPSERVER) and then upload 
the filters/language/ folder on your server.
//if you do this online, make sure your delete the admin.php file 
from the root and set the following to 0.
$isadmin = 0;

/*Imagemagick path*/
//Only if you want to use some ImageMagick filters
$env_vars = explode( ':', $HTTP_ENV_VARS['PATH']); 
$env_path = $env_vars[1]."/usr/bin/convert"; 

/*do not edit below*/
include('lang/'.$language.'.php');
?>

 

In order to use your custom image instead of "flowers" picture, open the configuration file and change

$isadmin = 1;
It is advised to do this on your computer using WAMP or EasyPHP for it will be faster and safer (but you can do this on your server by adding a "deny from all" rule (except for your IP)).

Make sure the admin.php file is at the root of your folder.

Go to your website (for instance if you are running WAMP, this should be http://localhost:8080), select the first filter from the top left menu and upload your template image.

You will notice that a new icon appears above the image, click on it and it will generate three images (small png icon, medium sized square image and complete filter preview) which will replace the "flowers" template images.

Once you are done, delete the admin.php file and upload the content of the filters folder to your server.

 

 

Fotoedita uses a separate php file to make your translation fast and efficient, you can find the file at :

inc/lang/en.php

This file (en.php) is the english file, so if you want to translate your website to french :

  1. rename en.php to fr.php
  2. make the necessary changes (charset, keywords, etc.)
  3. open inc/config.php and change the language parameter to fr
  4. go to /images/ , add the upload image you want to use and rename it : upload_fr.png

Since all the structure is based on "folders" and "files", you can also translate the categories/subcategories and filters names for SEO benefits !

Here is a for instance :

The english version has a black and white filter you can access through this link :

http://en.fotoedita.com/classic-filters/artistic/black-and-white.html

The french version also has a black and white filter you can access through this link :

http://fotoedita.com/filtres-classiques/artistique/noir-et-blanc.html

The english version (the one you have) has a folder (located at /inc/filters/en/) named classic-filters, a sub folder named artistic and a set of jpg, png and php files for black-and-white.

If you want to create a french version of your website, all you have to do is rename :

  1. the "en" folder to "fr"
  2. the "classic-filters" folder to "filtres-classiques"
  3. the "artistic" folder to "artistiques"
  4. the "black-and-white" files to "noir-et-blanc"
  5. Open inc/config.php and change the language parameter to fr
Note : Translating en.fotoedita.com (english) to fotoedita.com (french) took less than 5 minutes.
By all means, make sure you use url friendly characters (no accents, no space)***

If you have any question feel free to go to my profile page and send me an email.

* : The index page uses an empty H1 tag which grabs the alt attribute from an image tag, this is not compliant with W3C and SEO guidelines, so feel free to replace the image with some text. Most of the time the alt value is taken into consideration though.

** : Using this script in a subfolder goes against SEO best practices, so it is advised to use this script as a stand alone website (or create a subdomain).

*** If you really need to use accents, umlauts and other characters, you can use a conditional statement:

Open inc/config-index.php

Find :

if($count<=$limitindex) {
                $indexcontent .= '<li><div class="indexblocks"><div class="imagesize"><a href="/'.$folder.'/'.$subdir.'/'.$myfilterpng.'.html#'.$subdir.'"><img src="/inc/filters/'.$language.'/'.$folder.'/'.$subdir.'/'.$myfilterpng.'.jpg" alt="'.$myfiltername.'" />'.$myfiltername.'</a></div></div></li>';
                }

 

Replace with :

if($count<=$limitindex) {
                                        if($myfiltername=='drawing') {$myfiltername='dräwing';}
                $indexcontent .= '<li><div class="indexblocks"><div class="imagesize"><a href="/'.$folder.'/'.$subdir.'/'.$myfilterpng.'.html#'.$subdir.'"><img src="/inc/filters/'.$language.'/'.$folder.'/'.$subdir.'/'.$myfilterpng.'.jpg" alt="'.$myfiltername.'" />'.$myfiltername.'</a></div></div></li>';
                }

In that case, instead of drawing, the filter name will be dräwing.

Credits :

Template image :

http://www.publicdomainpictures.net/view-image.php?image=33631&picture=fleurs-daisy&large=1