?
Solved

Using HTML <img tag in XSLT

Posted on 2002-07-01
18
Medium Priority
?
896 Views
Last Modified: 2013-11-19
I'm attempting to transform an xml doc into a web page containing images.  The src attribute is coming from a browser form element in a ASP page.  The form values are written to an xml file that is transformed on submit.  The transformation works if I don't put in the <img tag.  Any other tag works.
 
What am I doing wrong?

When I use the code below I get a blank html page with no data.


XSL code:

<xsl:for-each select="//photo">
    <tr>
      <td><img src="{@purl}" /></td>
      <td><font color="#FFFFCC" size="3"><xsl:value-of select="caption"/></font></td>
    </tr>
  </xsl:for-each>

Any suggestions or comments would be greatly appreciated.
0
Comment
Question by:midas_06
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 6
  • 3
  • +1
18 Comments
 
LVL 14

Expert Comment

by:avner
ID: 7123744
The XSL itself looks valid, can you send an XML with it ?
I wouldn't suggest using the FONT tag since it's deprecated or on the way to there.
0
 
LVL 1

Expert Comment

by:RobinPatra
ID: 7124117
Dear Midas;

Hope the following example solves ur problem

sample XML file
****************
<Photo>
     <url>D:\xxx.jpg</url>
</Photo>

****************

To display the above the XSL used is

****<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:output method="html"/>
     <xsl:template match="/">
          <xsl:for-each select="/Photo">
               <xsl:variable name="loc"><xsl:value-of select="/Photo/url"/></xsl:variable>
               <tr>
                    <td>
                         <img>
                              <xsl:attribute name="src"><xsl:value-of select="$loc"/></xsl:attribute>
                              <xsl:attribute name="width">100</xsl:attribute>
                              <xsl:attribute name="height">100</xsl:attribute>
                         </img>
                    </td>
               </tr>
          </xsl:for-each>
     </xsl:template>
</xsl:stylesheet>
************************************

Please try the above with ur given problem.

If i am going wrong anywhere or u need any more help do write..

Robin

*****************************************
0
 
LVL 1

Expert Comment

by:RobinPatra
ID: 7124138
Dear Midas;

Hope the following example solves ur problem

sample XML file
****************
<Photo>
     <url>D:\xxx.jpg</url>
</Photo>

****************

To display the above the XSL used is

****<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:output method="html"/>
     <xsl:template match="/">
          <xsl:for-each select="/Photo">
               <xsl:variable name="loc"><xsl:value-of select="/Photo/url"/></xsl:variable>
               <tr>
                    <td>
                         <img>
                              <xsl:attribute name="src"><xsl:value-of select="$loc"/></xsl:attribute>
                              <xsl:attribute name="width">100</xsl:attribute>
                              <xsl:attribute name="height">100</xsl:attribute>
                         </img>
                    </td>
               </tr>
          </xsl:for-each>
     </xsl:template>
</xsl:stylesheet>
************************************

Please try the above with ur given problem.

If i am going wrong anywhere or u need any more help do write..

Robin

*****************************************
0
WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

 
LVL 27

Expert Comment

by:BigRat
ID: 7124342
Robin has included an <xsl:output method="html"/> tag in his sheet. Have you got one of these as well?
0
 

Author Comment

by:midas_06
ID: 7125415
I do have the output element with method set to html.

When I run Robin's code it seems to simply ignore the xsl completely.  When I used the above code this is the html that results:

<html xmlns:fo="http://www.w3.org/1999/XSL/Format">
     <body>
          <h1>This is a Test Transformation</h1>
     </body>
</html>


xsl:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:output method="html"/>
   <xsl:template match="/">
     <html>
       <body>
         <h1>This is a Test Transformation</h1>
         <xsl:for-each select="//Photo">
              <tr>
                   <td>
                        <img>
                             <xsl:attribute name="src"><xsl:value-of select="@purl"/></xsl:attribute>
                             <xsl:attribute name="width">100</xsl:attribute>
                             <xsl:attribute name="height">100</xsl:attribute>
                        </img>
                   </td>
              </tr>
         </xsl:for-each>
       </body>
      </html>
    </xsl:template>
</xsl:stylesheet>

What parser are you guys using?  I'm using msxml4.0.  Do I need to use a different parser?  I did some research and heard that the ms parser doesn't parse xsfo.
0
 
LVL 1

Expert Comment

by:RobinPatra
ID: 7125863

I am using msxml3.0 .The problem for me is that i am not getting ur required query.If i kindly elaborate ur query and give the required XML file that u has taken into consideration.

0
 
LVL 27

Expert Comment

by:BigRat
ID: 7126539
In your last posting midas_06 I don't see what the xmlns:fo has got to do with it. FO is for Formatting Objects and NOT HTML, so remove it completely.

Next: I assume that you EXPLICITLY create the XML DOMs in VB Script(?) on an ASP page, load the XML and XSL into tzhem and apply the transformation. The resultant HTML you send to the browser. Correct me if I am wrong.

I'd expect to see in your code tests that the loading of the XML and XSL were successful (by using the document method parseError and testing it) because this often a great source of small silly errors.

