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.
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).
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!
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:
This screencast (no sound) demonstrates the new images field, including features added this week, as well as features added last week.
ProcessWire’s images field has been re-designed and redeveloped with a lot of great new features we think you’ll love! This post covers it in detail. There’s also a screencast at the end that shows you the new images field in action. More
This week we have something different and wonderful, thanks to our friends at Avoine! More
“We were really happy to build our new portfolio website on ProcessWire! We wanted something that gave us plenty of control on the back-end, without any bloat on the front end - just a nice, easy to access API for all our content that left us free to design and build however we liked.” —Castus, web design agency in Sheffield, UK
thetuningspoon
- 9 years ago
- 60
★★★★★Fantastic enhancements!
Reply
Can
- 9 years ago
- 00
★★★★★Maybe restrict file name editing to superuser or provide a permission for it
Reply
Ryan
Yes, I think both would be good. The permission would be an optional one to install if someone needed the ability to assign it.
Reply
Ryan
Nope, just jQuery UI. I replaced the default theme and Reno theme slider drag element with the one from the jQuery UI Delta theme.
Reply
Ryan
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.
Reply
Ryan
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.
Reply
Can
- 9 years ago
- 30
★★★★★Awesome guys! I'm going to update as soon as possible :-D
Reply
Tom
I also noticed the styled range slider, is this a new field type?
Reply
Tom
- 9 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.
Reply
Tom
- 9 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?
Reply
Tom
I also noticed the styled range slider, is this a new field type?
Reply
Ryan
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.
Reply
EyeDentify
This images field is just getting more awsome by the day :) Great jobb to all involved.
Reply
AndZyk
- 9 years ago
- 20
★★★★★Really great update, especially the file renaming option.
Reply
Jugibur
Wow, great enhancements. Many thanks!
Reply
Jens Weigel
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.
Reply