Image styling and manipulating in markdown is easy. But, some markdown parser have different approach to style an image. In this post, we will learn how to manipulate and style and image using kramdown parser, since Bajawa jekyll theme using kramdown as its parser.
NOTE:
This tutorial doesn’t require changing in CSS.
Image Sizing
To embed image in markdown language, here is the code:
Above code doesn’t change image resolution. The image size is 1920px x 1271px. Maybe, it’s too big to be displayed as a post image. Resize it manually using photo editor is too troublesome (if you’re not lazy, then go ahead). The image sample is here.
With kramdown parser, try below approach to resize image without changing the CSS:
{:height="auto" width="600px"}
{:class="img-responsive"}
{:height="50%" width="50%"}
This is the sample of {:height="auto" width="600px":
How is it?
Image Caption
Unfortunately, giving a caption into image in markdown language is unavailable right now. We’re trying to research that but the result is far from perfect.
In that case, to give caption in the image, we could combine figure html tag with img src as an alternative. This is the example:
<figure style="width: 600px" class="align-center">
<img src="https://kulacino.github.io/bajawa/assets/images/testimage.jpg" alt="">
<figcaption>This is caption</figcaption>
</figure>
And the result will be like this:
That’s it! Easy right?