Adding generated pages to a website which uses relative paths and a layout template

There is website for a conference using relative paths to reference resources. The content of existing pages are maintained as XML files (containing HTML formatted text) There is one main template that defines the basic layout: header, footer, and a menu. Links defined here use relative paths. This template, an XSL file, is applied to all content pages to transform them into HTML-files. Until now all pages of the website have been located in the same folder. The challenge: A foto gallery shall be integrated into the website. It was generated with an arbitrary tool (e.g. Adobe Lightroom) that organises images and referencing pages in a folder hierarchy of multiple levels. An example: A foto gallery with an album overview, and two alums: Reception and Dinner - Album Overview | . index.html :with a link to each album, thumbnail L Reception | . index.html (with thumbnails of all fotos, linked to detailed view) | L detailed | | . IMG_001.html | | . IMG_012.html | | . IMG_... | L fotos | | . IMG_001.jpg | | . IMG_012.jpg | | . IMG_... L Dinner | . index.html (with thumbnails of all fotos, linked to detailed view) | L detailed | | . IMG_011.html | | . IMG_015.html | | . IMG_... | L fotos | | . IMG_011.jpg | | . IMG_015.jpg | | . IMG_... <ul> Problems: <li>These pages should follow the general layout</li> <li>These pages depend on the generated folder structure, so they can't be moved</li> <li>When the layout template is applied to the files of the gallery, the links (menu!) defined in there are <em>broken</em> (as they are relative references)</li> </ul> Find a way to integrate these pages, so they use the same layout template, and links with relative paths are still working.

Taggings:

Submitted by Michael Kraxner on Sun, 11/14/2010 - 17:02
1 answer

Add information about folder depth

  1. Add an additional element to all files which are located in subdirectories.

    2. It must be added after the root element. (As an XML file must have only one root element)

    This can be automated with a bash script like the following:

    echo "fixing index.html's"
    HTMLS=$(find photos -type f \( -iname "index.html" -not -iwholename "*svn*" \) )
    for H in $HTMLS
    do
    sed ' /^<head>/ i\ <pathtoroot>../../</pathtoroot> ' "$OUTDIR/$H" > "$OUTDIR/$H"_tmp
    mv "$OUTDIR/$H"_tmp "$OUTDIR/$H"
    done

    echo "fixing IMG_.. html's"
    HTMLS=$(find photos -type f \( -iname "IMG_*.html" -not -iwholename "*svn*" \) )
    for H in $HTMLS
    do
    sed ' /^<head>/ i\ <pathtoroot>../../../</pathtoroot> ' "$OUTDIR/$H" > "$OUTDIR/$H"_tmp
    mv "$OUTDIR/$H"_tmp "$OUTDIR/$H"
    done

  2. in the template create a variable with the value of this element: <xsl:variable name="relPath"><xsl:value-of select="/html/pathtoroot"></xsl:value-of> </xsl:variable>
  3. use Attribute Value Templates to append this path to every relative reference. e.g.:
    <a href="index.html">Home</a> -> <a href="{$relPath}index.html">Home</a>
  4. Add an empty template that matches /html/pathtoroot/, to prevent these paths are printed to the output. (the default rule is "copy text")
Submitted by Michael Kraxner on Mon, 11/15/2010 - 22:22

Taggings: