Well, that and a few other things. I was on a bit of a roll, so I added a few features that I've wanted myself - like the ability to delete files, and find out which posts a given file is used in.
Now, for those who like how uploading and inserting pictures already works, good news: these are just additions; you can still use the manager the way you used to. The same options are still there so you don't need to do anything different.
Here are the new features I added:
- Thumbnail previews of your pictures
- A count of the number of posts each file was used in
- A link to a list of all the posts that contain each file
- Ability to delete files
- Warns you when a photo might be too wide for the web
- A new, third way to insert a picture into a post: as an automatically generated thumbnail which is a clickable link to a larger pop-up version of the picture
- Image Editor - resize, flip, rotate, and crop images online
while adding or editing a post.Here's the new manager in action (click image for larger version):
Now for some quick-start notes on using the new media manager:
Uploading a photo or other media file is just the same as it was before - use the "Upload new file..." button and you will see a familiar screen for uploads.
You can browse through your collection using the "Next >>" and "<< Previous" links.
The size and date of your image is in the third column. The size will be red if it's wider than 600 'pixels' - this is a normal maximum size for most blogs. (We'll make this warning adjustable in the future, since different blog layouts allow for different maximum widths of pictures.)
How to insert a photo into one of your posts:
First pick one of the three insert options next to the words "Insert As:"
- Inline puts the photo with your text at full size
- Popup puts a text link in your text, which opens a new window when your readers click on it
- (New) - Popup with Thumbnail gives small thumbnail in your post which can be clicked for a full size version
Then, click the name of the file you wish to insert and supply an 'alternate text' for people whose browsers don't support graphics (such as visually impaired readers). If you selected the 'Popup with Thumbnail' option, you'll also be asked for the width of the thumbnail. You can use 0 (zero) for the default width. (The default is usually 200 pixels or screen dots - you can change this in your blog's settings page.)
How to delete a file
Click the "Delete" link next to the file and confirm you really want to do that (it can't be undone).
How to view a photo
Click "view" - a new window will open with your full-size photo.
If the system knows you've used a photo in one or more of your posts, it will give you a "find" link in the "actions" column which you can use to list the post(s) that the photo is used in. If you click "find", you can review the list and you will find "edit" links for all of the posts.
Editing your photos
Click 'edit'. A new window will open up with some editing tools (click image for larger version):
Your photo is displayed to the right, and the tools are in the left column.
Cropping: Select the Crop tool button. Use the mouse (click & drag) to select the part of the picture you want to keep, then click the green check mark button when you are satisfied with the selection.
Resizing: Select the Resize tool. You can either put new width and/or height into the text boxes at the top of the screen, or drag the corners of the picture. Use the green check mark button when it's the size you want.
Rotating: Select the Rotate tool. Use the drop-down menus at the top of the window to either flip the image or rotate it (90, 180, or arbitrary angle). There is no preview, but if you don't like the changes, undo them by flipping or rotating it back.
Saving your changes: Select the Save tool, and either click the green check mark to overwrite your file, or change the name and/or image format & quality to suit.
When you are finished editing, close the window and the media manager window should be visible, or you can open it again from the post editor. If it's still open, hit F5 to refresh the file list.
Discarding your changes: Close the window.
Measure tool: Use to measure part of an image - click and drag to select part of the picture, and it will tell you the size (W and H) of your selection at the top of the window, and where (X and Y) the top left of the selection is inside the photo.
Marker tool: alternates the color of the marker rectangle between black and white
Please note: When editing large pictures, rotating and flipping can take a long time or return a "timed out" message. I will work to address this.
Well that's about it. Give it a try and let me know how you like it, and what issues you find.
As always, a big thank-you to all of you for helping me to test the system. If you encounter any errors or other unexpected weirdness, please let me know (error messages and, in the case of problems with the image editor, screen prints are especially handy!)