Koenig and Custom CSS for Images

Themes
1

I am using WildBird Theme v1.8.0 and trying to align image in Markdown box by placing it in div as the theme author has suggested.

<div class="alignleft">
![alternative text](/content/images/2016/09/my_image.jpg)
</div>`

But the moment I add HTML elements, the markdown in Koenig does not display the image. I’ve been using Ghost since Kickstarter days but just now updated my Super Old blog to v2 with Koenig.
Here is the YouTube Video
Is it not possible to use HTML and Markdown in the same post?

2

@ieosjoinus in Markdown there always needs to be a blank line between any HTML and markdown, eg:

<div class="alignleft">

![alternative text](/content/images/2016/09/my_image.jpg)

</div>`
2 Likes
3

Thank you @Kevin Feel so silly, I guess white space and line break matters with Markdown. Learned in an awkward way :hot_face:

How can have text wrap around an image like this. Didn’t get anything on a google search, probably you guys know it off the top of your head. Thank you again for all the help.

1 Like
4

Hey! What you can do is use the Code Injection option in your Ghost admin and add some code to style that alignleft class. Something like this:

<style>
    .alignleft {
        float: left;
        margin: 1rem 1rem 1rem 0;
    }
</style>

Then whenever you use the code you wrote above it’ll align the image to the left, with a bit of margin for spacing :smiley:. Hope this helps!

1 Like