Borders for images

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

Borders for images

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

Re: Borders for images

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



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

Re: Borders for images

jnorthr
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



--



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

Reply | Threaded
Open this post in threaded view
|

Re: Borders for images

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



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




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



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

Re: Borders for images

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



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




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



--



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

Re: Borders for images

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



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




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



--



--



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

Re: Borders for images

jnorthr
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



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




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



--



--



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


groovy-contributions.adoc (51K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: Borders for images

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



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




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



--



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


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



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

Re: Borders for images

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

.docinfo-footer.html
[source,html]
----
<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]
----
----

.docinfo-footer.html
[source,html]
----
<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&amp;node=2230&amp;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



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




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



--



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


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&amp;node=2230&amp;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



--



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

Reply | Threaded
Open this post in threaded view
|

Re: Borders for images

GeekMustHave
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

Reply | Threaded
Open this post in threaded view
|

Re: Borders for images

mojavelinux
Administrator

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