Modifying the default HTML of Koenig cards


#1

Is it possible for a theme to modify the default HTML of a Koenig card?

Koenig by default uses HTML such as:

<figure class="kg-image-card">
  <img src="https://example.com/image.jpeg" class="kg-image">
</figure>

Whereas, I would like to be able to use HTML like this:

<div class="Page-row">
  <figure class="Image">
    <img class="Image-source" src="…">
  </figure>
</div>

As it’s possible to the change the default template of the navigation helper, I was hoping that Koenig cards could be customised in a similar way. Otherwise, as Koenig becomes more prevalent, more and more of a themes HTML and CSS is going to be dictated to by Ghost core.


#2

No, the HTML output of the default cards is fixed. The HTML is intentionally designed so that it’s possible to style as needed using only CSS, it’s also fixed because it’s generated at time of saving and the consumer of a post’s html field is not only themes, it’s also exposed via the API and so needs to be consistent.

If you want to modify the HTML within a post you have multiple options:

  • client-side modification using JS
  • server-side modification either via a proxy app or directly using the API
  • build-time modification when using a headless CMS static site setup

#3

You can write a Javascript function that does that for you. Here is an example I have running today on my website :slight_smile: All it does is find the element with class name post-content and stores all elements with the tag <code> in an array. Then I just loop through each index in the array and set each item’s classname to “language-python”.

(function foo(){
    var nodelist = document.getElementsByClassName('post-content')[0].getElementsByTagName('code');
    for (i = 0; i < nodelist.length; i++) {
        nodelist[i].className = 'language-python';
    }
}());

You could easily do the same with your html, but you would instead in the for-loop need to insert your <div> before and after each figure :slight_smile: Also, this is a very manual way and not the prettiest, but it works fine for my website!


#4

I thought content was stored in an agnostic JSON format, rather than as fixed HTML?

All post content in Ghost is stored in MobileDoc, and then rendered into its final form depending on the delivery destination. https://docs.ghost.org/concepts/posts/#document-storage

Perhaps I’ve misunderstood something but I don’t see why themes shouldn’t be allowed to customise the HTML of a card for it’s own use, whilst providing a sensible default to anything else.