All VWcms substitution directives that produce navigation or other prompts on a rendered page have a textual default.

For example, the navigation directives $$PREV$$, $$NEXT$$, $$BACK$$ and $$TOP$$ are by default rendered <<PREV, NEXT>>, ^BACK^ and TOP.

Of course, as can be seen from the Vdub (this) documentation, these may also be rendered as the icons (images) and .

There are two ways of accomplishing this.

Substitution Directive Parameter

In the content itself, where the directive takes an optional parameter specifying the text to be displayed.  This is a per-directive parameter and so any other instances remain unchanged.  Site-wide specification can be done using configuration directives (see below).

The $$PREV$$ navigation directive can be rendered  [Previous Page]  using  $$PREV$[Previous Page]$$.

And as the icon    using  $$PREV$<img src="/_vdub/arrow_left.png" border="0" />$$.

Note that the icon specification begins with "<img" and ends with " />".  The "src=" must be specified (somewhat obviously!).  Other image-related and general attributes may also be specified.

Configuration Directive

The site configuration file supports a number of [lang-..] directives. In the same way that these allow non-English language VWcms sites, they also allow the site-wide customisation of the strings associated with various directives.  As with substitution directive parameters while these can just be different strings, they can also specify icon images.

Note that many [lang-..] directives contain more than one string related to a functionality group.  So the previous, next, back and top navigation links are all grouped into the one.  If a language directive is specified all strings required must be specified.

In the Vdub site configuration directive file can be seen the navigation link language directive specifying the icons seen in the documentation.

[lang-navigate] \
<img src="/_vdub/arrow_left.png" border="0" />|\
<img src="/_vdub/arrow_right.png" border="0" />|\
<img src="/_vdub/arrow_down.png" border="0" align="top" />|\
<img src="/_vdub/arrow_up.png" border="0" />

Note the use of the continuation backslash character used to make the text more readable.

The section Non-English Language contains a table showing the default and current configuration file [lang-..] directives.  Note that not all [lang-..] directives support the specification of icons.

Directives Supporting Icons

The following substitution directives support icons.

Subs Directive	Description	Lang Directive
$$BACK$$	Navigate to the previous page visited (if any).	[lang-navigate]
$$BLOG$$	The blog recent entry read link.	[lang-blog]
$$COMMENT$$	The comment directive has four buttons and a string associated with it.  Each of the four buttons can be associated with an individual icon.  If any is an icon all must be.	[lang-comment]
$$LOGIN$$	Icons for the login and logout links.	[lang-login]
$$MANAGE$$	Icons for the manage site and view site links.	[lang-manage]
$$NEXT$$	Navigate to the next page (if any).	[lang-navigate]
$$PREV$$	Navigate to the previous page (if any).	[lang-navigate]
$$PRINT$$	Three buttons provide for the three levels of print available, current page, current page and any subordinates, and full site.	[lang-print]
$$SEARCH$$	An icon for the search dialog button and an icon for the goto link in the results page.	[lang-search]
$$TOP$$	Navigate to the top of the page.	[lang-navigate]

 

Title Attribute

The HTML title="text" attribute is rendered as a type of tool-tip by most modern browsers and can be used to provide additional information on an iconic (or other) link.  In the following example

<img src="/_vdub/glasses.png" title="Now can you see what happens?" />

is rendered as (place the mouse cursor over the image)

The title attribute is available using the text of substitution or configuration directive.  It is also accessable via the image edit function of the HTML editors.