Ghost 1.25 Koenig updates (#463)

refs https://github.com/TryGhost/Ghost/pull/9741
- Ghost 1.25 has updated the HTML output of Koenig beta posts
  - the `<div class="kg-post">` wrapper around post content has been removed
  - for image cards the `.kg-image-wide` and `.kg-image-full` classes have been changed to `.kg-width-wide` and `.kg-width-full` and applied to the `<figure>` element rather than the `<img>` element
- this will be the default for *all* posts after upgrading to Ghost 2.0

Example output of the `{{content}}` helper for Koenig beta...

Before 1.25.0 (Ghost 1.23.0-1.24.9):
```html
<div class="kg-post">
    <figure class="kg-image-card">
        <img class="kg-image kg-image-wide" src="...">
        <figcaption>example wide image</figcaption>
    </figure>
</div>
```

After 1.25.0:
```html
<figure class="kg-image-card kg-width-wide">
    <img class="kg-image" src="...">
    <figcaption>example wide image</figcaption>
</figure>
```

For reference, in Ghost 1.x a non Koenig post with nothing but an image in the markdown (`![](...)`) would generate output like this:

```html
<div class="kg-card-markdown">
    <img src="...">
</div>
```
This commit is contained in:
Kevin Ansfield 2018-07-23 12:20:46 +01:00 committed by GitHub
parent 019842155a
commit 5c6cce1519
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 18 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1819,6 +1819,13 @@ Usage (In Ghost editor):
/* 7.6. Koenig Styles /* 7.6. Koenig Styles
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.post-content {
display: flex;
flex-direction: column;
align-items: center;
max-width: 920px;
}
/* For Ghost 1.0 */ /* For Ghost 1.0 */
.kg-card-markdown { .kg-card-markdown {
display: flex; display: flex;
@ -1831,39 +1838,31 @@ Usage (In Ghost editor):
font-size: 1.25em; font-size: 1.25em;
line-height: 1.5em; line-height: 1.5em;
} }
/* ^ .kg-card-markdown will be deprecated */ /* ^ .kg-card-markdown will be will disappear in Ghost 2.0 */
.post-template .post-content > p:first-child {
.post-template .kg-post > p:first-child {
font-size: 1.25em; font-size: 1.25em;
line-height: 1.5em; line-height: 1.5em;
} }
.kg-post {
display: flex;
flex-direction: column;
align-items: center;
max-width: 920px;
}
.post-full-content .kg-image { .post-full-content .kg-image {
max-width: 100%; max-width: 100%;
} }
/* Preventing full-width image overlap with post image. */ /* Preventing full-width image overlap with post image. */
.post-full-image + .post-full-content .kg-post *:first-child .kg-image { .post-full-image + .post-full-content .kg-content *:first-child .kg-image {
width: 100%; width: 100%;
} }
.post-full-content .kg-image-wide { .post-full-content .kg-width-wide .kg-image {
max-width: 1040px; max-width: 1040px;
} }
.post-full-content .kg-image-full { .post-full-content .kg-width-full .kg-image {
max-width: 100vw; max-width: 100vw;
} }
.kg-post figcaption { .post-content figcaption {
font-size: 80%; font-size: 80%;
line-height: 1.6em; line-height: 1.6em;
text-align: center; text-align: center;
@ -1900,7 +1899,7 @@ Usage (In Ghost editor):
@media (max-width: 1040px) { @media (max-width: 1040px) {
.post-full-content .kg-image-full { .post-full-content .kg-width-full .kg-image {
width: 100vw; width: 100vw;
} }
} }

View File

@ -33,7 +33,9 @@ into the {body} of the default.hbs template --}}
{{/if}} {{/if}}
<section class="post-full-content"> <section class="post-full-content">
{{content}} <div class="post-content">
{{content}}
</div>
</section> </section>
{{!-- Email subscribe form at the bottom of the page --}} {{!-- Email subscribe form at the bottom of the page --}}