Top Navigation

WP Edit Pro File Manager

I have continually been asked if there is a better file manager than the one included with WordPress. Well, I’ve always felt the WordPress media manager is quite a powerful tool. That is until recently.

Limitations of WordPress Media Manager

The first limitation I found is the ability (or inability) to organize files. Uploaded files are automatically stored in year/month directories; providing no control for custom folders. Often there are times when I work on a certain project; and I like to keep my project files organized with a custom structure.

The second limitation has to do with editing. There is no quick image editor in the media manager. This means if you want to make a quick crop to a photo (for example), you are required to use an external photo editing program. Then you have to re-upload the photo into the media manager again, deleting the original. Too cumbersome for me.

Introducing the WP Edit Pro File Manager

I spend a lot of time each day browsing the web looking at current open-source projects centered around the TinyMCE framework. This will often generate new ideas for me which eventually make their way into WP Edit and WP Edit Pro. I recently came across a file manager which has most of the options I’ve been wanting to implement into a better file manager. After some fairly extensive tweaking and customizations; I’m proud to introduce the WP Edit Pro Responsive File Manager.

This is a very powerful file and image manager. Some options include:

wpeditpro_filemanager1

  • Upload multiple files with drag and drop ability.
  • Responsive layout adapting to different mobile devices.
  • Full previews of uploaded images, videos and audio files.
  • Create, delete and edit folders and folder names.
  • Multiple file filters such as name, size, date, etc.
  • View file thumbnails by list, split-list and grid.
  • Files can be copied/pasted across multiple folders.
  • Swipe action to show buttons on touch devices.
  • Edit images with Aviary image editor directly in the overlay window.

Interaction with WordPress Editor

This plugin will add a new button to the top row of the content editor. Clicking this new button immediately opens the WP Edit Pro File Manager.
filemanager_toolbar

Additionally, a new button is added to the image and media plugins so the file browser can be opened and insert the link directly into the source url.

Image Button Window
filemanager_image_button
Media Button Window
filemanager_media_button

Managing Images and Files

The WP Edit Pro File Manager will allow the upload of various file types.

wpeditpro_filemanager2

  • Image Files – .jpg, .jpeg, .png, .gif, .bmp, .till, .svg
  • Video Files – .mov, .mpeg, .mp4, .avi, .mpg, .wma, .flv, .webm
  • Music Files – .mp3, .m4a, .ac3, .aiff, .mid, .ogg, .wav
  • Archive Files – .zip, .rar, .gz, .tar, .iso, .dmg
  • Other Files – .docx, .pdf, .txt, .csv, .psd, .ppt, .css, and many more.

The file upload area allows for multiple files to be uploaded when “dropped”. Alternatively, a browser based upload method is also available. Furthermore, filenames can be edited directly from the interface. Files can also be easily deleted, previewed, or downloaded from the interface.

Managing Folders

WP Edit Pro File Manager provides easy administration of folder names and locations. New folders can be created anywhere in the directory tree. Folder names are editable, and can be renamed at any time. Folders may also be completely deleted.

Multiple File Listing Views

The view of files can be toggled between list, split-list and grid. The grid view displays large thumbnails which expand to show additional information when hovered. The list view provides detailed information for each file, such as type, size and date.

Grid View
wpeditpro_filemanager1
List View
wpeditpro_filemanager4

There are multiple filters for further refining results. Filter by image, file, music, media, or archive; filter by custom query; or display all results.

Editing Images

Ready for another powerful feature of the file manager? How about editing photos without ever leaving the overlay window? With the help of Aviary we can make this dream a reality!

Edit Photo

wpeditpro_filemanager_editimage
wpeditpro_filemanager_photoeditor
While viewing a photo, right-click on the photo and select the “edit image” option. This will load the image in the image editor. There are 19 different features to modify the image:

  • Enhance
  • Effects
  • Frames
  • Stickers
  • Crop
  • Resize

  • Orientation
  • Focus
  • Brightness
  • Contrast
  • Saturation
  • Warmth

  • Sharpness
  • Splash
  • Draw
  • Text
  • Red-Eye
  • Whiten
  • Blemish

Edit Preview

All image editing features are built using jQuery Bootstrap; so the options are consistent, intuitive, and visually appealing.

Image edits are first performed in a preview area. Once desired changes have been made, the edited image can then be applied to the original file.

Frames
wpeditpro_filemanager_frames
Focus
wpeditpro_filemanager_focus
Resize
wpeditpro_filemanager_resize
Splash
wpeditpro_filemanager_splash
Text
wpeditpro_filemanager_text
Crop
wpeditpro_filemanager_crop

Inserting Files

To insert the file or image back into the content editor; simply click the file/image thumbnail.

Credits

This plugin was built around the Responsive File Manager addon for TinyMCE.

How to get WP Edit Pro File Manager

The WP Edit Pro File Manager is now included in the WP Edit Pro plugin. Get WP Edit Pro today.
Password Reset
Please enter your e-mail address. You will receive a new password via e-mail.