decaporg / decaporg/decap-cms

No way to meaningfully customize EntryCards (list/grid cards)

Open
#2,868 15 comments 13 reactions 0 assignees View on GitHub
pinned
Dominant language
JavaScript
Stars
19.4k
Forks
3.1k
Avg merge
1d 14h
Merged PRs (30d)
9

Description

**Summary**

Given the flexibility of the collection system, it's highly incongruous to strictly limit the visible summary on list and grid cards to a single line of un-formatted text. At some point, this may warrant a customization system parallel to what's now available for previews, where modules are created for each collection type that define their list and grid cards—that would be a best-case scenario.

In the meantime, the same result can be achieved by simply allowing the configured collection summary (what in the EntryCard.js is assigned to the "title" constant) to include HTML tags. That, paired with currently-permitted CSS overriding, would give developers a lot of freedom in designing list and grid cards.

This can be achieved simply by rendering EntryCard titles using dangerouslySetInnerHTML. Then, cards could easily be configured on a collection-specific basis.

**Example**

In config.yml, consider a collection with the following summary:

summary: " {{fullName}}{{impact}}"

... with this CSS added to static/admin/cms.css:

h2[class*=ListCardTitle] img {
max-width: 100px;
float: left;
margin: 0 20px 20px 0;
}

h2[class*=ListCardTitle] .fullName {
font-size: 1.2em;
font-weight: bold;
}

h2[class*=ListCardTitle] .impact {
display: block;
font-size: 0.95em;
margin-top: 10px;
}

This would result in an EntryCard that looks like this:

![image](https://www.dropbox.com/s/5dwdnhkmyiqrvl7/netlify-cms-html-tags-in-title.jpg?dl=0&raw=1)

I've prepared a branch in my fork with this change: https://github.com/MilesRomney/netlify-cms/commit/0c6a719304453e28b1995767f164e3ff9d6cd6f9

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.