Asciidoctor :: Discussion

Borders for images

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

11 messages Options

jnorthr

Aug 05, 2014; 10:07am

Borders for images

33 posts

Do not quite get how i can make a thick black border around some of the images that go in my asciidoctor .adoc file. The images have awhite background and when printed on white paper they are lost as the reader cannot easily see what is part of the image, etc.

any ideas ?

thx
jim

mojavelinux

Aug 05, 2014; 9:41pm

Re: Borders for images

Administrator

2681 posts

If you are converting to HTML and using the default stylesheet, you can simply add the role "thumb" to the image. It doesn't actually make a thumbnail, just makes it display like one (with a border).

.sample.adoc

----

[.thumb]

image::image.jpg[]

----

If you want a different look, then just make up your own role and add it to the stylesheet. If you use a custom stylesheet, add it there. If you use the default stylesheet, add a docinfo.html file with extra markup for the <head> tag and activate it by setting the attribute docinfo2.

.sample.adoc

----

[.bordered]

image::image.jpg[]

----

.docinfo.html

----

<style>

.imageblock.bordered img {

border: 1px solid black;

}

</style>

----

$ asciidoctor -a docinfo2 sample.adoc

Let me know if you have follow-up questions.

Cheers,

-Dan

On Tue, Aug 5, 2014 at 4:07 AM, jnorthr [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Do not quite get how i can make a thick black border around some of the images that go in my asciidoctor .adoc file. The images have awhite background and when printed on white paper they are lost as the reader cannot easily see what is part of the image, etc.

any ideas ?

thx
jim

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Borders-for-images-tp1957.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

jnorthr

Aug 06, 2014; 12:23pm

Re: Borders for images

33 posts

Wonderful Dan ! Thank you very much for that.

Have tried it as this:

[.thumb]
image::images/example1.png[Groovy Document Index, align="center"]

and get a border as you say though the image does not appear centered. It just comes out left justified, so i may just need to create a style as you describe to make it centered.

If you are interested, we are using asciidoctor to write documentation on how people can contribute to the groovy project. See here : http://builders.mybluemix.net/docs

My next project is to write a groovy template engine that serves *.adoc files directly from a groovy-powered server like : http://caelyf.de.a9sapp.eu/ using asciidoctorJ 0.1.4 - well that's the plan anyway :-}

thanx for all your hard work too !

kind regards
jim

On 05/08/14 23:41, mojavelinux [via Asciidoctor :: Discussion] wrote:

If you are converting to HTML and using the default stylesheet, you can simply add the role "thumb" to the image. It doesn't actually make a thumbnail, just makes it display like one (with a border).

.sample.adoc

----

[.thumb]

image::image.jpg[]

----

If you want a different look, then just make up your own role and add it to the stylesheet. If you use a custom stylesheet, add it there. If you use the default stylesheet, add a docinfo.html file with extra markup for the <head> tag and activate it by setting the attribute docinfo2.

.sample.adoc

----

[.bordered]

image::image.jpg[]

----

.docinfo.html

----

<style>

.imageblock.bordered img {

border: 1px solid black;

}

</style>

----

$ asciidoctor -a docinfo2 sample.adoc

Let me know if you have follow-up questions.

Cheers,

-Dan

On Tue, Aug 5, 2014 at 4:07 AM, jnorthr [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Do not quite get how i can make a thick black border around some of the images that go in my asciidoctor .adoc file. The images have awhite background and when printed on white paper they are lost as the reader cannot easily see what is part of the image, etc.

any ideas ?

thx
jim

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Borders-for-images-tp1957.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

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Borders-for-images-tp1957p1960.html

To unsubscribe from Borders for images, click here.
NAML

... [show rest of quote]

mojavelinux

Aug 06, 2014; 9:37pm

Re: Borders for images

Administrator

2681 posts

Interesting, it seems as though adding a border causes the alignment to stop working. The styles must be working against each other in that case ;)

I'm definitely interested in hearing about both initiatives. I'll be following your progress!

Cheers,

-Dan

On Wed, Aug 6, 2014 at 6:23 AM, jnorthr [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Wonderful Dan ! Thank you very much for that.

Have tried it as this:

[.thumb]
image::images/example1.png[Groovy Document Index, align="center"]

and get a border as you say though the image does not appear centered. It just comes out left justified, so i may just need to create a style as you describe to make it centered.

If you are interested, we are using asciidoctor to write documentation on how people can contribute to the groovy project. See here : http://builders.mybluemix.net/docs

My next project is to write a groovy template engine that serves *.adoc files directly from a groovy-powered server like : http://caelyf.de.a9sapp.eu/ using asciidoctorJ 0.1.4 - well that's the plan anyway :-}

thanx for all your hard work too !

kind regards
jim

On 05/08/14 23:41, mojavelinux [via Asciidoctor :: Discussion] wrote:

If you are converting to HTML and using the default stylesheet, you can simply add the role "thumb" to the image. It doesn't actually make a thumbnail, just makes it display like one (with a border).

.sample.adoc

----

[.thumb]

image::image.jpg[]

----

If you want a different look, then just make up your own role and add it to the stylesheet. If you use a custom stylesheet, add it there. If you use the default stylesheet, add a docinfo.html file with extra markup for the <head> tag and activate it by setting the attribute docinfo2.

.sample.adoc

----

[.bordered]

image::image.jpg[]

----

.docinfo.html

----

<style>

.imageblock.bordered img {

border: 1px solid black;

}

</style>

----

$ asciidoctor -a docinfo2 sample.adoc

Let me know if you have follow-up questions.

Cheers,

-Dan

On Tue, Aug 5, 2014 at 4:07 AM, jnorthr [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Do not quite get how i can make a thick black border around some of the images that go in my asciidoctor .adoc file. The images have awhite background and when printed on white paper they are lost as the reader cannot easily see what is part of the image, etc.

any ideas ?

thx
jim

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Borders-for-images-tp1957.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

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

http://discuss.asciidoctor.org/Borders-for-images-tp1957p1960.html

To unsubscribe from Borders for images, click here.
NAML

... [show rest of quote]

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

http://discuss.asciidoctor.org/Borders-for-images-tp1957p1961.html

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

... [show rest of quote]

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

mojavelinux

Aug 06, 2014; 9:44pm

Re: Borders for images

Administrator

2681 posts

In reply to this post by jnorthr

Wow, those docs are really *fancy*! I especially like the collapsible sections*. I'd definitely like to feature that on our "who's using AsciiDoc" page. We'll have a call for entries and a wiki page up shortly after the 1.5.0 release, but I've got your link noted down already.

Cheers,

-Dan

* I can definitely see that as something writers would like to have out of the box.

On Wed, Aug 6, 2014 at 3:38 PM, Dan Allen <[hidden email]> wrote:

Interesting, it seems as though adding a border causes the alignment to stop working. The styles must be working against each other in that case ;)

I'm definitely interested in hearing about both initiatives. I'll be following your progress!

Cheers,

-Dan

On Wed, Aug 6, 2014 at 6:23 AM, jnorthr [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Wonderful Dan ! Thank you very much for that.

Have tried it as this:

[.thumb]
image::images/example1.png[Groovy Document Index, align="center"]

and get a border as you say though the image does not appear centered. It just comes out left justified, so i may just need to create a style as you describe to make it centered.

If you are interested, we are using asciidoctor to write documentation on how people can contribute to the groovy project. See here : http://builders.mybluemix.net/docs

My next project is to write a groovy template engine that serves *.adoc files directly from a groovy-powered server like : http://caelyf.de.a9sapp.eu/ using asciidoctorJ 0.1.4 - well that's the plan anyway :-}

thanx for all your hard work too !

kind regards
jim

On 05/08/14 23:41, mojavelinux [via Asciidoctor :: Discussion] wrote:

If you are converting to HTML and using the default stylesheet, you can simply add the role "thumb" to the image. It doesn't actually make a thumbnail, just makes it display like one (with a border).

.sample.adoc

----

[.thumb]

image::image.jpg[]

----

If you want a different look, then just make up your own role and add it to the stylesheet. If you use a custom stylesheet, add it there. If you use the default stylesheet, add a docinfo.html file with extra markup for the <head> tag and activate it by setting the attribute docinfo2.

.sample.adoc

----

[.bordered]

image::image.jpg[]

----

.docinfo.html

----

<style>

.imageblock.bordered img {

border: 1px solid black;

}

</style>

----

$ asciidoctor -a docinfo2 sample.adoc

Let me know if you have follow-up questions.

Cheers,

-Dan

On Tue, Aug 5, 2014 at 4:07 AM, jnorthr [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Do not quite get how i can make a thick black border around some of the images that go in my asciidoctor .adoc file. The images have awhite background and when printed on white paper they are lost as the reader cannot easily see what is part of the image, etc.

any ideas ?

thx
jim

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Borders-for-images-tp1957.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

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

http://discuss.asciidoctor.org/Borders-for-images-tp1957p1960.html

To unsubscribe from Borders for images, click here.
NAML

... [show rest of quote]

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

http://discuss.asciidoctor.org/Borders-for-images-tp1957p1961.html

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

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

... [show rest of quote]

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

mojavelinux

Aug 06, 2014; 9:55pm

Re: Borders for images

Administrator

2681 posts

In reply to this post by jnorthr

Btw, quick question. Which file is the source file for that contributing guide? I was looking in the Groovy core repository, but I can't seem to find it.

One of the things that might be nice to add is an "Edit this file" button somewhere on every doc so that if someone wants to hack on it, they can easily make the connection from the published file back to the source. We do this on the asciidoctor.org site. (For example, see the right-hand side of http://asciidoctor.org/docs/asciidoc-syntax-quick-reference/)

-Dan

On Wed, Aug 6, 2014 at 3:45 PM, Dan Allen <[hidden email]> wrote:

Wow, those docs are really *fancy*! I especially like the collapsible sections*. I'd definitely like to feature that on our "who's using AsciiDoc" page. We'll have a call for entries and a wiki page up shortly after the 1.5.0 release, but I've got your link noted down already.

Cheers,

-Dan

* I can definitely see that as something writers would like to have out of the box.

On Wed, Aug 6, 2014 at 3:38 PM, Dan Allen <[hidden email]> wrote:

Interesting, it seems as though adding a border causes the alignment to stop working. The styles must be working against each other in that case ;)

I'm definitely interested in hearing about both initiatives. I'll be following your progress!

Cheers,

-Dan

On Wed, Aug 6, 2014 at 6:23 AM, jnorthr [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Wonderful Dan ! Thank you very much for that.

Have tried it as this:

[.thumb]
image::images/example1.png[Groovy Document Index, align="center"]

and get a border as you say though the image does not appear centered. It just comes out left justified, so i may just need to create a style as you describe to make it centered.

If you are interested, we are using asciidoctor to write documentation on how people can contribute to the groovy project. See here : http://builders.mybluemix.net/docs

My next project is to write a groovy template engine that serves *.adoc files directly from a groovy-powered server like : http://caelyf.de.a9sapp.eu/ using asciidoctorJ 0.1.4 - well that's the plan anyway :-}

thanx for all your hard work too !

kind regards
jim

On 05/08/14 23:41, mojavelinux [via Asciidoctor :: Discussion] wrote:

If you are converting to HTML and using the default stylesheet, you can simply add the role "thumb" to the image. It doesn't actually make a thumbnail, just makes it display like one (with a border).

.sample.adoc

----

[.thumb]

image::image.jpg[]

----

If you want a different look, then just make up your own role and add it to the stylesheet. If you use a custom stylesheet, add it there. If you use the default stylesheet, add a docinfo.html file with extra markup for the <head> tag and activate it by setting the attribute docinfo2.

.sample.adoc

----

[.bordered]

image::image.jpg[]

----

.docinfo.html

----

<style>

.imageblock.bordered img {

border: 1px solid black;

}

</style>

----

$ asciidoctor -a docinfo2 sample.adoc

Let me know if you have follow-up questions.

Cheers,

-Dan

On Tue, Aug 5, 2014 at 4:07 AM, jnorthr [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Do not quite get how i can make a thick black border around some of the images that go in my asciidoctor .adoc file. The images have awhite background and when printed on white paper they are lost as the reader cannot easily see what is part of the image, etc.

any ideas ?

thx
jim

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Borders-for-images-tp1957.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

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

http://discuss.asciidoctor.org/Borders-for-images-tp1957p1960.html

To unsubscribe from Borders for images, click here.
NAML

... [show rest of quote]

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

http://discuss.asciidoctor.org/Borders-for-images-tp1957p1961.html

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

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

... [show rest of quote]

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

... [show rest of quote]

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

jnorthr

Aug 07, 2014; 7:51am

Re: Borders for images

33 posts

In reply to this post by mojavelinux

Good morning Dan !

The asciidoc source for this groovy tutorial has not been pulled into groovy-code yet. I am only just learning how it all works and as Guillaume has put out a call for help documenting groovy bits, it seemed a nice time to write up a 'How-To Contribute To Groovy' doc while learning it (github,groovy,asciidocs) at the same time. :-)

It will possibly pulled into groovy-core after this summer when everyone has had a chance to offer ideas to improve.

For the moment, i've attached a copy of my .adoc here for you to see. There are no secret bits so i'm happy to let the cat out of the bag. This set uses jquery accordions.

//----------------------

@lines 10-12 -
jquery accordion stylesheet is 'blitzer' but there are others too
++++
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/blitzer/jquery-ui.css">
++++

// -------------------

At document bottom is call to activate the jquery accordion. i have 2 accordions in this example:
++++
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion({ collapsible: true, active:false, heightStyle: "content" });
$( "#accordion2" ).accordion({ collapsible: true, active:false, heightStyle: "content" });
});
</script>
++++

// --------------------------------------
@line 71+ is where it's used:
++++
<div id="accordion2">
<h3>Typical Workflow Steps</h3>
<div>Dan says to always keep smiling !
</div>

<h3>Typical Steps @ The Pub</h3>
<div><p>Dan says to always order Heineken !</p>
</div>

</div>
++++

Yes I kind of think this would be lovely to include 'out-of-the-box' but it's another runtime hit to load jquery bits unless it's already in the browser cache and on top of the JRuby + Asciidoc bits, performance might suffer :-P

Have you seen Max Greau's live asciidoc editor @ http://wildfly-mgreau.rhcloud.com/ad-editor/ ? I love it, something nice for the wiki me-thinks !

give me some links when we can contribute to the asciidocs stuff and i'll put in some effort there too :-D

more soon
thx
jim

On 06/08/14 23:44, mojavelinux [via Asciidoctor :: Discussion] wrote:

Wow, those docs are really *fancy*! I especially like the collapsible sections*. I'd definitely like to feature that on our "who's using AsciiDoc" page. We'll have a call for entries and a wiki page up shortly after the 1.5.0 release, but I've got your link noted down already.

Cheers,

-Dan

* I can definitely see that as something writers would like to have out of the box.

On Wed, Aug 6, 2014 at 3:38 PM, Dan Allen <[hidden email]> wrote:

Interesting, it seems as though adding a border causes the alignment to stop working. The styles must be working against each other in that case ;)

I'm definitely interested in hearing about both initiatives. I'll be following your progress!

Cheers,

-Dan

On Wed, Aug 6, 2014 at 6:23 AM, jnorthr [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Wonderful Dan ! Thank you very much for that.

Have tried it as this:

[.thumb]
image::images/example1.png[Groovy Document Index, align="center"]

and get a border as you say though the image does not appear centered. It just comes out left justified, so i may just need to create a style as you describe to make it centered.

If you are interested, we are using asciidoctor to write documentation on how people can contribute to the groovy project. See here : http://builders.mybluemix.net/docs

My next project is to write a groovy template engine that serves *.adoc files directly from a groovy-powered server like : http://caelyf.de.a9sapp.eu/ using asciidoctorJ 0.1.4 - well that's the plan anyway :-}

thanx for all your hard work too !

kind regards
jim

On 05/08/14 23:41, mojavelinux [via Asciidoctor :: Discussion] wrote:

If you are converting to HTML and using the default stylesheet, you can simply add the role "thumb" to the image. It doesn't actually make a thumbnail, just makes it display like one (with a border).

.sample.adoc

----

[.thumb]

image::image.jpg[]

----

If you want a different look, then just make up your own role and add it to the stylesheet. If you use a custom stylesheet, add it there. If you use the default stylesheet, add a docinfo.html file with extra markup for the <head> tag and activate it by setting the attribute docinfo2.

.sample.adoc

----

[.bordered]

image::image.jpg[]

----

.docinfo.html

----

<style>

.imageblock.bordered img {

border: 1px solid black;

}

</style>

----

$ asciidoctor -a docinfo2 sample.adoc

Let me know if you have follow-up questions.

Cheers,

-Dan

On Tue, Aug 5, 2014 at 4:07 AM, jnorthr [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Do not quite get how i can make a thick black border around some of the images that go in my asciidoctor .adoc file. The images have awhite background and when printed on white paper they are lost as the reader cannot easily see what is part of the image, etc.

any ideas ?

thx
jim

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Borders-for-images-tp1957.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

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

http://discuss.asciidoctor.org/Borders-for-images-tp1957p1960.html

To unsubscribe from Borders for images, click here.
NAML

... [show rest of quote]

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

http://discuss.asciidoctor.org/Borders-for-images-tp1957p1961.html

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

... [show rest of quote]

--

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

... [show rest of quote]

--

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/Borders-for-images-tp1957p1963.html

To unsubscribe from Borders for images, click here.
NAML

... [show rest of quote]

groovy-contributions.adoc (51K) Download Attachment

mojavelinux

Sep 16, 2014; 9:31pm

Re: Borders for images

Administrator

2681 posts

Jim,

This document is now in my use-cases example, so I'll use it as a test scenario when playing around with features.

Btw, you can eliminate the pass through blocks at the top and bottom of the AsciiDoc file by using docinfo.html and docinfo-footer.html. Here's how I split that out:

.docinfo.html

[source,html]

----

----

.docinfo-footer.html

[source,html]

----

$(function() {

$( "#accordion" ).accordion({ collapsible: true, active:false, heightStyle: "content" });

$( "#accordion2" ).accordion({ collapsible: true, active:false, heightStyle: "content" });

$( "#accordion3" ).accordion({ collapsible: true, active:false, heightStyle: "content" });

});

</script>

----

Then just set the docinfo2 attribute in the document header or pass it via the attributes configuration and it will pull these files into the <head> and before the end of </body>, respectively.

Cheers,

-Dan

On Thu, Aug 7, 2014 at 1:51 AM, jnorthr [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Good morning Dan !

The asciidoc source for this groovy tutorial has not been pulled into groovy-code yet. I am only just learning how it all works and as Guillaume has put out a call for help documenting groovy bits, it seemed a nice time to write up a 'How-To Contribute To Groovy' doc while learning it (github,groovy,asciidocs) at the same time. :-)

It will possibly pulled into groovy-core after this summer when everyone has had a chance to offer ideas to improve.

For the moment, i've attached a copy of my .adoc here for you to see. There are no secret bits so i'm happy to let the cat out of the bag. This set uses jquery accordions.

//----------------------

@lines 10-12 -
jquery accordion stylesheet is 'blitzer' but there are others too
++++
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/blitzer/jquery-ui.css">
++++

// -------------------

At document bottom is call to activate the jquery accordion. i have 2 accordions in this example:
++++
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion({ collapsible: true, active:false, heightStyle: "content" });
$( "#accordion2" ).accordion({ collapsible: true, active:false, heightStyle: "content" });
});
</script>
++++

// --------------------------------------
@line 71+ is where it's used:
++++
<div id="accordion2">
<h3>Typical Workflow Steps</h3>
<div>Dan says to always keep smiling !
</div>

<h3>Typical Steps @ The Pub</h3>
<div><p>Dan says to always order Heineken !</p>
</div>

</div>
++++

Yes I kind of think this would be lovely to include 'out-of-the-box' but it's another runtime hit to load jquery bits unless it's already in the browser cache and on top of the JRuby + Asciidoc bits, performance might suffer :-P

Have you seen Max Greau's live asciidoc editor @ http://wildfly-mgreau.rhcloud.com/ad-editor/ ? I love it, something nice for the wiki me-thinks !

give me some links when we can contribute to the asciidocs stuff and i'll put in some effort there too :-D

more soon
thx
jim

On 06/08/14 23:44, mojavelinux [via Asciidoctor :: Discussion] wrote:

Wow, those docs are really *fancy*! I especially like the collapsible sections*. I'd definitely like to feature that on our "who's using AsciiDoc" page. We'll have a call for entries and a wiki page up shortly after the 1.5.0 release, but I've got your link noted down already.

Cheers,

-Dan

* I can definitely see that as something writers would like to have out of the box.

On Wed, Aug 6, 2014 at 3:38 PM, Dan Allen <[hidden email]> wrote:

Interesting, it seems as though adding a border causes the alignment to stop working. The styles must be working against each other in that case ;)

I'm definitely interested in hearing about both initiatives. I'll be following your progress!

Cheers,

-Dan

On Wed, Aug 6, 2014 at 6:23 AM, jnorthr [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Wonderful Dan ! Thank you very much for that.

Have tried it as this:

[.thumb]
image::images/example1.png[Groovy Document Index, align="center"]

and get a border as you say though the image does not appear centered. It just comes out left justified, so i may just need to create a style as you describe to make it centered.

If you are interested, we are using asciidoctor to write documentation on how people can contribute to the groovy project. See here : http://builders.mybluemix.net/docs

My next project is to write a groovy template engine that serves *.adoc files directly from a groovy-powered server like : http://caelyf.de.a9sapp.eu/ using asciidoctorJ 0.1.4 - well that's the plan anyway :-}

thanx for all your hard work too !

kind regards
jim

On 05/08/14 23:41, mojavelinux [via Asciidoctor :: Discussion] wrote:

If you are converting to HTML and using the default stylesheet, you can simply add the role "thumb" to the image. It doesn't actually make a thumbnail, just makes it display like one (with a border).

.sample.adoc

----

[.thumb]

image::image.jpg[]

----

If you want a different look, then just make up your own role and add it to the stylesheet. If you use a custom stylesheet, add it there. If you use the default stylesheet, add a docinfo.html file with extra markup for the <head> tag and activate it by setting the attribute docinfo2.

.sample.adoc

----

[.bordered]

image::image.jpg[]

----

.docinfo.html

----

<style>

.imageblock.bordered img {

border: 1px solid black;

}

</style>

----

$ asciidoctor -a docinfo2 sample.adoc

Let me know if you have follow-up questions.

Cheers,

-Dan

On Tue, Aug 5, 2014 at 4:07 AM, jnorthr [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Do not quite get how i can make a thick black border around some of the images that go in my asciidoctor .adoc file. The images have awhite background and when printed on white paper they are lost as the reader cannot easily see what is part of the image, etc.

any ideas ?

thx
jim

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Borders-for-images-tp1957.html

To start a new topic under Asciidoctor :: Discussion, email [hidden email]

To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

... [show rest of quote]

--

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/Borders-for-images-tp1957p1960.html

To unsubscribe from Borders for images, click here.
NAML

... [show rest of quote]

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

http://discuss.asciidoctor.org/Borders-for-images-tp1957p1961.html

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

... [show rest of quote]

--

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

... [show rest of quote]

--

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/Borders-for-images-tp1957p1963.html

To unsubscribe from Borders for images, click here.
NAML

... [show rest of quote]

groovy-contributions.adoc (51K) Download Attachment

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Borders-for-images-tp1957p1965.html

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

... [show rest of quote]

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

jnorthr

Sep 17, 2014; 9:48pm

Re: Borders for images

33 posts

Yes thanx for that Dan

i suspect that will save me some work when deploying jquery accordions. i was trying to think (if it were me) how i would like to declare a jquery accordion in an .adoc file. Maybe something like

= Jquery Accordion Samples

:asciidoctor-version: 0.1.4

:accordion: cord1

:accordion-style: darkness

== Here are some JQuery Accordion Samples

Remember that accordion samples will appear as full title+text in docbook and other alternate formats.

[cord1]

----

=== Recipes For Cakes

Use a lot of sugar

=== Recipes for Biscuits

Use a lot of flour

----

Then since :accordion: is specified as an attribute, i could auto-generate your two files below inserting correct names. The theme is 'darkness' and name of this accordion is 'cord1' :

.docinfo.html
[source,html]
----
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/darkness/jquery-ui.css">
----

.docinfo-footer.html
[source,html]
----
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#cord1" ).accordion({ collapsible: true, active:false, heightStyle: "content" });
});
</script>
----

Sure this would bloat the download page first time thru and it's no good for docbook people or PDF crowd either i guess. But might render as:

<div id="cord1">
  <h3>Recipes For Cakes</h3>
  <div>
    <p>Use a lot of sugar
    </p>
  </div>
 <h3>Recipes For Biscuits</h3>
  <div>
    <p>Use a lot of flour
    </p>
  </div>
</div>

ok, maybe this is not so hot an idea as it would really take A/D more into the framework developer crowd than your target audience of document specialist :-{

well, just an idea

thx

jim

On Sep 16, 2014, at 11:31 PM, mojavelinux [via Asciidoctor :: Discussion] wrote:

Jim,

This document is now in my use-cases example, so I'll use it as a test scenario when playing around with features.

Btw, you can eliminate the pass through blocks at the top and bottom of the AsciiDoc file by using docinfo.html and docinfo-footer.html. Here's how I split that out:

.docinfo.html
[source,html]
----
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/blitzer/jquery-ui.css">
----

.docinfo-footer.html
[source,html]
----
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion({ collapsible: true, active:false, heightStyle: "content" });
$( "#accordion2" ).accordion({ collapsible: true, active:false, heightStyle: "content" });
$( "#accordion3" ).accordion({ collapsible: true, active:false, heightStyle: "content" });
});
</script>
----

