Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Images in html from xml thru xsl

Posted by: joyful Mar 23 2011, 07:35 PM

Hey,

I am trying to display a image from a xml file into a html page using xsl. This is what my xml looks like:

CODE
<?xml version="1.0" encoding="UTF-8"?>
<category>
    <item>
        <image><img src="images/Bracelets/two tone cuffs.jpg"></image>
        <title>my first image</title>
        <description>this is my test image and description</description>
    </item>
</category>


this is my xsl:

CODE
<?xml version="1.0" encoding="ISO-8859-1"?><!-- DWXMLSource="../category.xml" -->
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <html>
  <body>
  <h2>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th align="left">images</th>
      <th align="left">title</th>
      <th align="left">description</th>
    </tr>
    <xsl:for-each select="category/item">
    <tr>
      <td><img>
      <xsl:attribute name="src">
      <xsl:value-of select="image"/>
      </xsl:attribute></img></td>
      <td><xsl:value-of select="title" /></td>
      <td><xsl:value-of select="description" /></td>
    </tr>
    </xsl:for-each>
  </table>
  </body>
  </html>
</xsl:template>

</xsl:stylesheet>


and this is my html page:

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}

function displayResult()
{
xml=loadXMLDoc("category.xml");
xsl=loadXMLDoc("category.xsl");
// code for IE
if (window.ActiveXObject)
  {
  ex=xml.transformNode(xsl);
  document.getElementById("example").innerHTML=ex;
  }
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
  {
  xsltProcessor=new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  resultDocument = xsltProcessor.transformToFragment(xml,document);
  document.getElementById("example").appendChild(resultDocument);
  }
}
</script>
</head>
<body onload="displayResult()">
<div id="example" />
</body>
</html>


This code fails to display images (it does display text). How can I make it display images?

Thanks in advance!

--

Posted by: Darin McGrew Mar 23 2011, 10:48 PM

I'm moving this to the client-side scripting forum.

Posted by: Brian Chandler Mar 24 2011, 12:42 AM

I don't really know, but wouldn't it be much simpler, easier, and more reliable to use a server script to generate the required html from the xml file? (Either elegantly or quick-hackly)

Posted by: Frederiek Mar 24 2011, 02:50 AM

Try searching for "display image from xml using xsl".

Posted by: joyful Mar 24 2011, 06:12 PM

Hey,

Thanks for the replies...

@Brian Chandler I am a bit new to this... What would my server script look like?

@Frederiek I have searched for this (as I do every time I have a issue before I come to the forum for your knowledge). I found the code I am (trying!) using now by searching. Do you (or anyone) know how to display images from xml into html with xsl?

Once again, Thanks!

--

Posted by: joyful Mar 24 2011, 10:39 PM

Hey,

I have resolved this issue with this simple piece of xsl:

CODE
<input type="image" name="imagem" width="450px">
<xsl:attribute name="src"><xsl:value-of select="image" /></xsl:attribute>
</input>

Thank you.

Posted by: Brian Chandler Mar 25 2011, 07:11 AM

QUOTE(joyful @ Mar 25 2011, 08:12 AM) *


@Brian Chandler I am a bit new to this... What would my server script look like?


I don't know anything much about xsl, but doing it your way means you are relying on the browser to implement the xsl. Is support for xsl really widespread? (I have no idea)

On the server, you read the xml (there are standard parsers in php for example for doing this) then simply generate the required html. This means that any browser can be reasonably expected to produce the right result. I guess in the end it would be no simpler than the xsl method, but more universal.


Posted by: joyful Mar 25 2011, 02:01 PM

Hey,

I found some code to do this with php... I know I've done this in a very odd fashion, but it does what I want.

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
  
.main_table {
    width: 950px;
    border: 2px;
    border-style: solid;
    margin: 0px auto;
}

</style>
</head>
<body>
<table class="main_table">
<tr>
  <td rowspan="4"><p><?php
