I have a problem that I'm sure is actually fairly simple to answer, but I can't figure it out and my attempt to ask about it before was unduly complex.
I have a page that is being generated from TEI XML that has some text associated with an image file:
<sourceDoc xml:id="textContent">
<surfaceGrp xml:id="wall" n="West Wall">
<surface xml:id="EETS.QD.60">
<label>Verse 60</label>
<graphic url="ww_test_1.jpg"/>
</surface>
<surface xml:id="EETS.QD.63">
<label>Verse 63</label>
<graphic url="ww_test_2.jpg"/>
</surface>
<surface xml:id="EETS.QD.65">
<label>Verse 65</label>
<graphic url="ww_test_3.jpg"/>
</surface>
<surface xml:id="EETS.QD.66">
<label>Verse 66</label>
<graphic url="ww_test_4.jpg"/>
</surface>
<surface xml:id="EETS.QD.68">
<label>Verse 68</label>
<graphic url="ww_test_5.jpg"/>
</surface>
<surface xml:id="EETS.QD.69">
<label>Verse 69</label>
<graphic url="ww_test_6.jpg"/>
</surface>
</surfaceGrp>
</sourceDoc>
(I've removed the text from the example here to avoid extra cruft)
I generate a header at the top of my page based on thumbnail images of the image associated with each piece of text. So www_test_1-thumbnail.jpg
, etc. Using the following xsl I can get the header to appear correctly (tei is the tei namespace, which can be declared at xmlns:tei="http://www.tei-c.org/ns/1.0"
):
<xsl:template match="tei:surface">
<div id="centerMenu">
<xsl:apply-templates select="tei:graphic" mode="list"/>
</div>
</xsl:template>
<xsl:template match="tei:graphic" mode="list">
<span class="menuitem" id="image_thumbnail">
<a class="nav_link">
<xsl:attribute name="href">
<xsl:value-of select="concat(substring(@url,1,string-length(@url)-4),'.html')"/>
</xsl:attribute>
<img class="thumbnail">
<xsl:attribute name="src">
<xsl:value-of
select="concat(substring(@url,1,string-length(@url)-4),'-thumbnail.jpg')"
/>
</xsl:attribute>
<xsl:attribute name="alt">
<xsl:value-of select="../tei:label"/>
</xsl:attribute>
</img>
</a>
</span>
</xsl:template>
My problem is that there are times I need to jump from one <surfaceGrp>
-wrapped set of elements to another. So if, for example, there was a "South Wall" <surfaceGrp>
I need to be able to grab the url of that upcoming element so that I can jump to the next block of thumbnail images:
<sourceDoc xml:id="textContent">
<surfaceGrp xml:id="wall" n="West Wall">
<surface xml:id="EETS.QD.60">
<label>Verse 60</label>
<graphic url="ww_test_1.jpg"/>
</surface>
<surface xml:id="EETS.QD.63">
<label>Verse 63</label>
<graphic url="ww_test_2.jpg"/>
</surface>
<surface xml:id="EETS.QD.65">
<label>Verse 65</label>
<graphic url="ww_test_3.jpg"/>
</surface>
<surface xml:id="EETS.QD.66">
<label>Verse 66</label>
<graphic url="ww_test_4.jpg"/>
</surface>
<surface xml:id="EETS.QD.68">
<label>Verse 68</label>
<graphic url="ww_test_5.jpg"/>
</surface>
<surface xml:id="EETS.QD.69">
<label>Verse 69</label>
<graphic url="ww_test_6.jpg"/>
</surface>
</surfaceGrp>
<surfaceGrp xml:id="wall" n="South Wall">
<surface xml:id="EETS.QD.70">
<label>Verse 70</label>
<graphic url="sw_test_1.jpg"/>
</surface>
</surfaceGrp>
</sourceDoc>
Making things even more complex is that there are times that everything has to be wrapped in another <surfaceGrp>
element because there's a larger block they're a part of. Which might look like this:
<sourceDoc xml:id="textContent">
<surfaceGrp xml:id="g.8" n="gathering">
<surfaceGrp xml:id="f.66" n="folio">
<surface n="recto">
<label>Verse 60</label>
<graphic url="pageimage1.jpg"/>
</surface>
<surface n="verso">
<label>Verse 63</label>
<graphic url="pageimage2.jpg"/>
</surface>
</surfaceGrp>
<surfaceGrp xml:id="f.67" n="folio>
<surface n="recto">
<label>Verse 65</label>
<graphic url="pageimage3.jpg"/>
</surface>
<surface n="verso">
<label>Verse 66</label>
<graphic url="pageimage4.jpg"/>
</surface>
</surfaceGrp>
</surfaceGrp>
<surfaceGrp xml:id="g.9" n="gathering">
<surfaceGrp xml:id="f.67" n="folio>
<surface n="recto">
<label>Verse 68</label>
<graphic url="pageimage5.jpg"/>
</surface>
<surface n="verso">
<label>Verse 69</label>
<graphic url="pageimage6.jpg"/>
</surface>
</surfaceGrp>
</surfaceGrp>
</sourceDoc>
So my questions are twofold:
- How do I get my xsl to display everything in the first
<surfaceGrp>
tree? My current code will display the two surfaces for the child<surfaceGrp>
but not everything. - How would I generate a link from Verse 66 to Verse 68 in my example above, and is it fundamentally different than a link from Verse 65 to Verse 66? I can jump to the next item and the next
<surfaceGrp>
using some convoluted code I have, but it is an incredibly buggy solution and breaks entirely once the second<surfaceGrp>
layer is added. If there's a standard solution I'd appreciate a nod in the right direction.
The html code that the xsl generates currently with the code I have is as follows:
<div id="centerMenu">
<span class="menuitem" id="image_thumbnail">
<a class="nav_link" href="ww_test_1.html">
<img class="thumbnail" src="../../Quis_Dabit/Clopton/Thumbnails/ww_test_1-thumbnail.jpg" alt="First Panel" />
</a>
</span>
<span class="menuitem" id="image_thumbnail">
<a class="nav_link" href="ww_test_2.html">
<img class="thumbnail" src="../../Quis_Dabit/Clopton/Thumbnails/ww_test_2-thumbnail.jpg" alt="Second Panel" />
</a>
</span>
<span class="menuitem" id="image_thumbnail">
<a class="nav_link" href="ww_test_3.html">
<img class="thumbnail" src="../../Quis_Dabit/Clopton/Thumbnails/ww_test_3-thumbnail.jpg" alt="Third Panel" />
</a>
</span>
<span class="menuitem" id="image_thumbnail">
<a class="nav_link" href="ww_test_4.html">
<img class="thumbnail" src="../../Quis_Dabit/Clopton/Thumbnails/ww_test_4-thumbnail.jpg" alt="Fourth Panel" />
</a>
</span>
<span class="menuitem" id="image_thumbnail">
<a class="nav_link" href="ww_test_5.html">
<img class="thumbnail" src="../../Quis_Dabit/Clopton/Thumbnails/ww_test_5-thumbnail.jpg" alt="Fifth Panel" />
</a>
</span>
<span class="menuitem" id="image_thumbnail">
<a class="nav_link" href="ww_test_6.html">
<img class="thumbnail" src="../../Quis_Dabit/Clopton/Thumbnails/ww_test_6-thumbnail.jpg" alt="Sixth Panel" />
</a>
</span>
</div>
<div id="rightMenu">
<span class="menuitem" id="previousItem">
<a class="nav_link">Previous</a>
</span>
<span class="menuitem" id="nextItem">
<a class="nav_link" href="ww_test_2.html">Next</a>
</span>
</div>