Then just set the docinfo2 attribute in the document header or pass it via the attributes configuration and it will pull these files into the <head> and before the end of </body>, respectively.

Cheers,

-Dan

On Thu, Aug 7, 2014 at 1:51 AM, jnorthr [via Asciidoctor :: Discussion] <<a href="x-msg://3/user/SendEmail.jtp?type=node&node=2230&i=0" target="_top" rel="nofollow" link="external">[hidden email]> wrote:
Good morning Dan !

The asciidoc source for this groovy tutorial has not been pulled into groovy-code yet. I am only just learning how it all works and as Guillaume has put out a call for help documenting groovy bits, it seemed a nice time to write up a 'How-To Contribute To Groovy' doc while learning it (github,groovy,asciidocs) at the same time. :-)

It will possibly pulled into groovy-core after this summer when everyone has had a chance to offer ideas to improve.

For the moment, i've attached a copy of my .adoc here for you to see. There are no secret bits so i'm happy to let the cat out of the bag. This set uses jquery accordions.

//----------------------

@lines 10-12 -
jquery accordion stylesheet is 'blitzer' but there are others too
++++
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/blitzer/jquery-ui.css">
++++

// -------------------

At document bottom is call to activate the jquery accordion. i have 2 accordions in this example:
++++
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion({ collapsible: true, active:false, heightStyle: "content" });
$( "#accordion2" ).accordion({ collapsible: true, active:false, heightStyle: "content" });
});
</script>
++++