$bracelets = new SimpleXMLElement('bracelets.xml',NULL,true);
foreach($bracelets -> Two_Tone_Photon_cuffs as $ob)
{
        echo $ob->image;
}
?></p></td>
  <td class="title"><p><?php
$bracelets = new SimpleXMLElement('bracelets.xml',NULL,true);
foreach($bracelets -> Two_Tone_Photon_cuffs as $ob)
{
        echo $ob->title;
}
?></p></td>
</tr>
<tr>
  <td><p><?php
$bracelets = new SimpleXMLElement('bracelets.xml',NULL,true);
foreach($bracelets -> Two_Tone_Photon_cuffs as $ob)
{
        echo $ob->description;
}
?></p></td>
</tr>
<tr>
  <td><p><?php
$bracelets = new SimpleXMLElement('bracelets.xml',NULL,true);
foreach($bracelets -> Two_Tone_Photon_cuffs as $ob)
{
        echo $ob->price;
}
?></p></td>
</tr>
<tr>
  <td><p><?php
$bracelets = new SimpleXMLElement('bracelets.xml',NULL,true);
foreach($bracelets -> Two_Tone_Photon_cuffs as $ob)
{
        echo $ob->link;
}
?></p></td>
</tr>
</table>
</body>
</html>

Yes, I know it is a bit odd, but it uses PHP and does what I want. If you see a way to shorten this (or simplify) please do tell!

Also, how do you display a image in the PHP variable. The image looks like this in the XML:
CODE
<image>../../images/bracelets/two tone cuffs.jpg</image>

Do you know how to do this?

Thanks a lot!

--

Posted by: Brian Chandler Mar 25 2011, 02:48 PM

I've never used this xml class (in php), and I have no idea at all why or how the object $bracelets comes to have a member Two_Tone_Photon_cuffs, but if the code above works**, then a couple of points:

** Really: does it work?

(1) You are creating the object over and over again for no reason. Once you have $bracelets you can loop through its member arrays in turn. But I would have thought you want to list the various attributes of each member in turn, inside a table.

(2) If you can output the filename for an image (suppose $image), then you can output the html for a td containing just the image (which is: "<td><img src=\"$image\"></td>") (You can add the philosophical droppings if you want it to validate, or if there is a meaningful alt text)


Posted by: joyful Mar 25 2011, 04:53 PM

Hey,

Sorry, I did not make it clear... My xml's tags go like this

<bracelets>
<Two_Tone_Photon_cuffs>
<image>
</image>
</Two_Tone_Photon_cuffs>
</bracelets>

As you noted, in the php one thing that I have noticed: When I have multiple items in my xml, they all show up in the same <td> (obviously they would). How can I make each item from under say "title" show up in its own <td>? What PHP code would I need for this?

Now, about the image, I don't quite under stand what you mean. Would I add the: <td><img src=\"$image\"></td> into the php? If so, how do I tell it to look in the XML for "$image"?
Tell me if I am totally off here!

Thanks for your patience, I am quite new to PHP.

--

Posted by: joyful Mar 25 2011, 06:37 PM

Hey,

I found out the "right" way to do this. It would be like this:

CODE
<?php
// load SimpleXML
$Two_Tone_Photon_cuffs = new SimpleXMLElement('bracelets.xml', null, true);

echo <<<EOF
<table>
        <tr>
                <th>Image</th>
                <th>Title</th>
                <th>About</th>
                <th>Price</th>
                <th>Buy</th>
        </tr>

EOF;
foreach($Two_Tone_Photon_cuffs as $Two_Tone_Photon_cuffs) // loop through our books
{
        echo <<<EOF
        <tr>
                <td>{$Two_Tone_Photon_cuffs->image}</td>
                <td>{$Two_Tone_Photon_cuffs->title}</td>
                <td>{$Two_Tone_Photon_cuffs->description}</td>
                <td>{$Two_Tone_Photon_cuffs->price}</td>
                <td>{$Two_Tone_Photon_cuffs->link}</td>
        </tr>

EOF;
}
echo '</table>';
?>

