Asciidoctor :: Discussion

How to create image block

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

8 messages Options

rahmanusta

Dec 05, 2014; 8:36am

How to create image block

11 posts

For an extension i used below rb file.

require 'asciidoctor/extensions' unless RUBY_ENGINE == 'opal'

include ::Asciidoctor

class UmlBlock < Extensions::BlockProcessor
  use_dsl

  named :uml
  on_context :open
  parse_content_as :raw

  def process parent, reader, attrs

   imageUrl = nil

    %x{

        imageUrl = renderUml(#{reader.read});

     }

    html = %(<img src="#{imageUrl}">)

    create_pass_block parent, html, attrs, subs: nil
  end
end

it creates an HTML image element, how can i replace it for asciidoc image block? Thanks.

mojavelinux

Dec 05, 2014; 8:51am

Re: How to create image block

Administrator

2681 posts

Instead of create_pass_block use create_image_block. In general, the pattern is create_<context>_block where <context> is the name of the block's context (image, sidebar, example, paragraph, etc).

-Dan

On Fri, Dec 5, 2014 at 1:36 AM, rahmanusta [via Asciidoctor :: Discussion] <[hidden email]> wrote:

For an extension i used below rb file.
require 'asciidoctor/extensions' unless RUBY_ENGINE == 'opal'

include ::Asciidoctor

class UmlBlock < Extensions::BlockProcessor
  use_dsl

  named :uml
  on_context :open
  parse_content_as :raw

  def process parent, reader, attrs

   imageUrl = nil

    %x{

        imageUrl = renderUml(#{reader.read});

     }

    html = %(<img src="#{imageUrl}">)

    create_pass_block parent, html, attrs, subs: nil
  end
end
it creates an HTML image element, how can i replace it for asciidoc image block? Thanks.

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/How-to-create-image-block-tp2502.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

rahmanusta

Dec 05, 2014; 9:02am

Re: How to create image block

11 posts

It is OK but how will i use that

create_image_block parent, html, attrs, subs: nil thats not working.

mojavelinux

Dec 05, 2014; 9:10am

Re: How to create image block

Administrator

2681 posts

Drop the html parameter. It should just be:

create_image_block parent, attrs

(the options hash is optional)

In general, extensions should not be creating HTML (unless it's an HTML-specific extension). They should be creating AST nodes, like this method does. The converter then handles the HTML generation (and you can extend the converter to handle new types of nodes).

-Dan

On Fri, Dec 5, 2014 at 2:02 AM, rahmanusta [via Asciidoctor :: Discussion] <[hidden email]> wrote:

It is OK but how will i use that

create_image_block parent, html, attrs, subs: nil thats not working.

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/How-to-create-image-block-tp2502p2504.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

rahmanusta

Dec 05, 2014; 9:26am

Re: How to create image block

11 posts

I tried and getting netscape.javascript.JSException: Exception: asciidoctor: FAILED: <stdin>: Failed to parse source, 'undefined' is not a function (evaluating 'path.$rindex($scope.SEPARATOR)')

For example an image block like this;

<div class="imageblock">
<div class="content">
<img src="images/breadboard.png" alt="breadboard.png">
</div>
<div class="title">Figure 1. Bread Board</div>
</div>

Can i generate like this block with create_image_block or what else. Of course, i can wrilte like this with HTML, but it will not rendered to Docbook. I wonder How to generate a general image block supplied with an image url.

mojavelinux

Dec 05, 2014; 9:35am

Re: How to create image block

Administrator

2681 posts

On Fri, Dec 5, 2014 at 2:26 AM, rahmanusta [via Asciidoctor :: Discussion] <[hidden email]> wrote:

How to generate a general image block supplied with an image url.

create_image_block is the way. If it doesn't work in JavaScript, that's another story (maybe there is a problem in the Opal conversion). You can also just create the block explicitly using the create_block method as you see defined here:

https://github.com/asciidoctor/asciidoctor/blob/master/lib/asciidoctor/extensions.rb#L95

I haven't tested the use of the helper methods in JavaScript yet...this could be an edge case we haven't addressed getting the extensions to work. I recommend working with Guillaume on this as he is creating the extension writing tutorial for JavaScript.

-Dan

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

rahmanusta

Dec 05, 2014; 2:54pm

Re: How to create image block

11 posts

Thanks Dan, i emailed him

rahmanusta

Dec 06, 2014; 9:03pm

Re: How to create image block

11 posts

In reply to this post by mojavelinux

Hi Dan, I did it with help of Guillaume.

  def process parent, reader, attrs

    content = nil
    type = %(#{attrs['type']})
    title = %(#{attrs['title']})
    filename = %(#{attrs['filename']})

    %x{
        content = app.plantUml(#{reader.read},#{type},#{filename});
     }

    if (type =="ascii")
      create_pass_block parent, content, attrs, subs:nil
    else
      create_image_block parent, target:content, title: title
    end

  end

Thanks