Center a picture with Grav

Archive
1

Hi
What is the best solution to center a picture in a article with grav
I have tried
->En Toutes Lettres - Service Web<-
without success
Do we have to use div tag with css ==> mix of html and markdown syntax

2

It’s really a combination of CSS and markdown syntax.

First ensure you have something like this in your CSS:

.center {
  display: block;
  margin: 0 auto;
}

Then you just need to use that class for your image. This is not something you can do with standard markdown, but you can with markdown extra. So you will need to enable it in your page header or in your system.yaml (for sitewide enabling):

markdown:
   extra: true

Then you can use this syntax in your markdown:

![](myimage.jpg)   {.center}

That should do it!

1 Like
3

many thanks
it worls

4

You may also want to try out markdown extra within a container:

# Some markdown syntax here and/or use images: ![](001.jpg) ![](002.jpg)

Knowing this, you will be able to do some great stuff with GRAV! :slight_smile:

5

Hello,
I’ve just tried it but I get an error:
Class ‘DOMDocument’ not found
…/­vendor/­erusev/­parsedown-extra/­ParsedownExtra.php:465

6

@andreafa Sorry for the other post. I haven’t seen your error reporting here. Your problem may come from a missing PHP module. You may try to check your php configuration (phpinfo), if the dom extensions is loaded. If not you need to install the DOM extension e.g. via sudo apt-get install php5-dom.

7

Further check if the xml extension (sudo apt-get install php-xml) is installed, too.

8

Thanks a lot, now it’s working fine

p.s. I had to restart the server to make it work,
probably restarting apache would have worked too

9

I am learning to work with Grav and twig step by step. It’s a great product, very clean and fast indeed! Obviously I have a learning curve but all in all it is great.

One thing that is bothering me is the alignment of images. I tried the approach suggested by @rhukster, but I cannot get it to work as expected. Steps I’ve taken:

  1. Added the .center CSS code to _custom.css.
  2. SASS compiled it automatically to template.css.
  3. Added the markdown extra option to site.yaml.
  4. Added the {.center} option after the image include: {.center}
  5. Cleared the Grav cache.
  6. Refreshed the page in the browser (Chrome).

It shows the left aligned picture with the text ‘{.center}’ behind it - whithout the quotes obviously ;o).

Anything I have overlooked to make this work?

10

Update: And if I put the image between

's as suggested in another reply, it just shows the image path ‘(/images/picture.jpg)’, instead of the actual image
11

After upgrading to 1.2.4 none of the methods suggested here is working for me. The container method worked on 1.0.x.
Would greatly appreciate a solution/explanation if someone has cracked this problem.

12

The first reply is for sure working. Just remember to enable markdown extra in your grav system config.
The markdown you want a css class followed by eg. { .text-center .text-blue }

# Article title { .text-center .text-blue }

Themes like hydrogen and helium have many styles you can use without adding additional css.

13

Hmm, perhaps you could double-check my (wrong)doings?

In user/config/system.yaml:

pages:
theme: antimatter
markdown_extra: true
process:
markdown: true
twig: false

In user/themes/antimatter/css/custom.css

.center {
display: block;
margin: 0 auto;
}

In the page:

{.center}

Which shows the image left-aligned followed by the text: {.center}

14

pages.markdown_extra has been deprecated, set pages.markdown.extra instead.

15

Awesome, thank you @flavioscopes! That did the trick :slight_smile: