Login  Register

Re: Newbie question: grid layout

Posted by sean.osterberg on Jul 25, 2015; 7:42pm
URL: https://discuss.asciidoctor.org/Newbie-question-grid-layout-tp3562p3566.html

I don't think there's an example in the manual, but this should work fine using inline images. I don't know AsciidocFX, but the inline appearance is dependent in part on the CSS used to display the page. Alternatively you might accidentally be using block images (images:: with two colons instead of images:) by accident or not entering the correct path to the image. For example using inline images:
= Test Page

This is a preamble.

image:https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png[Tux penguin]
image:https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png[Tux penguin]

If you save a file and build out the page, you'll see that the images are right next to each other. You can further customize the appearance of the images if you use positioning attributes: http://asciidoctor.org/docs/user-manual/#put-images-in-their-place, or using custom CSS.

Depending on how complicated you want the image layout, it may be better to use a table instead and then hide the table row/col outlines using a custom style. An example:
= Test Page

This is a preamble.

[.custom-style]
[cols="50a,50a"]
|===
|image:https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png[Tux penguin]
|image:https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png[Tux penguin]
|===