The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Images in html from xml thru xsl
joyful
post Mar 23 2011, 07:35 PM
Post #1


Advanced Member
****

Group: Members
Posts: 239
Joined: 15-November 10
Member No.: 13,147



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!

--

This post has been edited by joyful: Mar 23 2011, 08:08 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies(1 - 16)
Darin McGrew
post Mar 23 2011, 10:48 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



I'm moving this to the client-side scripting forum.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Mar 24 2011, 12:42 AM
Post #3


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



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)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 24 2011, 02:50 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Try searching for "display image from xml using xsl".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
joyful
post Mar 24 2011, 06:12 PM
Post #5


Advanced Member
****

Group: Members
Posts: 239
Joined: 15-November 10
Member No.: 13,147



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!

--
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
joyful
post Mar 24 2011, 10:39 PM
Post #6


Advanced Member
****

Group: Members
Posts: 239
Joined: 15-November 10
Member No.: 13,147



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Mar 25 2011, 07:11 AM
Post #7


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
joyful
post Mar 25 2011, 02:01 PM
Post #8


Advanced Member
****

Group: Members
Posts: 239
Joined: 15-November 10
Member No.: 13,147



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!

--

This post has been edited by joyful: Mar 25 2011, 02:02 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Mar 25 2011, 02:48 PM
Post #9


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



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)

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
joyful
post Mar 25 2011, 04:53 PM
Post #10


Advanced Member
****

Group: Members
Posts: 239
Joined: 15-November 10
Member No.: 13,147



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.

--
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
joyful
post Mar 25 2011, 06:37 PM
Post #11


Advanced Member
****

Group: Members
Posts: 239
Joined: 15-November 10
Member No.: 13,147



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
joyful
post Mar 25 2011, 09:04 PM
Post #12


Advanced Member
****

Group: Members
Posts: 239
Joined: 15-November 10
Member No.: 13,147



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

--
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Mar 25 2011, 10:41 PM
Post #13


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



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...


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
joyful
post Mar 25 2011, 11:56 PM
Post #14


Advanced Member
****

Group: Members
Posts: 239
Joined: 15-November 10
Member No.: 13,147



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.

--

This post has been edited by joyful: Mar 25 2011, 11:59 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Mar 26 2011, 12:56 AM
Post #15


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Please see the FAQ entry How can I display an image on my page? Doing it with PHP is pretty much the same. As Brian explained, just have the PHP echo the HTML for an image.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
joyful
post Mar 26 2011, 04:23 PM
Post #16


Advanced Member
****

Group: Members
Posts: 239
Joined: 15-November 10
Member No.: 13,147



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

Please see the FAQ entry How can I display an image on my page? 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

--
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
joyful
post Mar 26 2011, 10:55 PM
Post #17


Advanced Member
****

Group: Members
Posts: 239
Joined: 15-November 10
Member No.: 13,147



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.

--
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 01:04 PM