Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Themes & Styling

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

theme

Solved by Arnaud View solution

Started by Arnaud 10 months ago · 5 replies · 111 views
10 months ago
  • 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:

TXT
![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 https://www.ramenos.net/new/ ).

In advance, thanks a lot for your help.

10 months ago

@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;
    TXT
    ![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:
    CSS
    .right {
    float: right;
    }
    
👍 1
10 months ago

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
10 months ago Solution

@pmoreno:
classes=image,right

Worked like a charm. Thank you very much!

10 months ago

Counter-intuitive solution provided by the theme... IMHO

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

CSS
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.

10 months ago

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.

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Pedro M, 2 months ago
4 193 2 months ago
Themes & Styling · by Ian, 2 months ago
3 91 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 451 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 45 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 125 3 months ago