Coming: New image management features

[Jamie]

I am working hard to get v3.4.0 finished. The major feature I'm working on for this version is a redesigned image management fieldset for records that have images (Products, Categories, etc...). This will replace this:




with something like this:





Clicking on an image will expand it like so:



This is also going to replace the popup image editor that you see in current versions when you click on an image to edit it. I *may* do away with the crop feature as a result of that, not sure yet.

I'm trying to make this as simple as possible. This model is going to be "instant", in that whatever you do is going to happen when you trigger it. For example, if you change the "Auto-generate" field the image will be autogenerated on the fly and will appear as such on the page without having to submit the form.

Same goes for every image action, rotate, flip, resize, etc... In theory, you could open a product record, alter all of the images, and not bother to click "Save changes" and the changes will still stick. We may alter that as we test this, and may offer an undo button for certain options.

We are planning on an upload feature that will allow you to select multiple files at once and upload them. When you do, the plan is to have the uploads appear live on the page as new images alongside the already existing images. Those new pending images will have progress bars to indicate their upload status.

We also have plans to add some drag and drop support to reassign images. For example, you could drag one of the "Additional" images to the "Large" image. When you let go, that image now becomes the Large image, and the one that was large is changed to where the additional image was.

I'm using the Mootools framework to assist in coding this. It is my new best friend.

I have a long way to go on this, but if you'd like to see an early example of the interface, you can check it out here:
http://www.squirrelcart.com/demo1/image_upload_test/

Disclaimer:
This is a demo, but as with anything we post that is not yet incorporated into Squirrelcart, it is strictly for demo purposes. It cannot be used by anyone for any reason other than to view the interface demo at the URL above.

This demo does not actually perform any actions. It is strictly a very early stage interface mockup for the purpose of planning this feature. If something doesn't work, it's because we didn't program it yet.

I would love any feedback you may have on this.

[Jamie]

As I get more done on this interface, I will keep updating the demo. Here's the latest:


I added a trigger to delete without having to expand an image:


The first image in this post shows how a product (or any other) record's images fieldset would look with several images uploaded and assigned. For a new product record, the plan is to have it start simple like this:


The toolbar at the bottom is for performing bulk actions (duh!). It looks and will functoin very much like the toolbar seen when you expand an image. Clicking the folder icon will open a window on your computer (native window, not a browser window). It will allow for multiple file selections. Click the button, and it will stream the files and drop them into the image area with the rest of them.

The button to the far right will work the same, but allows browsing from the server.

I am going to add a mechanism that will allow you to select multiple images in the fieldset. When one or more are selected, you will be able to do bulk actions like rotate, flip, mirror, delete, etc....

A lot of this obviously isn't coded yet, but the interface itself is coming along nicely. Check it out here:
http://www.squirrelcart.com/demo1/image_upload_test/

So as to avoid any confusion with the bulk actions toolbar and the individual toolbars shown on each image when you expand them, the bulk action toolbar will appear and disappear as it makes sense so it will never be present unless you can actually use it.

If you've been playing with this, bookmark it and watch it progress. I plan on updating the demo interface at least a few more times for feedback.

[SketchWork]

This looks blooming fantastic

Will there be a nice easy way to use these additional images at any place within the product record?

Other applications just add additional images as thumbnails in a record under the main image, but in addition/option it would be great to be able to add them as full or specified sized images within the product record detail text.

[Jamie]

This looks blooming fantastic

Thanks!

Will there be a nice easy way to use these additional images at any place within the product record?

Other applications just add additional images as thumbnails in a record under the main image, but in addition/option it would be great to be able to add them as full or specified sized images within the product record detail text.

I'll add it to the list. That may or may not make it into v3.3.0 as I'm pushing to get it done ASAP.

[designwerks]

Jamie,

Looking forward to this new feature.

One question...

Will the new upload feature continue to rename the existing image file when uploading to the sc_image directory?

I personally do not use the upload feature (but I would), because it renames all the files to something like 234_image.png or 234_large_image.png etc.

