Koenig Demo Post
<p>Hey there! Welcome to the new Ghost editor - affectionately known as <strong>Koenig</strong>.</p><p>Koenig is a brand new writing experience within Ghost, and follows more of a rich writing experience which you've come to expect from the best publishing platforms. Don't worry though! You can still use Markdown too, if that's what you prefer.</p><p>Because there are some changes to how Ghost outputs content using its new editor, we dropped this draft post into your latest update to tell you a bit about it – and simultaneously give you a chance to preview how well your theme handles these changes. So after reading this post you should both understand how everything works, and also be able to see if there are any changes you need to make to your theme in order to upgrade to Ghost 2.0.</p><hr><h1 id="what-s-new">What's new</h1><p>The new editor is designed to allow you have a more rich editing experience, so it's no longer limited to just text and formatting options – but it can also handle rich media objects, called cards. You can insert a card either by clicking on the <code>+</code> button on a new line, or typing <code>/</code> on a new line to search for a particular card. </p><p>Here's one now:</p><figure class="kg-card kg-embed-card"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">Fun announcement coming this afternoon ? what could it be?</p>&mdash; Ghost (@TryGhost) <a href="https://twitter.com/TryGhost/status/761119175192420352?ref_src=twsrc%5Etfw">August 4, 2016</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</figure><p>Cards are rich objects which contain content which is more than just text. To start with there are cards for things like images, markdown, html and embeds — but over time we'll introduce more cards and integrations, as well as allowing you to create your own!</p><h2 id="some-examples-of-possible-future-cards">Some examples of possible future cards</h2><ul><li>A chart card to display dynamic data visualisations</li><li>A recipe card to show a pre-formatted list of ingredients and instructions</li><li>A Mailchimp card to capture new subscribers with a web form</li><li>A recommended reading card to display a dynamic suggested story based on the current user's reading history</li></ul><p>For now, though, we're just getting started with the basics.</p><h1 id="new-ways-to-work-with-images">New ways to work with images</h1><p>Perhaps the most notable change to how you're used to interacting with Ghost is in the images. In Koenig, they're both more powerful and easier to work with in the editor itself - and in the theme, they're output slightly differently with different size options.</p><p>For instance, here's your plain ol' regular image:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://casper.ghost.org/v1.25.0/images/koenig-demo-1.jpg" class="kg-image" alt loading="lazy"><figcaption>A regular size image</figcaption></figure><p>But perhaps you've got a striking panorama that you really want to stand out as your readers scroll down the page. In that case, you could use the new full-bleed image size which stretches right out to the edges of the screen:</p><figure class="kg-card kg-image-card kg-width-full kg-card-hascaption"><img src="https://casper.ghost.org/v1.25.0/images/koenig-demo-2.jpg" class="kg-image" alt loading="lazy"><figcaption>It's wide</figcaption></figure><p>Or maybe you're looking for something in between, which will give you just a little more size to break up the vertical rhythm of the post without dominating the entire screen. If that's the case, you might like the breakout size:</p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://casper.ghost.org/v1.25.0/images/koenig-demo-3.jpg" class="kg-image" alt loading="lazy"><figcaption>It's wider, but not widest</figcaption></figure><p>Each of these sizes can be selected from within the editor, and each will output a number of HTML classes for the theme to do styling with. </p><p>Chances are your theme will need a few small updates to take advantage of the new editor functionality. Some people might also find they need to tweak their theme layout, as the editor canvas previously output a wrapper div around its content – but no longer does. If you rely on that div for styling, you can always add it back again in your theme.</p><p>Oh, we have some nice new image captions, too :)</p><h1 id="what-else">What else?</h1><p>Well, you can still write Markdown, as mentioned. In fact you'll find the entire previous Ghost editor <em>inside</em> this editor. If you want to use it then just go ahead and add a Markdown card and start writing like nothing changed at all:</p><!--kg-card-begin: markdown--><p>Markdown content works just the way it always did, <strong>simply</strong> and <em>beautifully</em>.</p>
<!--kg-card-end: markdown--><p>of course you can embed code blocks</p><pre><code>.new-editor {
	display: bock;
}</code></pre><p>or embed things from external services like YouTube...</p><p></p><p>and yeah you can do full HTML if you need to, as well!</p><!--kg-card-begin: html--><div style="background:#fafafa;margin-bottom:1.5em;padding:20px 50px;">
    <blink>hello world</blink>
</div><!--kg-card-end: html--><p>So everything works, hopefully, just about how you would expect. It's like the old editor, but faster, cleaner, prettier, and a whole lot more powerful.</p><h1 id="what-do-i-do-with-this-information">What do I do with this information?</h1><p>Preview this post on your site to see if it causes any issues with your theme. Click on the settings cog in the top right ?? corner of the editor, then click on '<strong>Preview</strong>' next to the 'Post URL' input.</p><p>If everything looks good to you then there's nothing you need to do, you're all set! If you spot any issues with your design, or there are some funky display issues, then you might need to make some updates to your theme based on the new editor classes being output.</p><p>Head over to the <a href="https://forum.ghost.org/t/ghost-2-0-theme-compatibility-help-support/2103">Ghost 2.0 Theme Compatibility</a> forum topic to discuss any changes and get help if needed.</p><p>That's it!</p><p>We're looking forward to sharing more about the new editor soon</p>
Hey there! Welcome to the new Ghost editor - affectionately known as Koenig.

