Jump to content

Individual image-field widths (float / display inline)


Recommended Posts

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.

Link to comment
Share on other sites

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)
fieldset_storage_settings (set to 40% width)
  • Like 2
Link to comment
Share on other sites

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 :(

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;}
  • Like 3
Link to comment
Share on other sites

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");
    if($(this).children('li').size() > 1) {
        $(this).sortable( "option", "axis", "none");
  • Like 3
Link to comment
Share on other sites

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.  :mellow:
(latest stable 2.3.0 install here, if that matters...)
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...