Rendering images for your website

Using text in combination with CSS can be used to produce quite nice looking buttons and banner effects, but it will never look exactly the same on all browsers. Plus you can't to a large number of looks, e.g. round buttons or lighting effects.

XWeb offers you two ways to produce images to get exactly the buttons, banners and other graphics you want. The internal renderer is quite simple to use and there is a graphical frontend to set up the options while previewing the look of the buttons. Using SVG is more complicated but you can create complex rendering instructions similar to macros in your favored bitmap drawing program (pick any).

This section will first discuss how to use the internal render in combination with the dialog provided by XWeb. Then you will read about the way buttons, banners and logos can be inserted into a website generated by the generic stylesheet. A last page tells you how to use SVG in XWeb and gives an example of the power of SVG.

Adding images to the makefile

The way images are created for an entry in your site is always the same, independent of the renderer used. You have to tell XWeb for which document types you want to have which pictures by attaching <image> elements to it and then define <imageStyle>s that tell XWeb how to create the images. The content of the image style elements differs depending on the renderer, the rest stays the same.

Here is an example using the internal renderer to create a button for each page used in the example:

  <layout>
    <documentStyle type="xhtml">
      <xsl stylesheet="layout/generic.xsl" navigationElement="html">
      </xsl>
      <image type="normalEntryButton"/>
    </documentStyle>
    <imageStyle width="100" height="30" fileNamePattern="buttonNE_%n.png"
                                  type="normalEntryButton">
      <background color="#990033" />
      <text color="#ffffff">
        <position hAlign="center" vAlign="center" offsetX="0" offsetY="0" />
        <font name="Tahoma" size="14" bold="true" />
        <shadow color="#003333" offsetX="1" offsetY="1" >
      </text>
    </imageStyle>
  </layout>

These instructions will create a button for each entry using the type "xhtml". The button will be 100 pixel wide and 30 pixel high, it will have a dark red background and centered text using the font given with a dark shadow being slightly right and below the text. The font has to be available on the computer were XWeb is called, but the website will contain only graphics, in this case PNG files.

There are also options to add a graphic into the background, this way one can create professional looking buttons (or download some from internet sites offering free button images), and then let XWeb just render the names on top of the image.

The files created

The images for entries and sections will always be in the directory of the section for which it is created. The file name is determined by the attribute fileNamePattern where the "%n" part is replaced with the name of the entry or section. XWeb creates PNG files if the file name ends with ".png", it creates JPEG images if the file name ends with ".jpg" or ".jpeg". Usually PNG is the better option for buttons and similar graphics.

You can create as many images for an entry as you want. Just add more <image> elements to the <documentStyle> for an entry, each pointing to a different <imageStyle>. Make sure that each of the images will get a different name. Using the same fileNamePattern for two different rendering instructions will result in a conflict if they are used for the same entry or section, so usually it is a good idea to make sure that each <imageStyle> has a unique naming pattern for the files.

Images for sections

You can create an image for a section by adding <sectionStyle> elements at the beginning of the layout section like this:

  <layout>
    <sectionStyle type="normal">
      <image type="sectionBanner"/>
    </sectionStyle>
    ...

Here a banner image will be created for all sections that have a type attribute set to "normal" like this:

    <section name="People" sourceDir="people" targetDir="people" type="normal">

Image groups

If you use more than one document type, e.g. different XML input formats (see the description how to use your own XML), but want to create the same images for each type, you can use an image group like this:

  <layout>
    <documentStyle type="xhtml">
      <xsl stylesheet="layout/generic.xsl" navigationElement="html">
      </xsl>
      <imageGroup name="entries"/>
    </documentStyle>
    <imageGroup name="entries">
      <image type="normalEntryButton"/>
      <image type="activeEntryButton"/>
      <image type="entryBanner"/>
    </imageGroup>
    <!-- the rest of the layout, including the images -->

This group of images can be reused in any document style and section style, this way it is easier to change images later and you avoid refering to the same images again and again.

Using a title for banners

Usually XWeb renders the name of a section/entry on the button. Sometimes it is useful to have two different texts, e.g. using a short name like "CV" for the buttons in the navigation, while using a longer title like "Curriculum Vitae" for the banners. This can be done by adding a title attribute to the sections and entries that should have a different title (it defaults to the name, so you don't have to give a title if it is the same as the name) and then adding the attribute useTitle with the value "true" to the image style definition for the banner.