Adding images to .xsl using XML

I have created a unique "blog" using XML and XLST.

The format of the blog is as follows:

<post id="1" category="Miscellaneous">
<ptitle>MiG-21</ptitle>
<psubtitle>Mikoyan-Gurevich MiG-21</psubtitle> 
<image></image>
<author> Brian Livori </author> 
<date> 11/10/2012 </date>
<par> The Mikoyan-Gurevich MiG-21 (Russian: Микоян и Гуревич МиГ-21; NATO reporting name: Fishbed) is a supersonic jet fighter aircraft, designed by the Mikoyan-Gurevich Design Bureau in the Soviet Union. It was popularly nicknamed "balalaika", from the aircraft's planform-view resemblance to the Russian stringed musical instrument or ołówek (English: pencil) by Polish pilots due to the shape of its fuselage.[2]

Early versions are considered second-generation jet fighters, while later versions are considered to be third-generation jet fighters. Some 50 countries over four continents have flown the MiG-21, and it still serves many nations a half-century after its maiden flight. The fighter made aviation records. At least by name, it is the most-produced supersonic jet aircraft in aviation history and the most-produced combat aircraft since the Korean War, and it had the longest production run of a combat aircraft (1959 to 1985 over all variants).
</par>
<source>http://en.wikipedia.org/wiki/Mikoyan-Gurevich_MiG-21</source>
<comments>dsgsdg</comments>
</post>

<post id="2" category="Miscellaneous">
<ptitle>MiG-21</ptitle>
<psubtitle>Mikoyan-Gurevich MiG-21</psubtitle> 
<image></image>
<author> Brian Livori </author> 
<date> 11/10/2012 </date>
<par> The Mikoyan-Gurevich MiG-21 (Russian: Микоян и Гуревич МиГ-21; NATO reporting name: Fishbed) is a supersonic jet fighter aircraft, designed by the Mikoyan-Gurevich Design Bureau in the Soviet Union. It was popularly nicknamed "balalaika", from the aircraft's planform-view resemblance to the Russian stringed musical instrument or ołówek (English: pencil) by Polish pilots due to the shape of its fuselage.[2]

Early versions are considered second-generation jet fighters, while later versions are considered to be third-generation jet fighters. Some 50 countries over four continents have flown the MiG-21, and it still serves many nations a half-century after its maiden flight. The fighter made aviation records. At least by name, it is the most-produced supersonic jet aircraft in aviation history and the most-produced combat aircraft since the Korean War, and it had the longest production run of a combat aircraft (1959 to 1985 over all variants).
</par>
<source>http://en.wikipedia.org/wiki/Mikoyan-Gurevich_MiG-21</source>
<comments>dsgsdg</comments>
</post>

In each blog post, I would like to add an image.

How can this be accomplished?

This is the content of my .xls file:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html"/>

<xsl:template match ="/">

    <html>
    <body>
        <table align="center" >
            <tr bgcolor="C77838">
                <th>Brian's Blog </th>
                <th>About</th>
                <th>Contact</th>
            </tr>
        </table>

        <table align="center"  bgcolor="1D6135">

        <tr align="center">

        <xsl:element name="img" >
          <xsl:attribute name="border">0</xsl:attribute>
          <xsl:attribute name="src">images/banner.jpg</xsl:attribute>
          <xsl:attribute name="alt">Banner</xsl:attribute>
         </xsl:element>

        </tr>

        <tr align="center">
        <h1>JET FIGHTERS</h1>
        </tr>

        </table>
        <br></br><br></br>

        <table >
            <td width="10%" bgcolor="white"></td>

            <td bgcolor="CC9933">
            <xsl:for-each select="blog/post">
            <tr bgcolor="FFFF99" ><td><xsl:value-of select="ptitle"/></td></tr>
            <tr bgcolor="FFFFCC"><td><xsl:value-of select="psubtitle"/></td></tr><br></br>
            <br></br><br></br>
            <tr bgcolor="FFFFCC"><td><xsl:value-of select="image"/></td></tr>

            <tr><td><xsl:value-of select="par"/></td></tr><br></br>
            <br></br><br></br>
            <tr bgcolor="D6D6B2"><td>Source: <xsl:value-of select="source"/></td></tr>

            <br></br><tr bgcolor="FFFFCC">Posted on: <xsl:value-of select="date"/> by <xsl:value-of select="author"/></tr>
            <br></br><tr bgcolor="FFFFCD">Comments: <xsl:value-of select="comments"/> by <xsl:value-of select="comments"/></tr>
            <hr color="white"></hr>
            </xsl:for-each>
            </td>

            <td width="10%" bgcolor="white"></td>
        </table>
    </body>
    </html>

