hax.htmlImage

Outputs <img .. /> or <a ..><img .. /></a>.

In a nutshell

Declaration of an |X|hax.htmlImage:myTag:some/rel/base/path: .. directive in a *.haxproj file,
- further configuring: attrLink, attrImg, xmlEscape
Usage anywhere: {X|myTag:rel-to-base/path/no/whitespace and optionally some description text |}

Stage:

Early — this X-renderer does not require a page context for rendering: therefore many hax.htmlImage-invoking X-tags encountered during pre-templating (at start-up time) may be eagerly processed immediately in-place (for overall-reduced per-page processing loads).

Purpose

In a similar spirit to hax.miniTag and hax.htmlLink, this one is for saving precious keystrokes with <img ..>-rich HTML contents requiring repetetive use of quickly-becoming-too-verbose markup.

Declaration / Configuration

To demonstrate valid *.haxproj directives declaring hax.htmlImage X-tags:

|X|hax.htmlImage:logo:
	../pics/logos

|X|hax.htmlImage: photo : {P|/pics/photos/|}:
	attrLink = [ ("class","foo-photo") ],
	attrImg = [("class" , "foo-roundborder")
		, ("onload","myGallerize(this)")
		],
	xmlEscape = True

To elaborate, for example the last one of the above, as all |X| directives declaring X-tags do:

begins with |X| followed by the X-renderer identifier (here hax.htmlImage)
followed by : colon and the desired X-tag name to be used to invoke it (here photo),
followed by : colon and now hax.htmlImage-specific configuration:
The relative base path for all images from this X-tag (here ensuring root-relative: {P| /pics/photos |}),
followed by a : colon if an optional syntax-sensitive properties block follows, comprised (if present at all) of all the following properties in this very order:
1. attrLink = [ .. ] — a List of all the tag attributes (each denoted in a ("name","value") pair) to always append (in addition to automatic href and title) to the outer <a> element
  - if empty (the default), no such outer <a> element will be rendered (only the <img> element itself)
2. attrImg = [ .. ] — a List of all the tag attributes (each denoted in a ("name","value") pair) to always append (in addition to automatic src and alt) to the inner <img> output by all instances of this X-tag
3. xmlEscape = .. — either False (the default) or True; whether to auto-HTML/XML-escape the automatic title / alt attribute values

Invocation / Parameters

Usage for the above example: {X|photo:eire%202016/IMG_5.jpg Look, a 'geysir'! |} would output, depending on the current-page URL, perhaps something like: <a class="foo-photo" href="../pics/photos/eire%202016/IMG_5.jpg" title="Look, a 'geysir'!"> <img class="foo-roundborder" onload="myGallerize(this)" src="../pics/photos/eire%202016/IMG_5.jpg" alt="Look, a 'geysir'!" /></a> — verbose! It follows that:

the (X-tag-)relative image path comes first, followed optionally
by a white-space and any manner of picture description, if any;
any white-space in the picture URI path is to be replaced, as is standard, with %20;
if xmlEscape is False, the picture description has to be provided HTML-escaped: manually or wrapped inside an hax.xmlEscape

HaXtatic Docs