Koenig is a brand new writing experience within Ghost, and follows more of a rich writing experience which you've come to expect from the best publishing platforms. Don't worry though! You can still use Markdown too, if that's what you prefer.

Because there are some changes to how Ghost outputs content using its new editor, we dropped this draft post into your latest update to tell you a bit about it – and simultaneously give you a chance to preview how well your theme handles these changes. So after reading this post you should both understand how everything works, and also be able to see if there are any changes you need to make to your theme in order to upgrade to Ghost 2.0.


What's new

The new editor is designed to allow you have a more rich editing experience, so it's no longer limited to just text and formatting options – but it can also handle rich media objects, called cards. You can insert a card either by clicking on the + button on a new line, or typing / on a new line to search for a particular card.

Here's one now:

Fun announcement coming this afternoon ? what could it be?

— Ghost (@TryGhost) August 4, 2016



Cards are rich objects which contain content which is more than just text. To start with there are cards for things like images, markdown, html and embeds — but over time we'll introduce more cards and integrations, as well as allowing you to create your own!


Some examples of possible future cards

 * A chart card to display dynamic data visualisations
 * A recipe card to show a pre-formatted list of ingredients and instructions
 * A Mailchimp card to capture new subscribers with a web form
 * A recommended reading card to display a dynamic suggested story based on the current user's reading history

For now, though, we're just getting started with the basics.


New ways to work with images

Perhaps the most notable change to how you're used to interacting with Ghost is in the images. In Koenig, they're both more powerful and easier to work with in the editor itself - and in the theme, they're output slightly differently with different size options.

For instance, here's your plain ol' regular image:

But perhaps you've got a striking panorama that you really want to stand out as your readers scroll down the page. In that case, you could use the new full-bleed image size which stretches right out to the edges of the screen:

Or maybe you're looking for something in between, which will give you just a little more size to break up the vertical rhythm of the post without dominating the entire screen. If that's the case, you might like the breakout size:

Each of these sizes can be selected from within the editor, and each will output a number of HTML classes for the theme to do styling with.

Chances are your theme will need a few small updates to take advantage of the new editor functionality. Some people might also find they need to tweak their theme layout, as the editor canvas previously output a wrapper div around its content – but no longer does. If you rely on that div for styling, you can always add it back again in your theme.

Oh, we have some nice new image captions, too :)


What else?

Well, you can still write Markdown, as mentioned. In fact you'll find the entire previous Ghost editor inside this editor. If you want to use it then just go ahead and add a Markdown card and start writing like nothing changed at all:

Markdown content works just the way it always did, simply and beautifully.


of course you can embed code blocks

.new-editor {
	display: bock;
}

or embed things from external services like YouTube...



and yeah you can do full HTML if you need to, as well!


hello world


So everything works, hopefully, just about how you would expect. It's like the old editor, but faster, cleaner, prettier, and a whole lot more powerful.


What do I do with this information?

Preview this post on your site to see if it causes any issues with your theme. Click on the settings cog in the top right ?? corner of the editor, then click on 'Preview' next to the 'Post URL' input.

If everything looks good to you then there's nothing you need to do, you're all set! If you spot any issues with your design, or there are some funky display issues, then you might need to make some updates to your theme based on the new editor classes being output.

Head over to the Ghost 2.0 Theme Compatibility forum topic to discuss any changes and get help if needed.

That's it!

