I’ve done it for a long time, so it was just a matter of time before I could figure it out with Grav. With its distinct combo of markdown and HTML I had to find the right combination.
The problem was that once I put up an image with text flowing around it, the text would be placed right beside the image, leaving no extra white space. This is unpleasant to the eye and makes the text more difficlt to read. A mere 10 pixels of white space make all the difference.
Grav is a flat file CMS, used for small web sites. After you create the site it is no maintenance, and if you get hacked you simply republish the site.
Put this code into your Grav web page:
<style>
.padding
{
float: left;
margin-right: 20px;
}
</style>
This adds a css class using some inline css into the Grav page. You can then add any additional css that you wish. In this case the image is scaled to 500×400 pixels, floats to the left, and there is white space of 20 pixels all around, while text floats around it on the right. The resulting code is rendered into this html:
<style>
.padding
{
float: left;
margin-right: 20px;
}
</style>
I cannot say that Grav is very elegant with handling css. The inline CSS code triggers a warning in Grav: NOTICE: Grav found potential XSS issues in content: ‘dangerous_tags’. Well, I put it there. If I can find another way to do this then I’ll try the alternative. The Grav docs for image linking only offers hints at integrating css.
I did try css padding, but this somehow did not work at all.