Loading... |
Reply to author |
Edit post |
Move post |
Delete this post |
Delete this post and replies |
Change post date |
Print post |
Permalink |
Raw mail |
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 |
Loading... |
Reply to author |
Edit post |
Move post |
Delete this post |
Delete this post and replies |
Change post date |
Print post |
Permalink |
Raw mail |
Administrator
|
Xaviar, There are two solutions to this problem, both which involve a new feature in Asciidoctor 0.1.4, image positioning roles. [.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 ifdef::basebackend-html[++++]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>] 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, ... [show rest of quote] -- Dan Allen | http://google.com/profiles/dan.j.allen |
Loading... |
Reply to author |
Edit post |
Move post |
Delete this post |
Delete this post and replies |
Change post date |
Print post |
Permalink |
Raw mail |
Administrator
|
In reply to this post by xcoulon
Oh yeah, you can also use inline images inside a paragraph. Notice the single colons in the macro. You'd still need the clearfix after the images as before.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] On Thu, Aug 29, 2013 at 6:31 PM, Dan Allen <[hidden email]> wrote:
... [show rest of quote] -- Dan Allen | http://google.com/profiles/dan.j.allen |
Free forum by Nabble | Edit this page |