Skip to main content

How to center images horizontally using Grav

I've been playing around a bit with Grav. I was posing the question to myself: for the relatively simple use-cases I'm dealing with, could it possibly work for my purposes as an alternative to ProcessWire? 

The problem
I was initially dismayed to find that Grav uses Markdown as its editor, which does not offer native support for horizontal centering of anything (text or images). However, Grav offers some tweaks that help make it easier to do specific things you might commonly want to do. I tried writing a sample article, and I found that one of the hardest things to do was to center an image horizontally. And horizontal centering of images is something I would typically do in most of the articles I would write.

So the lack of easy horizontal centering is a highly significant drawback IMHO (most people do want to center images in an article!) However, this issue is made up for by other things in Grav: the relative speed, ease and flexibility of custom theming and built-in support for metadata. It's rare to get all those in one package natively.

After playing around a bit, I found a solution to the horizontal centering of images. I'm not saying it's the only solution - I've been playing with Grav for only a few hours at this point and still have lots to learn. I'll update this if I find a more elegant solution later.

Solution A - easiest setup but annoying for ongoing use
1. In admin panel, use Markdown Extra instead of the default Markdown. This allows you to add extra html beyond what is normally allowed in Markdown. You'll need it.
Configuration -> System -> Markdown -> Markdown Extra

When reading the PHP Markdown Extra documentation by Michael Fortin, you can see what you need to do, which I'll describe below in the next step.

2. Wrap the image markdown code in a div with markdown="1" and add whatever style you like to the div, as follows:

<div markdown="1" style="text-align:center">
![My Image](/images/apples_500.jpg)
</div>

The above code assumed you have put all your images into an "images" folder. I'm still debating which way is best; images folder or just use the Grav default of per-page images. I'm leaning toward per-page images, since I don't expect to use most images in more than one article.

If you're using per-page images, only the image code would change, so it would look like this:

<div markdown="1" style="text-align:center">
![My Image](beach_300.jpg)
</div>

If you only want to center text and not images, you don't even have to worry about enclosing it in a div with markdown set to 1. Simply insert the HTML, e.g.

<p style="text-align:center">Let's center this text.</p>

Solution B - harder initial setup but easiest for ongoing use
1. Although you won't need Markdown Extra, you'll need to add a code snippet to your CSS file, i.e. to whichever CSS file is in use. Most Grav themes support and automatically load the file custom.css (in your theme's CSS folder) so you can add it in there. Here's what to add:

.align_center {
    /* for images  */ 
    display: block;
    margin: 1em auto; 
    position: relative;
    top: 0.5em;
}

2. Insert your image into your content area as normal by dragging it in, then add "?classes=align_center" (without the quotes) to the filename of your image.

Here's an example:

![My new image](sunset.jpg?classes=align_center)

This is probably the easiest way to do it so long as you're planning on sticking with the same theme. However, if you're planning on changing themes then either you'll have to add the CSS code snippet whenever you switch to a new theme, or simply use Solution A, which will still work even if you switch themes.

UPDATE September 3, 2020: I decided that I will not be using Grav and instead will be staying with ProcessWire. This is because the documentation for custom fields (both the input and the usage) is much better for ProcessWire than for Grav. For example, when setting up a new field, limiting the range of valid data input into a custom field was intuitive in ProcessWire but poorly documented in Grav. This is not a big criticism of Grav; after all I've been using ProcessWire for years but only just started playing briefly with Grav, so I'm already more familiar with ProcessWire. Nonetheless, I see no compelling reason for me to use Grav as it does not appear to offer any advantage over ProcessWire for my particular use case, other than not requiring a database, which is not a dealbreaker for me.

Conclusion
It's certainly possible to center images horizontally in the body of the main text in Grav. However, it's rather clunky. This is something that ought to be achievable in one click - but is not. This is definitely a negative UX for the content creator. I'm not sure why they decided on the Markdown editor instead of something more fully featured (and customizable for those who want it) like CK Editor. That being said, Markdown Extra can handle a lot of stuff, and I'm finding it's actually much faster to put in code, links, etc all in one spot. As opposed to constantly toggling between HTML and WYSIWYG like I have been doing in CK Editor and other html editors each time I want to add specialty code.

I think when I get used to it, Markdown Extra will work out really well for me. But I still miss the ability to center images or text with just one click.


Popular posts from this blog

Life using the Linux operating system exclusively for the last few years

Above: my Linux desktop layout. Back in 2017, I switched my operating system entirely to Linux. In case anyone is wondering, here is what I experienced over the last few years. Others I interact with have no idea I'm on Linux. For example, if someone emails me an MS Word document that I need to complete, I simply open it with LibreOffice (an open-source word processing program that is pre-installed on most Linux systems), edit the document as needed - which is very easy since the same sorts of functionalities are available in LibreOffice - and then I can save it in MS Word format and email it back. Likewise, if I'm on a Zoom call, everything works just the way it does on PC and Mac. Zoom makes their application available for Linux too, I downloaded it and let it self-install, and it works exactly the same way as it does on other operating systems. I can point-and-click my way to whatever I need to do on Linux; no special knowledge required. If you want to dig deeper into script...

Correct usage of unwind-protect and with-open-file in Lisp

Learning to use unwind-protect in Lisp typically crops up very early on when you're first learning the language. In fact, anything to do with I/O is going to be something you'll need to know early on. Yet unfortunately, I find that unwind-protect is not explained sufficiently well for a beginner to understand not just how to use it correctly, but why and when . Grappling with this myself, I found that hands-down the best explanation came from this YouTube video from Baggers: Luckily, in the case of file handlers, LISP already assumes you'll want to open a file with unwind-protect, so it provides the with-open-file macro for this exact purpose. It closes the file handler for you with a built-in unwind-protect. This is an advantage over manually opening and closing your file handlers, because if your program opens the file but never gets to the part with the close command (for example due to a run-time error in between those stages), the built-in unwind-protect make...

About Me

My photo
Vera
I'm a wife and mother. I don't have any formal computer science qualifications, or any religious qualifications. I have a PhD in biochemistry. This photo is of me, but is confusing for AI.