We're looking forward to sharing more about the new editor soon
{"version":"0.3.1","atoms":[],"cards":[["hr",{}],["embed",{"url":"https://twitter.com/TryGhost/status/761119175192420352","html":"<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">Fun announcement coming this afternoon ? what could it be?</p>&mdash; Ghost (@TryGhost) <a href=\"https://twitter.com/TryGhost/status/761119175192420352?ref_src=twsrc%5Etfw\">August 4, 2016</a></blockquote>\n<script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n","type":"rich"}],["image",{"src":"https://casper.ghost.org/v1.25.0/images/koenig-demo-1.jpg","alt":"","caption":"A regular size image"}],["image",{"src":"https://casper.ghost.org/v1.25.0/images/koenig-demo-2.jpg","alt":"","cardWidth":"full","caption":"It's wide"}],["image",{"src":"https://casper.ghost.org/v1.25.0/images/koenig-demo-3.jpg","alt":"","cardWidth":"wide","caption":"It's wider, but not widest"}],["markdown",{"markdown":"Markdown content works just the way it always did, **simply** and *beautifully*."}],["code",{"code":".new-editor {\n\tdisplay: bock;\n}"}],["html",{"html":"<div style=\"background:#fafafa;margin-bottom:1.5em;padding:20px 50px;\">\n    <blink>hello world</blink>\n</div>"}]],"markups":[["strong"],["code"],["em"],["a",["href","https://forum.ghost.org/t/ghost-2-0-theme-compatibility-help-support/2103"]]],"sections":[[1,"p",[[0,[],0,"Hey there! Welcome to the new Ghost editor - affectionately known as "],[0,[0],1,"Koenig"],[0,[],0,"."]]],[1,"p",[[0,[],0,"Koenig is a brand new writing experience within Ghost, and follows more of a rich writing experience which you've come to expect from the best publishing platforms. Don't worry though! You can still use Markdown too, if that's what you prefer."]]],[1,"p",[[0,[],0,"Because there are some changes to how Ghost outputs content using its new editor, we dropped this draft post into your latest update to tell you a bit about it – and simultaneously give you a chance to preview how well your theme handles these changes. So after reading this post you should both understand how everything works, and also be able to see if there are any changes you need to make to your theme in order to upgrade to Ghost 2.0."]]],[10,0],[1,"h1",[[0,[],0,"What's new"]]],[1,"p",[[0,[],0,"The new editor is designed to allow you have a more rich editing experience, so it's no longer limited to just text and formatting options – but it can also handle rich media objects, called cards. You can insert a card either by clicking on the "],[0,[1],1,"+"],[0,[],0," button on a new line, or typing "],[0,[1],1,"/"],[0,[],0," on a new line to search for a particular card. "]]],[1,"p",[[0,[],0,"Here's one now:"]]],[10,1],[1,"p",[[0,[],0,"Cards are rich objects which contain content which is more than just text. To start with there are cards for things like images, markdown, html and embeds — but over time we'll introduce more cards and integrations, as well as allowing you to create your own!"]]],[1,"h2",[[0,[],0,"Some examples of possible future cards"]]],[3,"ul",[[[0,[],0,"A chart card to display dynamic data visualisations"]],[[0,[],0,"A recipe card to show a pre-formatted list of ingredients and instructions"]],[[0,[],0,"A Mailchimp card to capture new subscribers with a web form"]],[[0,[],0,"A recommended reading card to display a dynamic suggested story based on the current user's reading history"]]]],[1,"p",[[0,[],0,"For now, though, we're just getting started with the basics."]]],[1,"h1",[[0,[],0,"New ways to work with images"]]],[1,"p",[[0,[],0,"Perhaps the most notable change to how you're used to interacting with Ghost is in the images. In Koenig, they're both more powerful and easier to work with in the editor itself - and in the theme, they're output slightly differently with different size options."]]],[1,"p",[[0,[],0,"For instance, here's your plain ol' regular image:"]]],[10,2],[1,"p",[[0,[],0,"But perhaps you've got a striking panorama that you really want to stand out as your readers scroll down the page. In that case, you could use the new full-bleed image size which stretches right out to the edges of the screen:"]]],[10,3],[1,"p",[[0,[],0,"Or maybe you're looking for something in between, which will give you just a little more size to break up the vertical rhythm of the post without dominating the entire screen. If that's the case, you might like the breakout size:"]]],[10,4],[1,"p",[[0,[],0,"Each of these sizes can be selected from within the editor, and each will output a number of HTML classes for the theme to do styling with. "]]],[1,"p",[[0,[],0,"Chances are your theme will need a few small updates to take advantage of the new editor functionality. Some people might also find they need to tweak their theme layout, as the editor canvas previously output a wrapper div around its content – but no longer does. If you rely on that div for styling, you can always add it back again in your theme."]]],[1,"p",[[0,[],0,"Oh, we have some nice new image captions, too :)"]]],[1,"h1",[[0,[],0,"What else?"]]],[1,"p",[[0,[],0,"Well, you can still write Markdown, as mentioned. In fact you'll find the entire previous Ghost editor "],[0,[2],1,"inside"],[0,[],0," this editor. If you want to use it then just go ahead and add a Markdown card and start writing like nothing changed at all:"]]],[10,5],[1,"p",[[0,[],0,"of course you can embed code blocks"]]],[10,6],[1,"p",[[0,[],0,"or embed things from external services like YouTube..."]]],[1,"p",[]],[1,"p",[[0,[],0,"and yeah you can do full HTML if you need to, as well!"]]],[10,7],[1,"p",[[0,[],0,"So everything works, hopefully, just about how you would expect. It's like the old editor, but faster, cleaner, prettier, and a whole lot more powerful."]]],[1,"h1",[[0,[],0,"What do I do with this information?"]]],[1,"p",[[0,[],0,"Preview this post on your site to see if it causes any issues with your theme. Click on the settings cog in the top right ?? corner of the editor, then click on '"],[0,[0],1,"Preview"],[0,[],0,"' next to the 'Post URL' input."]]],[1,"p",[[0,[],0,"If everything looks good to you then there's nothing you need to do, you're all set! If you spot any issues with your design, or there are some funky display issues, then you might need to make some updates to your theme based on the new editor classes being output."]]],[1,"p",[[0,[],0,"Head over to the "],[0,[3],1,"Ghost 2.0 Theme Compatibility"],[0,[],0," forum topic to discuss any changes and get help if needed."]]],[1,"p",[[0,[],0,"That's it!"]]],[1,"p",[[0,[],0,"We're looking forward to sharing more about the new editor soon"]]]],"ghostVersion":"3.0"}