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.
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
You can write a Javascript function that does that for you. Here is an example I have running today on my website 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 Also, this is a very manual way and not the prettiest, but it works fine for my website!
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.