5

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

Matt Raible
  • 8,187
  • 9
  • 61
  • 120

2 Answers2

6

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?

LightGuard
  • 5,298
  • 19
  • 19
  • I wasn't aware of 'image::' vs. 'image:' so thanks for that. However, it seems that inline images 'image:' doesn't even render in the PDF. Also, I just noticed that images don't even render in the EPUB. – Matt Raible May 05 '15 at 17:25
  • Inline images don't yet work in PDF because it's not supported natively in Prawn. We do have a solution in mind, but it's not yet implemented. Images should work in the EPUB output. Perhaps the problem is that the path is not resolving correctly. – Dan Allen May 05 '15 at 21:53
  • 2
    Asciidoctor PDF does not yet have the ability to layout blocks side-by-side. I agree this would be a nice feature to have. Perhaps the best way to support it is to have the idea of an image grid. It's really hard to support arbitrary layouts in PDF, but we could model is as a pre-determined component. – Dan Allen May 05 '15 at 21:56
4

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[]
|
|===
Kiroul
  • 465
  • 2
  • 9