Having 2 images side by side in an HTML output

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Having 2 images side by side in an HTML output

xcoulon
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
Reply | Threaded
Open this post in threaded view
|

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

mojavelinux
Administrator
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



--
Reply | Threaded
Open this post in threaded view
|

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

mojavelinux
Administrator
In reply to this post by xcoulon
Oh yeah, you can also use inline images inside a paragraph.

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

Notice the single colons in the macro. You'd still need the clearfix after the images as before.

-Dan



On Thu, Aug 29, 2013 at 6:31 PM, Dan Allen <[hidden email]> wrote:
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

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]
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::http://docs.jboss.org/tools/whatsnew/jst/images/4.1.0.Alpha2/lf.png[,200]
[.left]
image::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



--



--