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:
parent
019842155a
commit
5c6cce1519
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
2
post.hbs
2
post.hbs
|
@ -33,7 +33,9 @@ into the {body} of the default.hbs template --}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
<section class="post-full-content">
|
<section class="post-full-content">
|
||||||
|
<div class="post-content">
|
||||||
{{content}}
|
{{content}}
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{{!-- Email subscribe form at the bottom of the page --}}
|
{{!-- Email subscribe form at the bottom of the page --}}
|
||||||
|
|
Loading…
Reference in New Issue