I’m curious – how does everyone deal with laying out their custom fields from the post edit page? Do you prefer Table or Row view, and have you ever used a 1-row-limited repeater field to give the edit page view a nicer layout?
The reason I ask is because the visual organization gets out-of-hand once in a while. ACF is my primary means for creating editor-side user controls, and for highly customized sites I have a lot of fields (sometimes upwards of 20!). And when there’s so many fields all stacked on top of each other, the page tends to get pretty long… and then we get to deal with clients that become visually confused and overwhelmed with the amount of data in front of them.
There should be a solution! There is a lot of wasted space with some of these fields, allow me to show you an example of the site currently open in front of me:
Note that in the “Property Details” meta box, the right half of the container remains completely unused. And I only have a few images in this one… some of the other properties in this site have 50 pictures! Needless to say, this is a lot for the scroll wheel to handle. It would be great if we could stack fields into columns 2 or 3 wide.
Surely there must be another way to pack all of this data into a smaller view!
A few ideas pop to mind right away. A “Gallery” option might be added to the Layout setting in the repeater field to allow for a tiled display instead of a single-row grouping – I haven’t actually looked at the layout options implementation, but because of the way the rest of ACF is designed I wouldn’t be at all surprised to hear that custom layouts are hookable functions. The other (more daunting) idea would be to introduce a layout editor to go along with creating custom fields.
Any thoughts? Have I missed a plugin that already helps with layout and organization?
I’ve gotten around this with an admin stylesheet in my theme that has a pretty messy mix of floats/clears/borders, along with some JS to match the heights of divs that are floated next to each other. It’s super ugly (on the code side), and hard to maintain when I add/remove/move fields, particularly when conditional logic is involved. Not quite sure what a good interface for it would look like, though.
Thanks AmandaB, I was really hoping it didn’t come down to that ;). I see that you’re using tabs as well – I think we’ll just stick with that for now.
@amandab – Wow, that looks great. Nicely done. Seems there would be interest in an add-on that does something similar…
I’ve also been looking into ways to condense fields in the post edit screens, particularly number fields (which rarely need the full width). One idea is a “columns” field which, like the tab field, finds the fields proceeding it and wraps them in a specified number of columns (field option).
What do you think about adapting a grid system to fit these fields? Maybe an expand/shrink icon in the corner of each field to allow width adjustment?
I love the idea. Hopefully I can find some time to add this in!
How would you envisage the interface for specifying the column / rows?
The image here uses a random glyph icon set, AmandaB’s field layout and a Bootstrap popover. This is by no means the best solution, it’s just an idea!
Visualization suggestion: when fields are hovered on, a small arrow icon might appear in the corner. On clicking this icon, a menu could be displayed with field-specific layout options.
After the “Expand Field” or “Contract Field” link is clicked, the field wrapper could have its column width class adjusted to the next closest division – if we were using a 12-col class-based grid system, a field with
class="field six columns" might instead become
class="field col6 columns"… this would allow for JS string split and integer manipulation, which is a bit less tedious 🙂
Clearly this is only display-side, I imagine that admins would like the ability to specify layout options like this from the field edit page at
/wp-admin/edit.php?post_type=acf as well.
Data submission could either be AJAX on popover link click, or it could be submitted on post update like normal – the latter may be better in case users change layout and decide to refresh the page in order to revert changes.
I suppose this means adding more data for each field – ACF will need to keep track of each field’s layout settings behind the scenes. I’m not sure where exactly this data should be placed however… it’s not particularly useful in the theme-side
get_field() calls, so in the interest of efficiency it might be better to only have this info available in the administration pages.
The downside of the display-side layout adjustment is that it will need to be role-restricted. We won’t want everybody to be changing field layouts on a whim! I’m not sure what capability level is required to add/edit ACF fields, but I would assume that it’s
manage_options – the same capability level could be used to determine whether a user has the ability to adjust field layout on the fly.
Oh, and just in case you were interested: PSD! Don’t make fun of my terrible skills XD
This is something I’ve really wanted for awhile, but the plugins so good I’ve been fine with the repeater as a workaround.
I think for a first iteration I’d start small and abstract. For example, similarly to gravityforms you could include an input field for element class that applies to the parent element. That way anyone could easily add their own layout styles using bootstrap, foundation, or whatever home brew method they use. Especially since these classes would apply to the frontend form as well.
Interesting thought @drrobotnik, but I’m not sure that the application is the same as in Gravity Forms. It does make sense to start with a class add-on and work up, but this thread was started with the admin view / post edit pages in mind instead of the theme side. Usually when I work with ACF in a theme, I display the fields as needed and don’t rely on formatting at all.
This is definitely an issue that Gravity Forms struggles with as well though – editing forms gets to be annoying once they move past page break.
If a class is added and used within the administration edit pages, there’s no reason that it can’t also be added to the field object and retrieved in the theme. Since field data can be retrieved with
get_field() etc, maybe it would make sense to have layout data available as well!
Do you guys think we should be writing this as a standalone ACF plugin?
maybe if you’re interesting you can see visual composer 🙂
I would start out by modifying a copy of the “Tab” field – adding an option for the number of columns, modifying the field JS to look for “column” fields and apply classes, adding CSS to admin_head, etc.
Hi Elliot and others,
I would love to have it implemented this way:
It should work like Adobe Photoshop layer groups. One can select a few fields (layers) and group them to the Row, then one can sort fields inside Row, and also drag the Row just like a single field. Context menu will work well I think, maybe also buttons on the footer bar. Also it will make possible to drag fields in/out the Row.
As for “right now” solution: I wrote a small plugin Toolbar Publish Button (it is available on the wordpress.org) that allows my client at least get rid of excessive scrolling. I don’t think that they actually confuse the fields, it’s just a bit inconvenient to scroll constantly when saving them. Maybe it will be helpful to some of you.
I would love to fork and help out with this project if there is any help needed.
Any update on this project? I checked the To-Do list but didn’t see any mention of this thread. I’d be willing to contribute to an important feature like this.
I love what you’ve done with your custom edit page. I need to do something similar and was curious how you implemented it. Would you be willing to share your styles/js? Thanks!
Please try to implement this. The way fields are set up now makes for an unbelieveable waste of space. Also, Tab Fields and Repeater Fields aren’t the best solution for this. Simple columns / grids would be nice.
I too have required this and have noticed your thread.
My needs are not too great, so I focused on simply getting the ball rolling (Which seems to work great in first tests).
This version works very similar to tabs, just add a column field – select the width – and then the fields that follow will occupy the column. If you want to reset it to a full width layout then just create another column with the reset option.
It seems to work fine with tabs, although be sure to use it inside tabs, and not tabs inside columns.
I know this needs a lot more work, such as styling and stuff – but hey we can work on that!
Let me know how it goes if anyone gives this a try, i’d love to know how/if it works with conditional logic (Although most probably not).
EDIT: @emcniece – I really like the idea of being able to expand fields if the user desires it. I also think it would be great to get some responsive layout into this (ie: if the browser gets too small, flatten the columns) – it’s not difficult but I just want to get it fully functioning first 🙂
@elliot Condon could you add a class to each field so we can do what we need there? That’s all we’d need to be able to handle the layout. Literally just let us add a class to the field in the admin environment.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
Considering recording another "Building a Custom x Block in y minutes with ACF” screencast.— Advanced Custom Fields (@wp_acf) February 26, 2020
🗣 What type of block would be of interest to you?
© 2020 Advanced Custom Fields. Subscribe