You say you get a blank page when things go wrong. How blank? What do you get when you say ViewSource in the browser? One trick is to add extra HTML to try to find the source of the error :-


<TR><TD>Start of //photo</TD></TR>
<xsl:for-each select="//photo">
   <tr>
     <TD>Test Output</TD>
     <TD><xsl:value-of select="."/></TD>
     <td><img src="{@purl}" /></td>
     <td><font color="#FFFFCC" size="3"><xsl:value-of select="caption"/></font></td>
   </tr>
 </xsl:for-each>
<TR><TD>End of //photo</TD></TR>

My test HTML is written here in capital letters.

HTH

0
 

Author Comment

by:midas_06
ID: 7126687
Biggie,

Are you speaking of the xlmns:fo in the namespace declaration in the xsl file, or the one in the HTML code?  The one in the HTML code is created via the transformation.  Obviously not in my xsl file.  Either way, I've tried it with & w/o the namespace declaration for FO.  Still doesn't work.

When I say the page is blank, I mean BLANK.  You are correct about my asp page.  In addtion I actually save the resulting html file to the server.  I then redirect to the transformed html doc.  If you look at the test.html page that is the result, the page is just a blank white page. If I perform this transformation, and do not use the <img> tag, the transformation works, and I get a fully functional html page that I can view in the browser.

I didn't try the parseError method, but I'll see if that gives me anything.
0
 
LVL 27

Expert Comment

by:BigRat
ID: 7127109
Where ever the FO turns up delete it - it is a red herring.

The transformed text is saved to the server. What is in the file? How many bytes does the file have?
0
 

Author Comment

by:midas_06
ID: 7127640
Nothing is in the file.  it is 0kb

0
 
LVL 27

Expert Comment

by:BigRat
ID: 7129569
OK, then probably a riun time error has occured. How have you set the error handling in your script? You could try putting the transform in a try..catch statement and try catching and printing out the exception.

One minor point: I hope that after creating the DOM objets you set their async properties to false. I have often forgotten to do this with weird results!

I would also suggest that you download the XSL debugger from MS (NSDN Home -> Web & Internet Samples Home -> XSL Debugger) and try using that.

0
 

Author Comment

by:midas_06
ID: 7130791
Biggie,

Yeah, I've been burned by not setting my async to false, but not this time.  I'll set up some error handling and download the XSL debugger from microsoft.

I'll let you know if I make any progress.
0
 

Author Comment

by:midas_06
ID: 7132491
Biggie,

I ran the XSL debugger.  The transformation worked without a hitch.  So, there's a problem with my asp.  I'm going to run through that now.

Do you think there may be a problem with data types? I'm building the xml doc from a form.  I'm using a file form element to get the paths into the xml.  Do you think there is an issue here?

Wil
0
 

Author Comment

by:midas_06
ID: 7132774
Biggie,

BTW, I hope you had a good 4th.

I've isolated the problem down to the transform method in my asp page.  I've changed my code so that the stylesheet declaration reference is written, and then redirect to the xml page I've just created.  This works.

Just one problem, the resulting html page is what I need.  I can't guarantee everybody is going to have the correct parser.  Any thoughts.
0
 
LVL 27

Accepted Solution

by:
BigRat earned 800 total points
ID: 7137451
So, you're outputting the XML containing a stylesheet reference to the browser. The ONLY browser which can properly handle this is IE, and then basically from 5.0 onwards. The newest Netscape might work a bit.

In any event the ONLY MSXML version which can be used is 3.0. Even if you install IE 6.0 with MSXML 4.0 the 3.0 version gets used.

That being said, I know that the transform method was failing at the server. And I could NOT believe that this was solely due to the IMG tag. When the HTML is output there are various "modifications" to be done to make the HTML backwards conformant: namely the </IMG> tag must be surpressed. It is almost inconceivable that MS would get this wrong in version 4.0. It must be something else.

"Do you think there may be a problem with data types? I'm building the xml doc from a form.  I'm using a file form element to get the paths into the xml.  Do you think there is an issue here?"

Yes, but only if the constructed XML is not well-formed. And you have checked for parse errors. There could be a possibility that the well-formedness of the XML was not completely checked so that the transformer would fall over. But I would have thought that this would occur in the browser/debugger as well.

If you are using MSXML 4.0 you might consider going back to 3.0 since that is all you get in the browser by default. And you might consider de- and re-installing it just in case something got corrupted.

HTH
0
 

Author Comment

by:midas_06
ID: 7143622
Yeah,

I'm going to attempt a reinstall.

thanks
0
 

Author Comment

by:midas_06
ID: 7147440
Biggie,

It finally works!

I had to reinstall the parser.  Something wasn't done correctly on the first install.

Thanks for giving some good "think through" logic. It was worth the points alone.

Wil
0
 
LVL 27

Expert Comment

by:BigRat
ID: 7148692
Pleasure.
0

Featured Post

Monthly Recap

May was a big month for new releases from Linux Academy! Take a look at what our team built recently in our blog. You can access the newest releases from our blog.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question