Impossible to align images left or right on pages with Editorial Theme

Support Themes & Styling
1

  • Theme: Editorial 2.3.8

    Last version of Grav

    Tests done with Firefox and Chrome

Hello all. I am working on the new version of my personal website and I chose Grav. I am using the “Editorial” Theme, but I am facing an annoying small challenge: image alignment.

I followed the online documentation and what I need is to align it on the right. I wrote this:

![logo-ours-ramenos](logo-ours-ramenos.jpg?classes=right "logo-ours-ramenos")

I tried by using “float-right” instead of “right”, I also tried to remove the alt text between ““, but it did not change anything, the image stays at the top left.

If you could help me with this, that would be lovely (you can see it there Mon coin du web | Ramenos.net ).

In advance, thanks a lot for your help.

2

@ramenos, It feels like there is a misconception of how Markdown for images work..

Depending on you interpretation, there could be two things going on…

  • You might be thinking that ?class=right should align the image to the right.
    It doesn’t… It only adds attribute class="right" to the <img> element.
    You should use parameter style instead like;
    ![logo-ours-ramenos](logo-ours-ramenos.jpg?style=float:right "logo-ours-ramenos")
  • Your interpretation might be right about ?class=right and you just forgot to create the matching css. You should add the .right selector to the correct css file:
    .right {
  float: right;
}
1 Like
3

Hi @ramenos. For Editorial theme you need add image to classes, like this:

![logo-ours-ramenos](logo-ours-ramenos.jpg?classes=image,right "logo-ours-ramenos")

1 Like
4

Worked like a charm. Thank you very much!

5

Counter-intuitive solution provided by the theme… IMHO

The markdown always creates an <img> element. Hence the theme should have provided css like:

img.right {
  float:right;
}

That would match the intuition shown by OP who has tried options like classes=right.

There is no need to add a second class selector like classes=image,right.

6

The image class is original from the Editorial theme, from HTML5Up, and includes more styles, such as borders, etc. The author of the original theme may want to apply those styles to all images.