</xsl:template>

<xsl:template match="list">
   Images are element contents, apply a template to all image elements:
   <xsl:apply-templates select="image"/>
   Images are attribute values of an element, we do it differently:
   <xsl:apply-templates select="image3"/>
</xsl:template>

<xsl:template match="image1">
                <p> <img src="{@source}"/><br/><xsl:value-of select="."/> </p>
</xsl:template>

</xsl:stylesheet>

Answer №1

When it comes to handling images' URLs within the <image> element and dealing with blank <images>, I believe this code snippet was created to address that issue. Feel free to clarify if needed:

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:output method="html"/>

  <xsl:template match ="/">

    <html>
      <body>
        <table align="center" >
          <tr bgcolor="C77838">
            <th>Brian's Blog </th>
            <th>About</th>
            <th>Contact</th>
          </tr>
        </table>

        <table align="center"  bgcolor="1D6135">

          <tr align="center">
            <td>
              <img border="0" src="images/banner.jpg" alt="Banner" />
            </td>
          </tr>

          <tr align="center">
            <td>
              <h1>JET FIGHTERS</h1>
            </td>
          </tr>

        </table>
        <br />
        <br />

        <table >
          <tr>
            <td width="10%" bgcolor="white"></td>

            <td bgcolor="CC9933">
              <xsl:apply-templates select="blog/post" />
            </td>

            <td width="10%" bgcolor="white"></td>
          </tr>
        </table>
      </body>
    </html>

  </xsl:template>

  <xsl:template match="post">
    <table>
      <tr bgcolor="FFFF99" >
        <td>
          <xsl:value-of select="ptitle"/>
        </td>
      </tr>
      <tr bgcolor="FFFFCC">
        <td>
          <xsl:value-of select="psubtitle"/>
        </td>
      </tr>
      <br></br>
      <br></br>
      <xsl:if test="normalize-space(image)">
        <tr bgcolor="FFFFCC">
          <td>
            <xsl:apply-templates select="image"/>
          </td>
        </tr>
      </xsl:if>
      <tr>
        <td>
          <xsl:value-of select="par"/>
        </td>
      </tr>
      <br />
      <br />
      <tr bgcolor="D6D6B2">
        <td>
          Source: <xsl:value-of select="source"/>
        </td>
      </tr>

      <br></br>
      <tr bgcolor="FFFFCC">
        <td>
          Posted on: <xsl:value-of select="date"/> by <xsl:value-of select="author"/>
        </td>
      </tr>
      <br></br>
      <tr bgcolor="FFFFCD">
        <td>
          Comments: <xsl:value-of select="comments"/> by <xsl:value-of select="comments"/>
        </td>
      </tr>
      <hr color="white" />
    </table>
  </xsl:template>

  <xsl:template match="image">
    <p>
      <img src="{.}"/>
      <br/>
      <xsl:value-of select="."/>
    </p>
  </xsl:template>

</xsl:stylesheet>

The HTML structure needs some improvements as tables for layout are discouraged, but it seems like a step in the right direction. To enhance further, avoid <br/ >s directly under table elements and ensure proper nesting of tags.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there an animation triggered by hovering the mouse over?

I've implemented a bounce animation that is triggered by mouseover on an image. Currently, the animation only happens once, but I want it to bounce every time the mouse hovers over it. Here is the HTML code: <div class="hair"> <img src= ...

Excessive HTML and CSS overflow stretching beyond the boundaries of the page on the right

It seems like the issue lies with div.ü and div.yayın, as they are causing overflow on the right side of the page. When these elements are removed, the overflow issue goes away. Are there different positioning codes that can be used to prevent this? d ...

Trouble with connecting CSS files

Can anyone explain why my CSS file isn't linking properly when the HTML file is located in a subfolder within the directory that contains both the CSS and HTML folders? I attempted to remove the main folder path from the link, but the issue still pers ...

What is the precise width?

Here's a question for you: an HTML element has the following styles applied to it - width: 150px, padding: 3px, border: 4px, margin: 7px. What is the actual width of the element? I'm confused by this question because it specifies that the width ...