I prefer to use the original file name, so I FTP the image file to the sc_image directory and then use SC to browse the file. This method maintains the file name originally created.

Although I am not sure (and hope you can advise), I think the filename is searchable by Search Engines so for me it helps if the image reads something like buttered_rum_woodwick_candle_large.png versus 345_image_large.png

Also, when it's time to review all the files in the directory - it's much easier to recognize the image file buttered_rum_woodwick_candle_large.png versus 345_image_large.png

Right now - I'd love to use that upload feature - since I would not have to keep Dreamweaver running in the background to FTP the image files.

Regardless, the feature will be very welcome.

John

[Jamie]

Hi John,

We are planning on having options that control what the names will be. You could keep them as is (same name as when you upload, provided there are no conflicts). You could also use the SEO URL name, with the type of image at the end, pretty much as you have it:
buttered_rum_woodwick_candle_large.jpg
buttered_rum_woodwick_candle_thumbnail.jpg
buttered-rum_woodwick-candle-large.jpg
buttered-rum_woodwick-candle-thumbnail.jpg

[SketchWork]

That would be a welcomed addition - fab news!

[Jamie]

I just updated the demo interface, mostly with changes to the main toolbar at the bottom.

I need an interface to turn selection of images on and off for bulk operations. Clicking "Select Mode" will turn that on and display the bulk action tools. Selection will be similar to the iPhone. Click an image, it grays out with a check box. Click again, and it goes back. That selection part is next on my list. Right now, the only part of that working is the "Select Mode" button behavior.

[Jamie]

The select mode button and actual image selection is now working in the demo interface.

Happy Halloween.

[Jamie]

Multiple image delete is now working (with no back end yet):
http://www.squirrelcart.com/demo1/image_upload_test/

1. Click "Select Mode" to turn it on
2. Click a few images to select them
3. Click the delete button in the bottom toolbar

[Jamie]

Demo interface has been updated again:
http://www.squirrelcart.com/demo1/image_upload_test/

1. Added a select/deselect all checkbox button in the select mode toolbar.

2. Converted all the individual button images to use a single sprite image:


That should make it load a bit quicker and makes it much easier to manage in the code.

3. The tools in the select mode toolbar are now grayed out when they can't be used. They enable automatically when at least one image is selected.

[Jamie]

Update for those following this -

First, the good news. This is progressing very well, and is about the coolest thing since sliced bread. It will be a tremendous improvement when done.

Now, the bad news. The approximate release date we were planning for v3.3.0 was Nov. 10th. We missed that date solely because of the time and effort being put into this new feature. Based on the fact that I still have a significant amount of work left to do on this, and the fact that we have some deadlines to update our FedEx code fast approaching I've decided to push this one feature off until v3.4.0.

I should have an updated demo interface of what I have so far for this. Keep an eye on this thread for that soon.

Because of this decision, we can now go ahead with release plans for v3.3.0 which is packed with a load of new features. That should be out very soon.

[idaryl]

I'm wondering (seeing as you have it working there already) when a user clicks on an image the div expands to accommodate the tools etc.

Could that be applied to the "Primary Images" and the "Additional Images" titles? Where two icons a ' + ' sign and a ' - ' sign. The user clicks on the plus, and the div expands to show the images and tool bar for that "category"...

The page area would then be only occupied with what you are working on at that moment, and it would close/hide when you clicked on the other title/category icon/s...

IMHO I think that would be a nice "thing" to have working

Just a thought....

[craig2005]

Any updates on this? I really need this feature. When do you expect 3.4 to be released?

[Jamie]

Any updates on this? I really need this feature. When do you expect 3.4 to be released?

We are working very hard to get v3.4.0 completed. I do not have a set release date. We have mandatory updates for our FedEx integration that must be done and re-certified with FedEx before June 1st. All our focus is on that at the moment. I hope to release v3.4.0 shortly after we have completed updating our FedEx code.