Version 3.0.18 brings yet more images field upgrades!

ProcessWire 3.0.18

Version 3.0.18 continues from last week, making major upgrades to our images field. This week we got into some of the finer details, and we've got plenty for you to look at here, as well as a screencast (at the end) to demonstrate it all.

More image field upgrades

  • You can now use a slider (in the field header) to adjust the size of the thumbnails. You can adjust it to show anything from tiny thumbnails to a larger size that probably doesn't even qualify as a thumbnail any longer! Whatever size you choose is remembered for future requests.

  • A new proportional grid mode has been added, showing a grid of photos without all of them being square. This is more convenient for comparison and seeing the full context of the images, though not are pretty to look at, or quite as simple when it comes to sorting. It's nice to have the option of both.

  • A new list mode has been added, which is similar to the list mode in the previous InputfieldImage. The list mode can also be thought of as an "edit all" mode.

  • You can toggle between any of the modes instantly by clicking dedicated button/icons in the field header. Your mode setting is remembered for future requests.

  • You can now rename image file names by clicking the file name and entering the new name you want to use (though we may limit this feature to advanced mode).

What else?

The current feature set will be the full scope of the images field before the master release of ProcessWire 3.0. But there have also been an overwhelming number of different feature requests so we'll no doubt be looking closer at some of these on the next round of updates.

Because we've added so much here in these last few weeks, we're going to focus on making sure everything we already have is solid and running smoothly before we add too much more to the images field. But we'd definitely like to explore some more things like custom crop features, more custom meta data fields and image editing tools when we get into ProcessWire 3.1. Thank you for all the interest in the images field!

Screenshots

Regular gride mode. Note the addition of a slider (for thumbnail size) and links for grid mode, proportional grid mode, and list mode in the header.

Here's what proportional grid mode looks like:

List mode lets you edit all images at the same time:

Screencast

This screencast (no sound) demonstrates the new images field, including features added this week, as well as features added last week.

Comments

  • thetuningspoon

    thetuningspoon

    • 3 years ago
    • 60
    Fantastic enhancements!
  • Can

    Can

    • 3 years ago
    • 00
    Maybe restrict file name editing to superuser or provide a permission for it
    • Ryan

      Ryan

      • 3 years ago
      • 10
      Yes, I think both would be good. The permission would be an optional one to install if someone needed the ability to assign it.
  • Ryan

    Ryan

    • 3 years ago
    • 10
    Nope, just jQuery UI. I replaced the default theme and Reno theme slider drag element with the one from the jQuery UI Delta theme.
  • Ryan

    Ryan

    • 3 years ago
    • 10
    As a best practice, we try to keep front-end factors out of the admin side, which ensures current and future portability of the site. Something like image dimensions are a front-end factor, and those dimensions may change on a future iteration of the same site. That size() call is for the front-end.

    The goal with the crop tool has been simply to crop, and not to dictate size or proportion or anything too exact. Rather, just to make sure the image is cropped to include the important part(s). So the crop is not there to be exactly what's on the front-end, but to ensure the source image is right for whatever sizes the front-end may apply to it, now or in the future.

    I can see why some people like that exacting front-end control in the admin, but for PW's philosophy it seems like one of those things that's good for the short term but not necessarily for the long term. I definitely like the feature as a 3rd party module, just not sure I like it as a core feature as it seems to blur a line. I'm not saying we won't integrate it as a feature, perhaps in the end we will. But it's one that we'll ponder over more relative to the big picture of best practices in the system.

    • Ryan

      Ryan

      • 3 years ago
      • 30
      More thinking. We can get around all my concerns just by focusing on predefined proportions, leaving exact pixel dimensions for front-end size(), width() or height() API calls. That gives us proportional cropping in the back-end that's portable, without front-end dependency.
  • Can

    Can

    • 3 years ago
    • 30
    Awesome guys! I'm going to update as soon as possible :-D
    • Tom

      Tom

      • 3 years ago
      • 00
      I also noticed the styled range slider, is this a new field type?
    • Tom

      Tom

      • 3 years ago
      • 00
      Apologies for the duplicate post, my phone likes to submit things twice sometimes just to make sure.

      The Horst's CroppableImage would be an amazing feature as many of the clients I work with do not have Photoshop and often it leads to some very unwelcome crops. One being a music festival where in some crops you only get the artists chin for example.

      I see this working as you go into variations and in there will be a crop button in which you can define a crop from the original image. That way it works with all the current code. $image->size(300,300)->url rather than $image->getCrop('thumb') so people have access to the feature on update without much code change.

      I think much like this updated field was done with the help of Tom and Benjamin, maybe Horst could help with the development of this feature? He did mention in his latest post that he was struggling to keep it up to date.

      • Tom

        Tom

        • 3 years ago
        • 20
        Awesome update Ryan and team working on this feature. I did spy "custom crop features" will this be a more integrated version of Horst croppable image? Or is that going to continue to be a module maintained and managed by Horst?
        • Tom

          Tom

          • 3 years ago
          • 00
          I also noticed the styled range slider, is this a new field type?
          • Ryan

            Ryan

            • 3 years ago
            • 20
            This is Horst's baby (and apeisa if I remember correctly? Two dad's?). I hadn't planned on replacing anything, but folks have been asking for this feature. Maybe those two will help integrate it into the core in 3.1? Seems like there is good demand for it. It would actually be part of the ProcessPageEditImageSelect module rather than the InputfieldImage module.
          • EyeDentify

            EyeDentify

            • 3 years ago
            • 20
            This images field is just getting more awsome by the day :) Great jobb to all involved.
          • AndZyk

            AndZyk

            • 3 years ago
            • 20
            Really great update, especially the file renaming option.
          • Jugibur

            Jugibur

            • 3 years ago
            • 20
            Wow, great enhancements. Many thanks!
          • Jens Weigel

            Jens Weigel

            • 3 years ago
            • 10
            Uploading of SVG

            So I can allow to upload svg in Image field (wich should be posible by default) but currently I have the strange behaviour that uploaded SVG disapear after saving.

           

          Twitter updates

          • ProcessWire 3.0.133 adds a useful new Page::meta() method for a new type of page-specific persistent data storage, adds the ability for users to create their own bookmarks in Lister, and has a handy and time saving update for the asmSelect input type— More
            14 June 2019
          • New post: This week we’ll take a look at 3 different WEBP image strategies that you can use in ProcessWire 3.0.132+. Then we’ll dive into a major update for the Google Client API module, and finish up by outlining some useful new updates in FormBuilder— More
            31 May 2019
          • New post: This week we've added WEBP support in ProcessWire thanks to a GitHub pull request from Horst Nogajski. This enables you to have highly optimized image output in PW and I think you’ll really like the difference it makes— More
            24 May 2019

          Latest news

          • ProcessWire Weekly #266
            In the 266th issue of ProcessWire Weekly we're going to take a closer look at ProcessWire 3.0.133 (dev), introduce a third party module called Repeater Images, and highlight a recently released site belonging to the Australian Antarctic Division. Read on!
            Weekly.pw / 15 June 2019
          • ProcessWire 3.0.133 core updates
            ProcessWire 3.0.133 adds a useful new $page->meta() method for a new type of page-specific persistent data storage, adds the ability for users to create their own bookmarks in Lister, and has a handy and time saving update for the asmSelect input type. Read on for all the details, examples and screenshots.
            Blog / 14 June 2019
          • 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