ProcessWire 3.0.17 brings major upgrade to images field

ProcessWire 3.0.17

A few months back Tom Reno wrote a blog post here about a redesign of our images field (in the admin). Today, I'm glad to report that this new images field is now available in ProcessWire 3.0.17. And it's got a few new tricks you haven't heard about yet too. We've got all the details here in this post. There's also a screencast at the end that shows you the new images field in action.

Credits

The new images field was designed by Tom Reno (Renobird) and the end result looks almost exactly like the original design mockups. Most of the implementation was done by Benjamin Milde (LostKobrakai). A huge thanks to both Tom and Benjamin for a job well done. This is a really great upgrade to our images field.

Overview

The most obvious improvement is that the new images field is nicer to look at, nicer to use, and uses available space a lot better. Renobird's design here really gives it a nice feel.

In terms of use, image editing functions are somewhat influenced by Google Images. Clicking an image loads an edit panel below it, within the grid of images. In the edit panel, you can see a larger preview of the image. Click the preview to view it in a lightbox, click buttons to crop the image, view/manage variations, or enter description text and/or tags.

Images can be sorted by drag and drop, just like in the previous iteration. But the sorting is a lot nicer to work with here, you'll see what I mean. If you hover an image for a second, you'll get a helpful tooltip with additional details about the image.

To mark an image for deletion, you just hover it and click the trash icon. To mark all images for deletion, double click any trash icon.

Uploading

The new images field can also do a few cool things with regard to uploading that the previous images field couldn't.

Immediate previews

When you start uploading images, you'll see a preview of them immediately in the grid, before they've really even started uploading them. LostKobrakai worked a little magic here. The progress bar will appear on top of that thumbnail preview as the image uploads.

Drag-and-drop in place

Not only can you drag and drop image(s) directly into the images field, but you can drag and drop them exactly where you want them to go in the grid of images. Previously, any images you added just went to the end of the list. Now you can drag them to the beginning, the end, or anywhere in between. Note that this "drag in place" function is disabled when an image "edit" panel is open, you'll see why below. As a result, you'll want to close the image edit panel when you want to drag images directly into the grid of images.

Replace an image by dropping a new one on top of it

When the "edit" panel is open, you have a larger preview of the image. You can replace that image simply by dragging a new image from your computer right on top of that preview image. It doesn't get any simpler than that!

Thumbnails

Admin thumbnails in the previous images field were 100 pixels in the smaller dimension. In the new images field, they are now 260 pixels in the smaller dimension, scaled to 130 pixels (for HiDPI/retina support). The actual size and HiDPI support can be adjusted in config.php settings in $config->adminThumbOptions, though we think most will likely want to keep the default settings.

We've established that the new images field uses larger and nicer looking thumbnails, but went back and forth a bit over the best way to handle existing sites that already had potentially thousands of image thumbnails already created and in use. We certainly didn't want to re-create them all, making everyone wait several seconds to edit a page that has many images. Given that, here's what it does:

  • If an older "legacy" thumbnail already exists, it'll use it, and upscale it to 130px in the browser. This reduces the visual quality in that context a bit, but it still works well as a thumbnail in the admin.

  • If you upload a new image, it'll use the new thumbnail size. If you are building a new site that doesn't already have images present, then you'll always see the new higher quality thumbnails.

Easter egg

Don't mind waiting for it to re-create your legacy thumbnails at the new size? There's a little secret for that. Click the label in the bottom right corner of the images field that says “drag and drop in new images above.” When you click it, it changes to “legacy thumbnails will be re-created on save.” Click the save button, and it'll re-create the thumbnail images on that page. Now most probably don't need this, but wanted to let you know it's there just in case you wanted it.

Screencast

Here's a quick screencast that demonstates some of the things mentioned above.

ProcessWire 3.x API reference continues to grow

While we're on the subject to images (and files), our 3.x API reference continues to grow! These new classes have been documented in detail and added to our 3.x API reference this week:

Wrapping up

Note that other modules that extend the old images field (like those that provide additional crop functions) may not work with the new one. If that turns out to be the case, we'll likely move the old images field to a 3rd party module so that it can continue to be used for these cases.

A big thanks again to LostKobrakai and Renobird for their great work with ProcessWire's new images field. Please let us know if you run into any issues with it. Have a great weekend and remember to read the ProcessWire Weekly!

Comments

  • Can

    Can

    • 8 years ago
    • 50

    looks great thanks for the nice work guys :-)

    The grid/list view switcher is gone right?
    Visually the grid was always nicer but when uploading lots of images and naming/tagging them it was really usefull, just as a side note ;-)

  • Bernhard

    Bernhard

    • 8 years ago
    • 00

    +1 for that! i would also need the filename somewhere for my sorting module: https://processwire.com/talk/topic/13064-inputfieldfile-image-sorting-autosorting/

  • Mike Rockett

    Mike Rockett

    • 8 years ago
    • 00

    Super stuff! Haven't been working with PW for a while now (busy with other work), but looking to get into this as I have an image-intensive site awaiting the go-ahead.

  • Nikolaus Rademacher

    I totally second the predefined cropping dimensions request. This is one of the most requested features from our clients!

    Great work so far :)

  • Bernhard

    Bernhard

    • 8 years ago
    • 50

    Very cool! What about the other things discussed for the images field over a long time? Like client side resize or predefined cropping dimensions. Is that planned somehow?
    Thank you.

    • Hanna

      Hanna

      • 8 years ago
      • 40

      Would it be possible to have the filename of the image visible somewhere in the admin?

      • EyeDentify

        EyeDentify

        • 8 years ago
        • 01

        Big thanks to everyone involved creating this. This feature is a major upgrade. I love it.

      • NikNak

        NikNak

        • 8 years ago
        • 00

        Thanks - it looks great.
        (Sadly, only once I've removed the ImageFocusArea module which I rely on) - but I've noted Ryan's comments in the 'wrapping up' section above.

      • Pawel

        Pawel

        • 8 years ago
        • 00

        Great change.
        One feature that would be useful. Posibility to replace image variation - crop by hand.

      • Torsten

        Torsten

        • 8 years ago
        • 10

        Great work!
        Sadly, as Nik mentioned, the ImageFocusArea module isn't working anymore and breaks the image field.

        A row view with all the the information for each image would be great too. Sometimes i have very similar images, which are hard to differentiate by only looking at the thumbnails.

        Thanks!

      • Torsten

        Torsten

        • 8 years ago
        • 10

        @Ryan

        Would it be possible (as a quick fix) to downgrade the ImageField module to an older version or are there more changes needed to get the old behaviour and compatibility back?

       

      Latest news

      • ProcessWire Weekly #515
        In the 515th issue of ProcessWire Weekly we’ll check out the latest core updates, new modules, and more. Read on!
        Weekly.pw / 23 March 2024
      • Invoices Site Profile
        The new invoices site profile is a free invoicing application developed in ProcessWire. It enables you to create invoices, record payments to them, email invoices to clients, print invoices, and more. This post covers all the details.
        Blog / 15 March 2024
      • Subscribe to weekly ProcessWire news

      “Yesterday I sent the client a short documentation for their ProcessWire-powered website. Today all features already used with no questions. #cmsdoneright—Marc Hinse, Web designer/developer