Browse Source

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>
```
master
Kevin Ansfield 2 years ago
committed by GitHub
parent
commit
5c6cce1519
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 18 deletions
  1. +1
    -1
      assets/built/screen.css
  2. +1
    -1
      assets/built/screen.css.map
  3. +14
    -15
      assets/css/screen.css
  4. +3
    -1
      post.hbs

+ 1
- 1
assets/built/screen.css
File diff suppressed because it is too large
View File


+ 1
- 1
assets/built/screen.css.map
File diff suppressed because it is too large
View File


+ 14
- 15
assets/css/screen.css View File

@@ -1819,6 +1819,13 @@ Usage (In Ghost editor):
/* 7.6. Koenig Styles
/* ---------------------------------------------------------- */

.post-content {
display: flex;
flex-direction: column;
align-items: center;
max-width: 920px;
}

/* For Ghost 1.0 */
.kg-card-markdown {
display: flex;
@@ -1831,39 +1838,31 @@ Usage (In Ghost editor):
font-size: 1.25em;
line-height: 1.5em;
}
/* ^ .kg-card-markdown will be deprecated */

/* ^ .kg-card-markdown will be will disappear in Ghost 2.0 */

.post-template .kg-post > p:first-child {
.post-template .post-content > p:first-child {
font-size: 1.25em;
line-height: 1.5em;
}

.kg-post {
display: flex;
flex-direction: column;
align-items: center;
max-width: 920px;
}

.post-full-content .kg-image {
max-width: 100%;
}

/* 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%;
}

.post-full-content .kg-image-wide {
.post-full-content .kg-width-wide .kg-image {
max-width: 1040px;
}

.post-full-content .kg-image-full {
.post-full-content .kg-width-full .kg-image {
max-width: 100vw;
}

.kg-post figcaption {
.post-content figcaption {
font-size: 80%;
line-height: 1.6em;
text-align: center;
@@ -1900,7 +1899,7 @@ Usage (In Ghost editor):


@media (max-width: 1040px) {
.post-full-content .kg-image-full {
.post-full-content .kg-width-full .kg-image {
width: 100vw;
}
}


+ 3
- 1
post.hbs View File

@@ -33,7 +33,9 @@ into the {body} of the default.hbs template --}}
{{/if}}

<section class="post-full-content">
{{content}}
<div class="post-content">
{{content}}
</div>
</section>

{{!-- Email subscribe form at the bottom of the page --}}


Loading…
Cancel
Save