Individual image-field widths (float / display inline)

[dragan]

I only now discovered that it's possible to declare individual input-field widths. Excellent feature! However, image-fields are not supported.

Well, the fields are resized, but it seems to be still "display: block" i.e. each image-input field is displayed one below the other. With image-heavy pages, it would be cool to say e.g. "image input field: width: 33%" and being able to show more images per row. This would make sorting much easier. Right now I have to resize the browser content (CTRL -) so I can see more images per screen real estate. Even then, I have to often move an image up or down several times to reorder them.

I guess all it would take is changing / adding a CSS property somewhere? e.g. from "display: block" to "display: inline" or similar.

[Martijn Geerts]

You could add fieldsets to your templates, then let the content related stuff on the left and the storage & settings related stuff on the right side

This way you could save some space.

Template fields:

fieldset_content (set to 60% width)
    title
    headline
    summary
    body
fieldset_content_end
fieldset_storage_settings (set to 40% width)
    images
    files
    amazing_checkbox
    etc...
fieldset_storage_settings_end

[dragan]

Thanks. I never really knew about fieldset_open / fieldset_end. Stumbled over this forum thread also: http://processwire.com/talk/topic/665-editing-fieldsets/

It will surely come in handy at some point.

Although I do save some space now, I still didn't find a way to actually be able to display image thumbnails next to each other (3 or 4 in a row). Is that somehow possible?

e.g. I have two fieldsets: content 33% (everything else than images) + images 67%. But the thumbnails are still displayed one on each row. Is it not possible to change the CSS properties of the image input field? I tried editing .InputfieldImage in wire\modules\Inputfield\InputfieldImage\InputfieldImage.css with no luck

[Soma]

The width settings is for the field itself and not for things inside a field.

Of course it's possible to overwrite the CSS for image field, you can try it using inspector in chrome for example on the fly. Depends how fit you are with CSS, but this would give an idea what to change (container, li's etc). I tried to float them and add a width, but also you'd need to clear float on the wrapper since PW doesn't have any. But the problem then is that the jquery sortable doesn't work nice with such a floated list.

You could add a new css file directly to the admin theme (default.php) or inputfields.css, or through a module to autoload and add your css file.

[Soma]

I just found why grid sorting doesn't work. It's because Ryan added a axis: 'y' to the sortable init to restrict it to vertical sorting.... If I remove that it works with the sorting.

This is what I have added to the inputfields.css of the admin theme. 

ul.InputfieldFileList{ overflow: hidden; }
ul.InputfieldFileList li{ width: 32%; margin-right: 1%!important; float: left;}

And this added to the inputfields.js of the admin theme

$( ".InputfieldFileList" ).sortable( "option", "axis", "" );

So it does work again. 

Edit: Ok it does not work to set the option afterwards. I had removed the option in the core so it worked and forgot. Looks like it would have to changed in the InputfieldFile.js in the core to remove the axis: 'y';

 

Just to note that this might look nice, but since the height of a box isn't fix, once you have a image that has a long title the box will get taller and the floating will get screwed. So you would have to give the li a fixed height. 

 

Edit: or to avoid long image names to break one could add this

ul.InputfieldFileList li .InputfieldFileName{ width: 150px; display: block; overflow: hidden; white-space: nowrap; float: left; margin-right: 1em;}

[Soma]

Ok think I got a way to change the axis on sortable. Problem was that PW only inits the sortable for list greater than 1. So I got an error with the script that it can't set the  "option" prior to initialisation. I made it work with:

$sortableLists = $(".InputfieldFileList");
$sortableLists.each(function(){
    if($(this).children('li').size() > 1) {
        $(this).sortable( "option", "axis", "none");
    }
});

[dragan]

Thanks! I really appreciate the time you took for this. After all, it would only be a "nice to have" feature, nothing else. 

I tried to add the CSS and JS now, but it doesn't work.

Google Chrome console shows a JS error:

Uncaught TypeError: Cannot read property 'length' of null 

in wire/modules/Jquery/JqueryCore/JqueryCore.js?v=183

 

Where did you add your last JS code? in main.js, install.js or inputfields.js? I tried it in the latter two, but it didn't make any difference. 

 

(latest stable 2.3.0 install here, if that matters...)

[Soma]

Doesn't matter in the main.js or inputfields.js inside the document ready.

Speaking of the /site/templates-admin/scripts/main.js

Depends if you have a custom admin theme installed already or not. If not and you use default admin theme, you can copy the /wire/templates-admin/ folder to your sites folder and edit away.

[dragan]

Nice! I now added the JS and CSS bits in BOTH wire + site folders. Just placing them in one or the other didn't. This is cool. Works like a charm. Thanks again!

[Soma]

Its only needed in site admin templates. You dont need or should change anything in core. It willalso get overwritten on a update.