Asciidoctor :: Discussion - Re: Having 2 images side by side in an HTML output

Re: Having 2 images side by side in an HTML output

Posted by mojavelinux on
URL: https://discuss.asciidoctor.org/Having-2-images-side-by-side-in-an-HTML-output-tp532p536.html

Xaviar,

There are two solutions to this problem, both which involve a new feature in Asciidoctor 0.1.4, image positioning roles.

What you want to do is float the images to the left, then stop the float after the images. Asciidoctor 0.1.4 introduces the roles "left" and "right" for images that add the float CSS. Of course, this also means you can add CSS rules for these roles in your own stylesheet.

Here's how that looks:

```asciidoc

content before

[.left]
image::<a href="http://docs.jboss.org/tools/whatsnew/jst/images/4.1.0.Alpha2/lf.png[,200]">http://docs.jboss.org/tools/whatsnew/jst/images/4.1.0.Alpha2/lf.png[,200]
[.left]
image::<a href="http://docs.jboss.org/tools/whatsnew/jst/images/4.1.0.Beta1/set.png[,400]">http://docs.jboss.org/tools/whatsnew/jst/images/4.1.0.Beta1/set.png[,400]

content after

```

The remaining challenge is how to clear the float below the images. One solution is to wrap the images in an open block and add a role to the open block that maps to a CSS rule that handles trailing float clearing.

For example:

```asciidoc

content before

[.clearfix]

--
[.left]
image::<a href="http://docs.jboss.org/tools/whatsnew/jst/images/4.1.0.Alpha2/lf.png[,200]">http://docs.jboss.org/tools/whatsnew/jst/images/4.1.0.Alpha2/lf.png[,200]
[.left]
image::<a href="http://docs.jboss.org/tools/whatsnew/jst/images/4.1.0.Beta1/set.png[,400]">http://docs.jboss.org/tools/whatsnew/jst/images/4.1.0.Beta1/set.png[,400]
--

content after

```

You need to make sure that the .clearfix CSS rule is defined in your stylesheet as documented at http://nicolasgallagher.com/micro-clearfix-hack/.

Another option is to insert raw HTML under the images using the following snippet:

```asciidoc

ifdef::basebackend-html[]
++++
<div style="clear: both"></div>
++++

endif::[]

```

Which can also be written as:

```asciidoc

ifdef::basebackend-html[++++]
ifdef::basebackend-html[<div style="clear: both"></div>]

ifdef::basebackend-html[++++]

```

Here's the second solution in all:

```asciidoc

content before
[.clearfix]
--
[.left]
image::<a href="http://docs.jboss.org/tools/whatsnew/jst/images/4.1.0.Alpha2/lf.png[,200]">http://docs.jboss.org/tools/whatsnew/jst/images/4.1.0.Alpha2/lf.png[,200]
[.left]
image::<a href="http://docs.jboss.org/tools/whatsnew/jst/images/4.1.0.Beta1/set.png[,400]">http://docs.jboss.org/tools/whatsnew/jst/images/4.1.0.Beta1/set.png[,400]
--

ifdef::basebackend-html[++++]
ifdef::basebackend-html[<div style="clear: both"></div>]

ifdef::basebackend-html[++++]

content after

```

I hope that helps!

-Dan

p.s. We are discussing adding a .clearfix CSS rule to the default stylesheet. The open question is whether clearfix is the best name, or if we can name it something more clear.

https://github.com/asciidoctor/asciidoctor/issues/602

On Wed, Aug 28, 2013 at 2:35 AM, xcoulon [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Hello,

Some WISYWIG tools allow for side-by-side images (see for example the 2 images in the "HTML5/JQuery Mobile Palette" of https://community.jboss.org/en/tools/blog/2013/07/23/jboss-tools-41-and-developer-studio-7-go-ga)

For now, I have the following asciidoc source:

image::lf.png[]
image::set.png[]

which produces the following output:

<div class="imageblock">
<div class="content">
<img alt="lf" src="http://localhost:4242/blog/images/lf.png"></img>
</div>
</div>
<div class="imageblock">
<div class="content">
<img alt="set" src="http://localhost:4242/blog/images/set.png">
</img>
</div>

Is there a way to have both <div class="content"> elements in the same <div class="imageblock"> parent element ?

Then, I could probably use some CSS rule to have the 2 images appear side-by-side.

Thanks
Best regards,
Xavier

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Having-2-images-side-by-side-in-an-HTML-output-tp532.html

To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

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