How can I place two images side-by-side with Asciidoctor?

Question

I'm trying to place two images side-by-side, and ideally center the whole block in an Asciidoctor project. The code below works in the HTML5 output, but stacks the images when rendered to a PDF.

[.clearfix]
--
[.left]
.Title1
image::chapter3/images/foo.png[Foo, 450, scaledwidth="75%"]
[.left]
.Title2
image::chapter3/images/bar.png[Bar, 450, scaledwidth="75%"]
--

Is it possible to 1) render side-by-side images in a PDF and 2) center the block of images? If it's possible to specify the space between them, that would be great too.

Thanks,

Matt

Answer 1

Not sure if you can specify the space between them, but you're using the block image instead of the inline (image::...[] vs image:..[], note the colons). I'm also not sure how centring works in pdf as I don't do a lot of pdf generation, but if those are the only things on that line, they may center, or maybe a .center would do it?

Answer 2

1) render side-by-side images in a PDF

Yes. Following eskwayrd answer for Asciidoctor: how to layout two code blocks side by side? you can insert your image inside a table with only 2 columns.

[cols="a,a"]
|===
| image::foo.png[]
| image::bar.png[]
|===

I would in your case even completely hide the table

[cols="a,a", frame=none, grid=none]
|===
| image::foo.png[]
| image::bar.png[]
|===

2) center the block of images

This is currently complicated in PDF.

Well our block is now a table so we have a few options in HTML. Aligning the content with < and > is simple enough and works.

[cols=">a,<a", frame=none, grid=none]
|===
| image::foo.png[]
| image::bar.png[]
|===

Setting the table width to automatic and centering it also works in HTML:

[%autowidth, cols="a,a", frame=none, grid=none, role="center"]
|===
| image::foo.png[]
| image::bar.png[]
|===

These two methods however, for some reason, do not work in PDF when converting with asciidoctor-pdf. One "solution" for PDF would be to expand your table with extra empty columns left and right and trying to adjust their width with integers.

[cols="3,1a,1a,3", frame=none, grid=none]
|===
|
| image::foo.png[]
| image::bar.png[]
|
|===