// --------------------------------------
@line 71+ is where it's used:
++++
<div id="accordion2">
<h3>Typical Workflow Steps</h3>
<div>Dan says to always keep smiling !
</div>

<h3>Typical Steps @ The Pub</h3>
<div><p>Dan says to always order Heineken !</p>
</div>

</div>
++++

Yes I kind of think this would be lovely to include 'out-of-the-box' but it's another runtime hit to load jquery bits unless it's already in the browser cache and on top of the JRuby + Asciidoc bits, performance might suffer :-P

Have you seen Max Greau's live asciidoc editor @ http://wildfly-mgreau.rhcloud.com/ad-editor/ ? I love it, something nice for the wiki me-thinks !

give me some links when we can contribute to the asciidocs stuff and i'll put in some effort there too :-D

more soon
thx
jim

On 06/08/14 23:44, mojavelinux [via Asciidoctor :: Discussion] wrote:

Wow, those docs are really *fancy*! I especially like the collapsible sections*. I'd definitely like to feature that on our "who's using AsciiDoc" page. We'll have a call for entries and a wiki page up shortly after the 1.5.0 release, but I've got your link noted down already.

Cheers,

-Dan

* I can definitely see that as something writers would like to have out of the box.

On Wed, Aug 6, 2014 at 3:38 PM, Dan Allen <[hidden email]> wrote:

Interesting, it seems as though adding a border causes the alignment to stop working. The styles must be working against each other in that case ;)

I'm definitely interested in hearing about both initiatives. I'll be following your progress!

Cheers,

-Dan

On Wed, Aug 6, 2014 at 6:23 AM, jnorthr [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Wonderful Dan ! Thank you very much for that.

Have tried it as this:

[.thumb]
image::images/example1.png[Groovy Document Index, align="center"]

and get a border as you say though the image does not appear centered. It just comes out left justified, so i may just need to create a style as you describe to make it centered.

If you are interested, we are using asciidoctor to write documentation on how people can contribute to the groovy project. See here : http://builders.mybluemix.net/docs

My next project is to write a groovy template engine that serves *.adoc files directly from a groovy-powered server like : http://caelyf.de.a9sapp.eu/ using asciidoctorJ 0.1.4 - well that's the plan anyway :-}

thanx for all your hard work too !

kind regards
jim

On 05/08/14 23:41, mojavelinux [via Asciidoctor :: Discussion] wrote:

If you are converting to HTML and using the default stylesheet, you can simply add the role "thumb" to the image. It doesn't actually make a thumbnail, just makes it display like one (with a border).

.sample.adoc

----

[.thumb]

image::image.jpg[]

----

If you want a different look, then just make up your own role and add it to the stylesheet. If you use a custom stylesheet, add it there. If you use the default stylesheet, add a docinfo.html file with extra markup for the <head> tag and activate it by setting the attribute docinfo2.

.sample.adoc

----

[.bordered]

image::image.jpg[]

----

.docinfo.html

----

<style>

.imageblock.bordered img {

border: 1px solid black;

}

</style>

----

$ asciidoctor -a docinfo2 sample.adoc

Let me know if you have follow-up questions.

Cheers,

-Dan

On Tue, Aug 5, 2014 at 4:07 AM, jnorthr [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Do not quite get how i can make a thick black border around some of the images that go in my asciidoctor .adoc file. The images have awhite background and when printed on white paper they are lost as the reader cannot easily see what is part of the image, etc.

any ideas ?

thx
jim

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Borders-for-images-tp1957.html

To start a new topic under Asciidoctor :: Discussion, email [hidden email]

To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

... [show rest of quote]

--

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/Borders-for-images-tp1957p1960.html

To unsubscribe from Borders for images, click here.
NAML

... [show rest of quote]

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

http://discuss.asciidoctor.org/Borders-for-images-tp1957p1961.html

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

... [show rest of quote]

--

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

... [show rest of quote]

--

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/Borders-for-images-tp1957p1963.html

To unsubscribe from Borders for images, click here.
NAML

... [show rest of quote]

groovy-contributions.adoc (51K) Download Attachment

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Borders-for-images-tp1957p1965.html

To start a new topic under Asciidoctor :: Discussion, email <a href="x-msg://3/user/SendEmail.jtp?type=node&node=2230&i=1" target="_top" rel="nofollow" link="external">[hidden email]
To unsubscribe from Asciidoctor :: Discussion, <a href="x-msg://3/" target="_blank" rel="nofollow" link="external">click here.
NAML
... [show rest of quote]

--
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/Borders-for-images-tp1957p2230.html

To unsubscribe from Borders for images, click here.
NAML

... [show rest of quote]

GeekMustHave

Nov 14, 2015; 4:00pm

Re: Borders for images

3 posts

In reply to this post by mojavelinux

I am somewhat new to ASCIDoctor, i would like to put borders around the images in an ADOC.

I am using ASCIIDoctor FX as my ADOC editor. I've included the docfile.html in the same directory as my ADOC file.

docfile.html
----------------------------------------------------------------
<style> .imageblock.bordered img { border: 1px solid black;} </style>--------------------------------------------------------------

My main document in the project is index.adoc, and it has the following in it

index.adoc
--------------------------------------------------------------
....
.Bluehost Security functions
[.bordered]
image::images/BluehostSSH.png[]
.......

When I generate the HTML from AD FX, the result doesn't have a border.

Is there any way to do this without using ASCIIDoctor at the terminal level?

I'm doing an experiment with teachers to see if they could use ASCIIDoctor for composing learning materials.

Thank you

mojavelinux

Nov 23, 2015; 12:53am

Re: Borders for images

Administrator

2681 posts

Most editors, including AsciidocFX, generate embeddable HTML, which does not include docinfo content. You need to use the export function to produce a standalone HTML document to see the result you expect. (In other words, it just doesn't show in the preview).

This does raise an interesting question about how to preview docinfo inclusions. Perhaps the preview can use different stylesheet themes.

-Dan