Float an image left

Is there any extension in the md image syntax to float a picture to the left?
If not, how can we do this with HTML?

From the suggested archive I am trying this

{.float-left} We rent space at the Church of Living Hope for our rehearsals. We have the use of two large rooms, as well as a storage room forour percussion instruments. The church is located at 1, Consumers Drive, off Lansdowne, next to the OPP Offices, and across from the shopping centre on Landsdowne East.

But I just get the picture with one line beside it and the rest below
And the line starts with {.float-left}

Thanks

Norma

Hi Norma,

Might this info help:?
https://learn.getgrav.org/content/media#html-title-alt-classes

Also, Markdown Extra (in system config) needs to be enabled.

Cheers,
Paul

Think you don't have to enable markdown extra for using classes on images.
Look here:
https://learn.getgrav.org/content/image-linking#image-attributes

You don't need markdown extra, in fact I would recommend not using it as it causes some other markdown bugs.

Are you sure? When I disable Markdown Extra {.fl} and {fr} do not work and get displayed as text

Did you read the link I posted?

![My Image](my-image.jpg?classes=float-left)

As @arank said, this can be achieved without extended markdown. It may also be necessary to clear the float after each block, the following works for me:

CSS:

/*add classes for image location*/
img.float-left {display:inline; float:left; margin:5px 15px 5px 0; max-width: 47%;}
img.float-right {float:right; margin:5px 0 5px 15px; max-width: 47%;}
img.aligncenter {display:block; margin:10px auto;}
img.border {background:#ccc; border:4px solid #f0f0f0; color:#333; padding:1px;}

A page of mardown with HTML special sauce

---
title: FLOATS
---

##Floats

![](leftfloat.jpg?classes=float-left)

### Blah Blah 

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.

<div style="clear: both;"></div>

![](rightfloat.jpg?classes=float-right)

### Blah Blah 

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.

<div style="clear: both;"></div>

![](leftfloat2.jpg?classes=float-left)

### Blah Blah 

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.