Closify – Powerful & Flexible Image Uploader



If you are looking for Closify for WordPress

Creating a responsive, dimension independent and adjustable AJAX image uploader has never been made this simple.

It could be integrated into your dynamic PHP website effortlessly.

Here is how to convert a single line of HTML code into an elegant image upload container.

<div id="profile-container" height="200" width="200" />

Here is how you can Closify the above single tag using jquery Closify plugin, with padding a single option:


Two simple steps and now you will be having an elegant circular profile image container, that is uploadable and adjustable, in which user can drag n crop it as per his/her desire. For real experience, please visit the live preview.

// Closify a div with more options
        menuBackgroundColor:"rgba(0, 10, 255, 0.99)",
        loadingImageUrl: 'assets/img/ajax-loader.gif',
        backgroundImageUrl: 'assets/img/arrow-upload-icon.png',
        position: {top:'10px',left:'0'},
        circularCanvas: false,
        hardTrim: true,
        quality: 1,
        topLeftCorner: true,
        topRightCorner: true,
        bottomLeftCorner: true,
        bottomRigthCorner: true,
        allowedFileSize: 1024 * 1024 * 10, 
        url: "processupload.php",
        targetOutput: "#output-profile-img",
        error: anyFunctionName,
        success: anyFunctionName, 
        uploadProgress: anyFunctionName, 
        beforeSubmit:  anyFunctionName 

Closify is a jQuery based plugin, that simplifies the developers task to create unlimited number of dynamic image containers; with different shapes (Rectangular, Oval & Circular), and, with different dimensions according to their website design. With closify the developers can easily create uploadable and adjustable (cover, profile, or any other custom image container) with a single line of code. Intelligently enough the Closify plugin would resize the uploaded image according to the size of the container set, with a respect of the image aspect ratio, and then it starts to generate a dynamic in the front-end, with a flixable slide menu for each container that has four different options: (Upload, Reposition, Save and Delete).

  • Upload: The user can click this button and upload the desired image to be processed and seamlessly returned to perfectly fit the container.
  • Reposition: The uploaded images might have either a longer hieght or a longer width in respect to the container, and conveniently the plugin gives the user the capability to position/reposition his image according to his taste at any time.
  • Save: Clicking this button will save the position offset (offsetX & offsetY) and then send it to server for post-processing. Developer need to handle the SQL Script on where to save this info, and re-apply it later.
  • Delete: Delete the image from the container, and send a POST request to the server with


  • Responsive – Easily enable/disable responsive feature as per your desire..
  • Image sampling – Easily choose the default image sampling you need, you can force 2x or 3x resolution sampling if it is viable.
  • Thumbnail generation – Easily enable/disable and set the size of the desired thumbnails, for automatic thumbnail generation.
  • Dynamic image container – Easily set the size of the desired container through a single line of HTML code.
  • Dynamic container shape – Easily set the shape of the container (Circular, rectangular and oval) through plugin options.
  • Image dimension independent – No matter what size of the image the user will upload the plugin will make it fit nicely into the container.
  • Cross browser compatibility – Qualified to work for Chrome/IE/Firefox/Opera/Safari
  • Progress bar enabled – You can easily enable or disable a progress bar functionality for the uploading process.
  • Slide & Crop feature – Having a nice slide & crop feature for the uploaded image.
  • Server side aware – It keep the server side aware of most of the events happen in the client side for backend processing.
  • Well documented source code – It has bot PHP/jQuery source code that is very clear and very easy to customize.
  • Comperhensive error handling – It has a built-in error handling functionality that can catch inputs that are off constraints.
  • Error output relocation – The error output could be easily relocated within HTML using plugin options.
  • Customizable theme – Menu style could be easily customized through plugin options.
  • Multiple progress-bar styles – It has more than one style for the progress bar, to help match your website.
  • Maximum limitation – You can define the maximum size of images through the plugin options.
  • Event outlet – It gives the developer the capability to listen to multiple events, such as (beforeSubmit, success, error and progress).
  • Define an initial default image – Developers can define an initial global photo for each container.
  • Customize loading image – Loading image could be overriden by the developers.
  • Container background image – Background image of the container can be globally redefined through plugin options.

Version Updates:


Update Version: 1.1.5

- Added Safari ignore filter (To optimize the look for versions below 5.0)
- Removed offsetX/offsetY and replace them with left/top positions
- Updated theme folder
- Updated docs folder
- Added corner control option for the plugin
- Added position control option for the plugin
- Corner control option for the plugin (Soon will be illustrated with pictures) 
- Added 'position' control option for the plugin, so that it can be used to set an already uploaded picture position from the server side.

Major update from version 1.5.1 into 2.0.

- Extra new features. closify-min.js
- Updated processupload.php
- position default: '{top:"0", left:"0"}' You can use this option either in conjuction with 'startWithThisImg' option or on demand, to pass saved top/left position for any picture, to be placed correctly as configured.
- circluarCanvas - Default: 'false' By enabling this option, the plugin will change the style of the container to have a circular type of edges.
- hardTrim - Default: 'false' By enabling this option the plugin will trim the extra image residue from outside image container.
- quality - Default: '1' It accepts [1,2, and 3] as values. You can use this option to change the image sampling and resolution to be 1x, or 2x, or 3x, whatever the developer found it to give sufficient quality for the image.
- dynamicStorage - Default: 'false' By enabling this option the plugin will intelligently starts to retrieve the last uploaded image and place it inside the container automatically. It works well with hardTrim option being enabled! Please read the documentation for further details.

Update v2.1:

- Now the plugin is responsive
- Fix some minor bugs and issues
- Menu rapid closing fix
- hardTrim and responsive now enabled by default
- File effected (style.css + processupload.php + closify-xx.js) Enjoy !
- Fixing minor resposive styling issues - Plugin enhancements

Update v2.1.1:

- Fixed the responsive setting, and make it cross browser compatible using js
- Removed imagick dependency and replace it with native image editing library.
- Bug fixes
- Add more stability
- More responsively robust
- Enhanced aspect ration 
- Add support for jpg+png+gif+jpeg

Update v2.2:

- Update online theme project to be more illustrative
- Bug fixes:
   * Fixed default background image css error
   * Refine processupload.php to be more robust
   * Refine and enhance error handling
   * Enhance image quality output and remove extra library dependencies
   * Add fadein effect for image change event

Update v2.5:

- Remove the form dependency, which made the plugin able to be inserted inside of any form.
- Added two extra events and passing the returned JSON result passed from the server side: 1- finishUploading 2-             finishCropping
- Performance enhancement
- More compact size
- Removed jquery.form.min.js dependency
- Updated processupload.php to comply with the enhancements
- Heavy realtime testing

Update v2.6: (15-4-2015)

- Fix the png transparency limitation.
- Fix the vertical aspect ratio issue
- Added new option to delete original images before cropping, after applying the hard image crop
- Amend the container's background image logo toggle issue



Please enter your comment!
Please enter your name here