Is it possible to build custom cards for Ghost CMS?
For example if I wanted to be able to add a new card alongside the primary; Image, Markdown, HTML, Gallery, Divider, Bookmark & Email that created an accordion and allowed the administrator to create tabs with headings and text?
Hey @posam
That sounds like a fairly complex component. I would recommend utilising JavaScript to insert an accordion into the page and use the HTML card to mark the spot. The alternative is to let the content writer write regular content and then use JavaScript to transform the content into an accordion, depending if a class or selector is applied. You can switch the option on or off using custom templates.
Just a couple of ideas. I’d be interested in exactly what you’re trying to create
I have make it as a generic extension mechanism and under internal testing these days.
Any one have interesting about my work, please drop me a line, once I finish the package, I could send you a customized distribution copy of ghost to have a early access.
Finally, I will raise a pull request for ghost core team, if it is acceptable, all ghost user could benefit from it.
We’re working out if Ghost would be appropriate for our clients needs.
They want to be able to manage all content on the website, without having to write HTML or edit template files so the editor would have to be flexible enough to allow custom cards.
i.e. for us to be able to create a new Accordion card here:
collections:
/:
permalink: /{slug}/
template: index
filter: 'tag:-hash-accordion'
Any post created with the internal tag will be a content store of an accordion, and ignoring it in the default collection will prevent the page from being rendered.
Create a script which uses the Ghost Content API to query the content with a slug. The script will search for elements on the page that have a certain attribute and a value that matches the slug of the “accordion post”, something like [data-accordion]. You can then take the HTML of the accordion post and transform it into an accordion using template code, using headings for tab titles and the content under them for sections
Final step would be to make the accordion post and inset the element that will pull it in. You can use the HTML card and inset an element that looks like this:
<div data-accordion=“accordion-slug”></div>
Optionally you can skip the collection ignore step and make the accordion element a link if you want to give a fallback if the JavaScript fails to load.
The above may seem complex, but what you’re asking for is already complex. With my suggestion the client gets to use the existing content editor without any unique or limiting text fields.
Let me know if anything is confusing or you need further explanation
Is there still no way to add custom cards in Ghost? I can’t find any documentation regarding this.
I know that the HTML card is available and very powerful but you can’t expect content writers to learn HTML and javascript just to insert something like a reference to another article.
All of the material links in this thread are dead unfortunately.
Yeah, it’s frustrating. I think the dev team tries to address this with snippets, but it would be better if there were a way (with documentation) to add your own custom cards to the editor.
If anyone is interested in studying the code that @iLoveBug developed, I did purchase a license and downloaded it (and tested it), and it actually did work.