This is the right way to do this, right?
Now, Do you know how I can specify that "image" is a img url?
Also, do you know how to specify In PHP that "link" in a url?

Thanks for your help

Posted by: joyful Mar 25 2011, 09:04 PM

Hey,
I just figured out how to use CSS in my PHP.
My only concern now is trying to get my variable image to show:

CODE
{$Two_Tone_Photon_cuffs->image}

What code do I need to make this work?

Thanks

--

Posted by: Brian Chandler Mar 25 2011, 10:41 PM

I think you need to read Chapter 1 of "How PHP works" (or somesuch title).

Basically your php program is just like any other program - it does what you have written it to do, and in particular it outputs text (to stdout, but just think of it as being the web page you are generating). Read the PHP manual for 'echo'.

Where did you get the curly brackets in {$Two_Tone_Photon_cuffs->image} ?

You can echo anything: string literals like '<td>', variables like $cuff, etc. But you have a foreach that doesn't make sense:

CODE

foreach($Two_Tone_Photon_cuffs as $Two_Tone_Photon_cuffs) // loop through our books


I prefer to use shorter variable names. Suppose $cuffs is what you get from the xml function; then $cuffs is an _array_ of items, each one a cuff. Read the php manual for 'array'. So you want

CODE

foreach($cuffs as $cuff)


Read the manual for foreach. $cuffs is the array; $cuff is each element of the array in turn, being an object representing one sales item.

Then you can write

echo '<td>', $cuff->image, "</td>\n"; // add newline for neatness

This gives '<td>../../cuff3045.jpg</td>'.

So if you want '<td><img src="../../cuff3045.jpg"></td>' you just need to add the extra text in.

I'm trying to help you see what you are doing, not just do it for you. Give a fish a bicycle, and all that...



Posted by: joyful Mar 25 2011, 11:56 PM

Sorry, I think I has going a little faster then my legs could carry me (and I appreciate that you have "slowed me down" seeing as it is imported to actually learn what you are doing and not just copying). This is one of the first big (to me at least) php things I have done. I am (and will) do a bit more general reading about PHP. I did have a lot of excess code (that I have removed after you noted). This came from just copying peoples code that I found. I do realize that this is what you are talking about "Give a fish a bicycle, and all that..."

Having said that, do you think, you could try to explain how to make my "image" url show up as a image? I have looked this up and tried to read about it, but have not really found out how to make a variable image url appear as a image in PHP? Is it possible? Or do you have to leave php or something?

Once again, Thanks for your help.

--

Posted by: Darin McGrew Mar 26 2011, 12:56 AM

Please see the FAQ entry http://htmlhelp.com/faq/html/images.html#inline-image Doing it with PHP is pretty much the same. As Brian explained, just have the PHP echo the HTML for an image.

Posted by: joyful Mar 26 2011, 04:23 PM

QUOTE(Darin McGrew @ Mar 26 2011, 01:56 AM) *

Please see the FAQ entry http://htmlhelp.com/faq/html/images.html#inline-image Doing it with PHP is pretty much the same. As Brian explained, just have the PHP echo the HTML for an image.

Please don't insult my intelligence. I am more then able to code with HTML (I know how to display a image).

On the other hand I am new to php. I do release that this is a simple question. I am just hoping that someone could give me the necessary code to display a variable image in PHP (or at leased show me were I could learn this).

Thank You

--

Posted by: joyful Mar 26 2011, 10:55 PM

I figured out how to make a variable image in PHP.

@Darin McGrew Sorry man I know I was a bit obnoxious. You were right about displaying the image. It is very similar to html. I just took offense when now I see it was not meant.

@ Brian Chandler Thanks for the advice and patience. Sorry, I know I was a bit of a pest, but I really appreciate your input.

Thanks guys.

--

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)