Newbie question: grid layout

hi all,

I have a simple question but I'm surprised I cannot find any help about it on the Internet.
I'd like to create more complex layouts, for example a grid layout. Sample use case: I want to be able to display images like that:

-------------         -----------------
| img1   |        | img2         |
--------------         -----------------

I tried the following things:
* inline image (image:...): nothing is displayed! (for info, I use AsciidocFX with reveal.js backend)
* images inside a table (that is how I use to create grid layouts on a wiki, using tables with invisible borders): the columns widths does not take into account the size of the images!
* lots of others desperate attempts using float and/or align attributs.

Am I really missing something or is this kind of simple layout not easily feasible with AsciiDoctor?

Thanks for your help.
Thomas

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]
|===

thank you for your answer. In fact the problem in only when using deck.js or reveal.js backends. With these backends the layout is completly messed up (the worst case is with reveal.js): inline images are not displayed, table width is not taken into account, columns widths does not scale to the size of the images they have in cells...
Does anyone know how to use correctly these backends?

thomas

thomas wrote

Does anyone know how to use correctly these backends?

I mostly use Reveal.js. I've posted a slide deck that shows two images side by side.

Demo: http://tedbergeron.github.io/slide-images/

Here's the AsciiDoc showing the images https://github.com/tedbergeron/slide-images/blob/gh-pages/index.txt

I borrowed sean's table to demo the alignment of remote images.

Thanks for the examples, that's great!
I also turned out that some of the problems I have are related to the editor I use (AsciidocFX), it doesn't handle very well slide backends.

Thanks for the clarification. And...

mojavelinux wrote

Speaking of the $subject, I've been wanting to explore the idea of using a
CSS grid instead of a table to layout content inside tables marked with the
"grid-layout" role. There's no reason that an AsciiDoc table has to map to
an HTML table.
--
Dan Allen | http://google.com/profiles/dan.j.allen

+1 for CSS grid instead of a table

Hi Dan,
Thank you for this interesting answer. I filled an issue on the AsciidocFX tracker (https://github.com/asciidocfx/AsciidocFX/issues/113) to list some rendering issues I have. Currently, there are so many issues that using AsciidocFX for authoring slides is a dead end. I also tried the asciidoc Firefox plugin but it seems that it cannot render with a slide backend. So up to now it seems that there is no other way for authoring slides than the good old plain text editor.
Regards,
Thomas

Wouldn't a flexbox be a better option than a grid table?

On Thursday, July 30, 2015, mojavelinux [via Asciidoctor :: Discussion] <[hidden email]> wrote:

On Wed, Jul 29, 2015 at 11:50 PM, thomas [via Asciidoctor :: Discussion] <[hidden email]> wrote:

I filled an issue on the AsciidocFX tracker (https://github.com/asciidocfx/AsciidocFX/issues/113) to list some rendering issues I have.

Excellent! I think that the template-related issues will probably be managed in the reveal.js repository once the Jade templates are merged in...but that migration is still in progress, so I'll let Rahman decide when and where the issues should be routed. 

 

Currently, there are so many issues that using AsciidocFX for authoring slides is a dead end.

It's important to understand that the reveal.js support in AsciidocFX is in a very, very early stage. It was only just created a few weeks ago and therefore cannot be expected to be anything more than a prototype at this point. But Rahman has been moving fast with AsciidocFX, so I expect good things (and stability) to come quickly.

 

I also tried the asciidoc Firefox plugin but it seems that it cannot render with a slide backend.

Not yet. The work in AsciidocFX to get the templates working is a prerequisite for this. You can track the issue here: https://github.com/asciidoctor/asciidoctor.js/issues/5

 

So up to now it seems that there is no other way for authoring slides than the good old plain text editor.

Most likely. Keep in mind that there are plugins for some editors (such as Sublime) that are based on the Asciidoctor Ruby command, which should work today.

Cheers,

-Dan

--

Dan Allen | http://google.com/profiles/dan.j.allen

---

If you reply to this email, your message will be added to the discussion below:

http://discuss.asciidoctor.org/Newbie-question-grid-layout-tp3562p3583.html

To start a new topic under Asciidoctor :: Discussion, email <a href="javascript:_e(%7B%7D,&#39;cvml&#39;,&#39;ml-node%2Bs49171n1h37@n6.nabble.com&#39;);" target="_blank">ml-node+s49171n1h37@...
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

--
Sent from Gmail Mobile