Entry
XML: XSL: <xsl:attribute>: How add picture filename to SRC attribute? [jpg/gif/png/HTML/IMG/HREF]
Sep 16th, 2003 08:24
Knud van Eeden,
----------------------------------------------------------------------
--- Knud van Eeden --- 07 September 2003 - 08:31 pm ------------------
XML: XSL: <xsl:attribute>: How add picture filename to SRC attribute?
[jpg/gif/png/HTML/IMG/HREF]
Suppose you have for example an <IMG> where you want to input a
specific filename, via your XML, to your XSL.
For example this is what you see in your HTML output.
<IMG
ALT=""
BORDER="0"
HEIGHT="300"
SRC="mypicturefilename.jpg"
WIDTH="1220"
>
</IMG>
And you want to make the filename in the 'SRC' a variable.
How could you proceed?
---
You can use e.g. the xsl keyword:
<xsl:attribute>
---
So this is what you want to get as output, given the input from the
XML file, combined with your XSL file
<IMG
ALT=""
BORDER="0"
HEIGHT="300"
SRC="mypicturefilename.jpg"
WIDTH="1220"
>
</IMG>
---
To achieve this, replace it with the following in your xsl file:
<IMG>
<!-- -->
<xsl:attribute name="ALT">
<xsl:text></xsl:text>
</xsl:attribute>
<!-- -->
<xsl:attribute name="BORDER">
<xsl:text>0</xsl:text>
</xsl:attribute>
<!-- -->
<xsl:attribute name="HEIGHT">
<xsl:text>300</xsl:text>
</xsl:attribute>
<!-- -->
<xsl:attribute name="SRC">
xsl:value-of select="<here comes the XPath to your filename>"/>
</xsl:attribute>
<!-- -->
<xsl:attribute name="WIDTH">
<xsl:text>1220</xsl:text>
</xsl:attribute>
<!-- -->
</IMG>
---
You can also completely write this in xsl, by using
the <xsl:element> tag.
<xsl:element name="IMG">
<!-- -->
<xsl:attribute name="ALT">
<xsl:text></xsl:text>
</xsl:attribute>
<!-- -->
<xsl:attribute name="BORDER">
<xsl:text>0</xsl:text>
</xsl:attribute>
<!-- -->
<xsl:attribute name="HEIGHT">
<xsl:text>300</xsl:text>
</xsl:attribute>
<!-- -->
<xsl:attribute name="SRC">
xsl:value-of select="<here comes the XPath to your filename>"/>
</xsl:attribute>
<!-- -->
<xsl:attribute name="WIDTH">
<xsl:text>1220</xsl:text>
</xsl:attribute>
<!-- -->
</xsl:element name>
So here the trend is to write or convert everything
(originally in HTML) where possible to the XSL language,
so as to have a uniform approach, and the ability to
use common (XSL) methods.
---
Another and a bit quicker or easier solution (because you only have to
change that particular attribute, and not having to change the other
attributes also) might be to use curly brackets, containing the (full
or partial (so enough information that the program can determine where
to find this information in the accompanying XML file)) path to the
name:
<IMG
ALT=""
BORDER="0"
HEIGHT="300"
SRC="{SRC}"
WIDTH="1220"
>
</IMG>
You pass here the information about the 'SRC' e.g. via parameters
in a template.
---
Steps: Overview:
1. -Create your XML file
(containing a tag (here is chosen 'element1') with the input
filename):
(save this file e.g. as 'picture.xml')
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE element1 SYSTEM "picture.dtd">
<?xml-stylesheet type="text/xsl" href="picture.xsl"?>
<!-- input: which file do you want to load? -->
<element1>fotoknud.jpg</element1>
2. -Possibly create your DTD file
(save this file e.g. as 'picture.dtd')
<!ELEMENT element1 (#PCDATA)>
3. -Create your XSL file:
(save this file e.g. as 'picture.xsl')
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:template match="/">
<xsl:apply-templates/>
</xsl:template>
<xsl:template match="element1">
<HTML>
<BODY>
<IMG>
<!-- -->
<xsl:attribute name="ALT">
<xsl:text></xsl:text>
</xsl:attribute>
<!-- -->
<xsl:attribute name="BORDER">
<xsl:text>0</xsl:text>
</xsl:attribute>
<!-- -->
<xsl:attribute name="HEIGHT">
<xsl:text>300</xsl:text>
</xsl:attribute>
<!-- -->
<xsl:attribute name="SRC">
<xsl:value-of select="/element1"/>
</xsl:attribute>
<!-- -->
<xsl:attribute name="WIDTH">
<xsl:text>1220</xsl:text>
</xsl:attribute>
<!-- -->
</IMG>
</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>
4. -Note that I had to convert all other attributes (like 'ALT',
HEIGTH', 'WIDTH', ...) in the given <IMG> tag to the equivalent
XSL (using <xsl:text>).
Otherwise the conversion to correct HTML output might not work.
5. -The HTML result shown in a browser will show the picture
'mypicturefilename.jpg'
---
Note: you will only see this picture in the browser if it exists,
and can be found.
---
You can (also) write the full filepath.
---
e.g.
c:\temp\mypicturefilename.jpg
---
So in your .xml file put it like:
<element1>c:\temp\mypicturefilename.jpg</element1>
---
Or put the picture filename in the same directory as your .XML and
.XSL file.
---
Otherwise you will see e.g. an empty screen or a 'file not found'
'X' marker in your browser screen.
---
Note:
you use here
<IMG>
(so with a '>' on the end)
and not
<IMG
(like originally)
Otherwise you might or will get an error.
---
Tested and worked OK on Microsoft Explorer v6.0 [kn, ni, su, 07-09-
2003 20:20:49]
---
Internet: see also:
http://www.vbxml.com/xsl/tutorials/intro/ws_1.asp
----------------------------------------------------------------------
