Float an image left

Support Content & Markdown
1

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

Church of living hope {.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

2

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

3

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

4

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

5

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

6

Did you read the link I posted?

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

7

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.