What is the best way to showcase HTML content in columns with a horizontal scrolling feature?

I am trying to showcase a list of basic HTML elements such as divs, paragraphs, etc. within a fixed height container, arranged in columns with consistent width. I want them to be horizontally scrollable, similar to the layout displayed in this image. Thi ...

Aligning the <div> list to the center of the webpage

Is there a way to center this list element on the page? It consists of three boxes that are all the same size, and I want them to always remain in the middle. body { width: 100%; } .boxes { display: block; margin: 0 auto; } .box-container ...

Does the Parent Tag style override the child tag style when hovering?

I am currently dealing with some style issues. How can I apply the styling of the parent tag to the child tag when hovering over it? Let's illustrate this with a simple example. .outer:hover { background: yellow; z-index: 1; position: relativ ...

Creating a Stylish CSS Table Utilizing DIV Elements: Preventing the Top Row from Scrolling

Utilizing a pure DIV table with the display: table, table-row, table-cell format for styling, I have managed to make the entire table scroll except for the header row. However, I am in search of methods that can prevent the header row (1st row) from scroll ...

What is the best way to place a transparent navbar on top of a hero image while also adding a functional button to the hero image?

My navigation bar is set to be transparent on top of my hero image, but the buttons on the hero image are not clickable. The nav-bar has a z-index of 1, while my hero image, text, and button have a z-index of -1. This setup causes the button to be unclick ...

Flex bug in safari causing issues with inline form display

I have created a simple inline form using flexbox. However, I encountered an issue in Safari where the button loses its width. Here is a screenshot for reference: https://i.stack.imgur.com/3s5AR.jpg Interestingly, the form looks fine in all other browsers ...

What is the best way to use CSS in ReactJS to insert an image into a specific area or shape?

Currently, I'm working on developing a team picker tool specifically for Overwatch. The layout consists of cards arranged horizontally on a website, all appearing as blank gray placeholders. These cards are positioned using the JSX code snippet shown ...

"Addclass() function successfully executing in the console, yet encountering issues within the script execution

I dynamically created a div and attempted to add the class 'expanded' using jQuery, but it's not working. Interestingly, when I try the same code in the console, it works perfectly. The code looks like this: appending element name var men ...

The standard bootstrap navbar does not automatically create spacing for content below it

Hey there everyone, I’m facing an issue with my responsive bootstrap menu. When I click the toggle button to open the dropdown menu, it doesn’t push the other content down like it should. Instead, it just overlaps the content. I’ve been trying to sol ...

How can I make a div element match the height of an image and overflow without relying on

Here is the code that I am currently working with: https://codepen.io/allen-houng/pen/ExYKYdq Additionally, you can find a gist of the code snippet below: <div class="parent"> <div class="imageWrapper"> <img class="image" src="imageurl" ...

After updating the External SS, the background vanishes

There appears to be an issue with a page that I designed. I originally wrote the CSS code internally within the <style type="text/css>...</style> section, including a background image, and all was working fine initially. However, after transf ...

Is it possible to display a Twitter feed within a Bootstrap popover?

Is it feasible to showcase a Twitter feed within a Bootstrap popover? For instance, when the Twitter button is clicked, I aim to have my website's Twitter feed appear inside a Bootstrap popover. I have attempted the code below without success. Any a ...

Revealing and concealing adjacent elements within a specified class

In an attempt to create a carousel that functions by hiding and showing images when the next and previous buttons are clicked, I have organized my images in a table and assigned the li elements a class of 'li'. There are four images in total, wit ...

div or paragraph element nested within a flex container

How can I make the logo text div tag, called Title, take up its content space inside the parent flexbox without wrapping? I prefer not to set the Title div to 100% or use white-space: nowrap. I simply want it to behave like a regular div where it fills it ...

The click function for the responsive navbar hamburger is not functioning properly

Having some trouble with the code not working in responsive mode. I've tested it on a 600px screen and the hamburger button doesn't seem to work (I click it and nothing happens). I've gone through both the CSS and JS multiple times but can&a ...

conceal the offspring from the guardians, not the offspring

Could you please assist me with this situation... <li id="4331">Region <ul> <li id="4332">Asia</li> <li id="6621">Europe</li> </ul> </li> I have a query when I click on the Reg ...