How can we pass parameters to HAML HTML5 backend template ?

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

How can we pass parameters to HAML HTML5 backend template ?

ch007m
Hi,

I currently modify the HTML5 backend (HAML) to have the possibility to include an image in the footer/header.
Until now, my modification is really basic :

  %body{:id => @id, :class=>[doctype, ((attr? 'toc-class') && (attr? :toc) && (attr? 'toc-placement', 'auto') ? "#{attr 'toc-class'}     ...
      #header
        %img{:src => 'images/rhheader.png', :width => '1024', :height => '152', :align => 'center'}

How can I provide src, width, height and align attributes to this image tag ?
Do I have to create something like that as attribute footer::image::src[title, width, height, link] ?

Regards,

Charles




Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist
Twitter : @cmoulliard
Reply | Threaded
Open this post in threaded view
|

Re: How can we pass parameters to HAML HTML5 backend template ?

ch007m
Question

How can I read/retrieve this attribute defined in a asciidoc in my document.html.haml ?

:footer-image: images/rhheader.png[width="1024",height="152"]





Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist
Twitter : @cmoulliard
Reply | Threaded
Open this post in threaded view
|

Re: How can we pass parameters to HAML HTML5 backend template ?

asotobu
Have you inspect the deckjs or dzslides if they are doing something similar, I am not sure if this can be done (I think so)
Reply | Threaded
Open this post in threaded view
|

Re: How can we pass parameters to HAML HTML5 backend template ?

ch007m
deckjs haml files mimic what we have in HTML5.

I think that the solution is to use @Document

Example : @document.attr? :footer-image

But I don't know until now how next I can retrieve the parameters. Help of Dan will be required ;-)
Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist
Twitter : @cmoulliard
Reply | Threaded
Open this post in threaded view
|

Re: How can we pass parameters to HAML HTML5 backend template ?

mojavelinux
Administrator
Charles,

You lookup attributes in the source document using the "attr" function. Attributes can be read from the current node or from the document.

(@document.attr :name) :: retrieves the value of the 'name' attribute defined on the document

(attr :name) :: retrieves the value of the 'name' attribute defined on the current node (block or inline); if the attribute is not found, the function looks for the attribute on the document.

NOTE: The node of the document template is the current document, so (@document.attr :name) and (attr :name) are equivalent in that case.

Asciidoctor does not parse the attribute value, so there are no parameters to retrieve from the footer-image attribute in the example you gave. However, you can tap into the Asciidoctor API to process the contents.

Here are a couple of options:

== Explicit subs

AsciiDoc allows you to force substitutions on an attribute value using the pass macro. Therefore, you can define the footer image using the footer macro:

[source,asciidoc]
--
:footer-image: pass:m[image:rhheader.png[header,1024,152]]
--

You can then expand this value in your document template using:

[source,haml]
--
= attr 'footer-image'
--

The result will be:

[source,html]
--
<span class="image"><img src="rhheader.png" alt="header" width="1024" height="152"></span>
--

== Implicit subs

You could perform the substitutions automatically to reduce the complexity in the source document. In this case, you'd leave out the pass macro in the attribute entry:

[source,asciidoc]
--
:footer-image: image:rhheader.png[header,1024,152]
--

Then pass the attribute value through the Asciidoctor substitution API inside the template:

[source,haml]
--
= sub_macros(attr 'footer-image')
--

The result will be the same as the previous example.

The <a href="https://github.com/asciidoctor/asciidoctor/blob/master/lib/asciidoctor/substitutors.rb[substitution">https://github.com/asciidoctor/asciidoctor/blob/master/lib/asciidoctor/substitutors.rb[substitution API] is available on all nodes.

== Fine-grained settings

Another approach is to use individual attributes for each setting of the custom content. For example:

[source,asciidoc]
--
:footer-image-src: rhheader.png
:footer-image-width: 1024
:footer-image-height: 152
--

Then you'd read each of these values when constructing your HTML output in Haml.

//

The important thing to remember about designing the custom template is that you have *full access to the document AST and the Ruby programming language*. If you think that the template should work harder to keep the content of the document simpler, then make the template work harder.

We'd be very interested to find out what approach you decide to take.

-Dan

p.s. To see which attributes are available, you can print them using:

[source,haml]
--
- puts @document.attributes.inspect
- puts @attributes.inspect
--



On Fri, Nov 22, 2013 at 6:09 AM, ch007m [via Asciidoctor :: Discussion] <[hidden email]> wrote:
deckjs haml files mimic what we have in HTML5.

I think that the solution is to use @Document

Example : @document.attr? :footer-image

But I don't know until now how next I can retrieve the parameters. Help of Dan will be required ;-)


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/How-can-we-pass-parameters-to-HAML-HTML5-backend-template-tp1036p1054.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: How can we pass parameters to HAML HTML5 backend template ?

ch007m
Dan,

Many thanks for the explanations and to describe me the macros, substitution mechanisms, ....

I have done different tests without success.

[source,asciidoc]
--
:footer-image1: pass:m[images:rhfooterBLDW.png[width=597,height=77]]
:footer-image2: images:rhfooterBLDW.png[width=597,height=77]
--

[source,haml]
--
%img{:src => 'images/rhfooterBLDW.png', :width => '597', :height => '77'}
%img=attr 'footer-image1'
%img=sub_macros(attr 'footer-image2')
--

[source,html]
--
<img height="77" src="images/rhfooterBLDW.png" width="597">
<img>images:rhfooterBLDW.png[width=597,height=77]</img>
<img>images:rhfooterBLDW.png[width=597,height=77]</img>

To answer to your question, I prefer the approach without to gives pass:m ;-)

--




On Mon, Nov 25, 2013 at 3:21 AM, mojavelinux [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Charles,

You lookup attributes in the source document using the "attr" function. Attributes can be read from the current node or from the document.

(@document.attr :name) :: retrieves the value of the 'name' attribute defined on the document

(attr :name) :: retrieves the value of the 'name' attribute defined on the current node (block or inline); if the attribute is not found, the function looks for the attribute on the document.

NOTE: The node of the document template is the current document, so (@document.attr :name) and (attr :name) are equivalent in that case.

Asciidoctor does not parse the attribute value, so there are no parameters to retrieve from the footer-image attribute in the example you gave. However, you can tap into the Asciidoctor API to process the contents.

Here are a couple of options:

== Explicit subs

AsciiDoc allows you to force substitutions on an attribute value using the pass macro. Therefore, you can define the footer image using the footer macro:

[source,asciidoc]
--
:footer-image: pass:m[image:rhheader.png[header,1024,152]]
--

You can then expand this value in your document template using:

[source,haml]
--
= attr 'footer-image'
--

The result will be:

[source,html]
--
<span class="image"><img src="rhheader.png" alt="header" width="1024" height="152"></span>
--

== Implicit subs

You could perform the substitutions automatically to reduce the complexity in the source document. In this case, you'd leave out the pass macro in the attribute entry:

[source,asciidoc]
--
:footer-image: image:rhheader.png[header,1024,152]
--

Then pass the attribute value through the Asciidoctor substitution API inside the template:

[source,haml]
--
= sub_macros(attr 'footer-image')
--

The result will be the same as the previous example.

== Fine-grained settings

Another approach is to use individual attributes for each setting of the custom content. For example:

[source,asciidoc]
--
:footer-image-src: rhheader.png
:footer-image-width: 1024
:footer-image-height: 152
--

Then you'd read each of these values when constructing your HTML output in Haml.

//

The important thing to remember about designing the custom template is that you have *full access to the document AST and the Ruby programming language*. If you think that the template should work harder to keep the content of the document simpler, then make the template work harder.

We'd be very interested to find out what approach you decide to take.

-Dan

p.s. To see which attributes are available, you can print them using:

[source,haml]
--
- puts @document.attributes.inspect
- puts @attributes.inspect
--



On Fri, Nov 22, 2013 at 6:09 AM, ch007m [via Asciidoctor :: Discussion] <[hidden email]> wrote:
deckjs haml files mimic what we have in HTML5.

I think that the solution is to use @Document

Example : @document.attr? :footer-image

But I don't know until now how next I can retrieve the parameters. Help of Dan will be required ;-)


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/How-can-we-pass-parameters-to-HAML-HTML5-backend-template-tp1036p1054.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/How-can-we-pass-parameters-to-HAML-HTML5-backend-template-tp1036p1076.html
To unsubscribe from How can we pass parameters to HAML HTML5 backend template ?, click here.
NAML



--
Charles Moulliard
Apache Committer / Architect @RedHat
Twitter : @cmoulliard | Blog :  http://cmoulliard.github.io

Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist
Twitter : @cmoulliard
Reply | Threaded
Open this post in threaded view
|

Re: How can we pass parameters to HAML HTML5 backend template ?

ch007m
Any idea Dan about how to interpret correctly the parameters as that does not work for me. See my previous reply
Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist
Twitter : @cmoulliard