How to build custom cards

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 :wave:
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 :blush:

This is weird. I was just thinking about this today. Are custom cards in the roadmap? If so, any ETA?

I am working exactly on this part, and nearly finished.

You can try: https://mapdoc.dev and have a look.

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.

2 Likes

Thank you @DavidDarnes @iLoveBug

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:

Then for the client to be able to specify accordion item headings and text:

Which we could then render through the template

Adding an accordion to your site is going to need JavaScript to add all the interactions. Here’s an idea for how to manage it in Ghost:

  1. Create a new internal tag called #accordion and modify the routes.yaml file to deliberately ignore this internal tag:

    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.

  2. 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

  3. 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 :blush:

1 Like

@posam - specifically, look at this post on @iLoveBug’s MapDoc.dev site:

As you can see, @iLoveBug’s new framework for easily adding new “cards” within the Ghost post editor is in very active development as we speak!

Stay tuned for an explosion of new Editor Cards, Templates, and Configurable Use-Case Distributions.

Here is a site where you will be able to watch this collection grow:

1 Like

@posam until you get the “Accordion” card :slight_smile: here is a relatively simple way to add accordions using the HTML card:

1 Like

@posam now you can download the customized Ghost package which support extension cards from here:

2 Likes