Netlify-cms: Entry Card Customization

[zslabs]

👋everyone! I'm using the Netlify CMS within Gatsby; and have run into an issue for our admins around "clarity" of content.

One of the collections on our site is a documentation area. Within that are sections (or categories) that each of these "Documentation Article" collections are mapped to. Within each; there are like-named articles, such as "Overview" or "Authentication" where within the context of the frontend layout make perfect sense, but within the admin look like the same article:

I've gotten around the admin slugs by utilizing the slug param; like slug: "{{section}}__{{title}}" which has worked fine.

Describe the solution you'd like

Ideally, what I'd like to do is show the section (or some other piece of data) alongside that title so content editors know what they're editing; without having to remember to look at the URL bar on hover.

I've read through the custom widgets tutorial but was having trouble figuring out if there was an easy way to extend those entry cards. I believe I've tracked down the render of each to https://github.com/netlify/netlify-cms/blob/master/packages/netlify-cms-core/src/components/Collection/Entries/EntryCard.js but am unsure of how to add in my own logic there.

Any help would be greatly appreciated. Thanks!

[Undistraction]

I've just hit the exact same problem. The solution is to allow interpolation in identifier_field. I've suggested a workable solution in #1975 which would also solve this problem.

[Undistraction]

Another example:

There are a collection of items with two fields: startYear and endYear. The entry-card needs to display the date range for the item, i.e: ${startYear}–${endYear}. There is currently no way to achieve this as only a single field can be chosen and interpolation of fields is not supported in identifier_field.

[zslabs]

As @Undistraction mentioned above, even if I didn't have access to that subtext as I showed in my screen shots, but just interpolation -- that'd be a huge help!

[leonardodino]

I'm having a go at it here: https://github.com/campus-online/cms/pull/9

I too was bothered with by this omission in netlify-cms, among others like no sorting and no way to customize view modes.

if interest is enough, and with help for better docs and props, we can port it upstream (to this repo). right now it's extremely bare-bones, both links and styling must be re-done from zero. there's a example on the PR. at least the code for this component is really short and simple to re-implement.

warning: although @campus-online/cms is published on npm, it's UI is translated, and has many intentional omissions to improve bundle size for my current use. there's no guarantee of it working in any way. (:

[talves]

@leonardodino I think it would be awesome to have that as a PR to this issue. This might be a good beta version feature at the least.

[erquhart]

We should have some consensus on the resulting API before time is invested in a PR (unless the PR is a proof of concept, or you're okay with potentially having a big change request on your PR).

[leonardodino]

I saw this feature cited in the Aluminum (#2101) and was happy that it's being tackled. :tada:

Unfortunately I'm afraid that I cannot help right now. 😕
_{at least during the first weeks anyway.}

I added a comment on a related issue, that showcases the final result of my implementation.
Feel free to ask any questions. :)

_{that example, especially the article card is related to how I implemented the "slug-relations". but the other two are simple and read only from their respective entry.}

[erquhart]

Thanks for that @leonardodino!!

[leonardodino]

=== ported from #1498, this issue is superseding that one ===

I do have some code done, with examples below, but I'm too short on time right now to contribute it back. If anyone is interested, please don't hesitate to copy (: and contribute it upstream here. (or just use it, if time is also a constrain).

examples

• the article can link to a editorial (the colored tag on top) and many authors. both are optional.
• on a simpler case, the articles show the date on the right-hand side, and a "curl" if it contains a cover image.
• also, if the post has a featured: true on it's frontmatter it renders a blue band on the left.

the language is pt-BR, but I guess you can figure it out.

||
|
|
|:--:|:--:|:--:|
| articles | editorials | authors |

code

all the code is open-sourced at:

• https://github.com/campus-online/cms
• https://github.com/campus-online/content/pull/3

the most relevant PR for this feature is https://github.com/campus-online/cms/pull/9

the "whole" code for the author card (the simplest one) is here.
along with the call to register it with the cms here

[adamtaylor13]

A little new to the whole OS thing.. Could I just take @leonardodino's implementation and open a PR with it? I'm sure I'd need to run some integrations tests, etc to make sure nothing is broken, but as long as I'm giving him due creds, would it help to get this feature out there? I'm finding that it would be super useful and would love to contribute somehow.

[leonardodino]

@adamtaylor13 You can take the code, no problem and no creds needed (:

People here were still discussing what's the best approach, so it may have some revisions from my approach.

[erquhart]

This was fixed in #2140. More advanced customization would be cool in the future, but the original request here is satisfied.