Nectil incorporates a tool to create image titrations.

You're no more limited to fonts available in all navigators, you can use whatever fonts you want.

Create the PHP that will generate the images

You must create an independant page which creates the image and returns it to the browser, as if it was a static image.

• 1. Create a PHP file called titration.php with the following piece of code :

<?php
include_once("../Kernel/common/common_functions.inc.php");

createText('<text color="#E52B09" size="26" background-color="white" font="Trade gothic.ttf">'.encode_to_xml(stripcslashes($_GET['title'])).'</text>');
?>

• 2. Put the font you want to use in /Library/fonts/ . If this directory doesn't exist, create it. The font must be in one of the format supported by freetype (e.g. TrueType, OpenType, Type1, etc).

 

The createText() function receives a XML containing all the parameters for the image generation.

The XML is composed of a single <text> node with all the styles in attributes and the text to generate inside the node.

The possible parameters are :

• color : color of the text
• background-color : color behind the text
• font : the name of the file containing the font to use and that you have put in /Library/fonts/.
• size : the size of the text
• outline-width : the size of the stroke around the letters
• outline-color : the color of the stroke
• format : the format of the image (GIF or PNG). GIF is the default.
• leading : the margin at the bottom of the glyphs. You can use negative numbers to have a smaller line-spacing.

Once it's done you can call your new page in a navigator :for example, titration.php?title=Nectil

In XSL you can use this page as src of an img tag to have an image with the title of a Media :

<img src="titrage.php?title={DESCRIPTIONS/DESCRIPTION/TITLE}"/>

Do not forget to put an alt attribute, to ease referencing and accessibility :

<img alt="{DESCRIPTIONS/DESCRIPTION/TITLE}" src="titrage.php?title={DESCRIPTIONS/DESCRIPTION/TITLE}"/>

Multiline text

If you have to generate images with very long text, the images may become too large for the page.

A solution is to generate an image for each word in the sentence. The final HTML code would look like this :

<img src="titration.php?word=Hello"><img src="titration.php?word=World">

This way the images will automatically be placed on a new line when there is no more room. It can be done this way in XSL.

First copy this template in your XSL file :

<xsl:template name="titrage">
  <xsl:param name="text"></xsl:param>
  <xsl:param name="first">true</xsl:param>

  <xsl:variable name="real_text">
    <xsl:choose>
      <xsl:when test="substring-before($text,' ')"><xsl:value-of select="substring-before($text,' ')"/><xsl:text> </xsl:text></xsl:when>
      <xsl:otherwise><xsl:value-of select="$text"/></xsl:otherwise>
    </xsl:choose>
  </xsl:variable>

  <img alt="" src="titration.php?title={$real_text}">
    <xsl:if test="$first='true'"><xsl:attribute name="alt"><xsl:value-of select="$text"/></xsl:attribute></xsl:if>
  </img>
  <xsl:if test="substring-after($text,' ')!=''">
    <xsl:call-template name="titrage">
      <xsl:with-param name="text" select="substring-after($text,' ')"/>
      <xsl:with-param name="first">false</xsl:with-param>
    </xsl:call-template>
  </xsl:if>
</xsl:template>

and use it like this :

<xsl:call-template name="titrage">
  <xsl:with-param name="text" select="RESULTS[ @name='media' ]/MEDIA[1]/DESCRIPTIONS/DESCRIPTION/TITLE"/>
</xsl:call-template>

The alternate text is only put on the first img tag, to keep the sentence in one block (for referencing and accessiblity).