CODEWITHSUNDEEP
asp.netxmlxsltektron
SearchForKnowledge
SearchForKnowledge

Reputation: 3751

How to output an IMG tag from XML using XSLT

Here is my XML:

<?xml version="1.0" encoding="UTF-8"?>
<Collection>
    <Content>
        <ID>2779</ID>
        <Type>Content</Type>
        <Title>Article One</Title>
        <QuickLink>/template.aspx?id=2779</QuickLink>
        <Teaser />
        <Html>
            <root>
                <NewsArticle>
                    <artTitle>The Comprehensive Breast Center: Quality Care on the Fast Track</artTitle>
                    <artThumb>
                        <img alt="Thumb Article One" src="/uploadedImages/Test/News/artOne.png?n=5954" />
                    </artThumb>
                    <artFull />
                    <releaseDate />
                    <contactName />
                    <contactPhone />
                    <contactEmail />
                    <artTeaser>The National Cancer Institute estimates that a woman in the United States has a 1 in 8 chance of developing invasive breast cancer</artTeaser>
                    <artText>
                        <p>The Comprehensive Breast Center: Quality Care on 
the Fast Track</p>
                        <p>

How do I display the IMG tag from my XML above to an HTML document using XSLT

Upvotes: 0

Views: 1301

Answers (2)

Brian Oliver
Brian Oliver

Reputation: 1407

Something like this should do the trick:

<xsl:template match="/">
  <xsl:for-each select="Collection/Content">
    <xsl:copy-of select="Html/root/NewsArticle/artThumb/node()"/>
  </xsl:for-each>
</xsl:template>

I should note that this assumes you're getting this from an Ektron collection -- assumption made based on your tagging of this question. This will display the image from each content block in the collection. If you want just the image from the first content block of the collection, you could remove the for-each and instead use something like this:

<xsl:template match="/">
  <xsl:copy-of select="Collection/Content/Html/root/NewsArticle/artThumb/node()"/>
</xsl:template>

Also, it works either way, but i removed the slash from the front of the select on the for-each. Seemed redundant since the code is in a template that already matches on "/".

UPDATE

Some of that can be done in the workarea -- it allows you to set the css class, though I'm not sure if you can set the title attribute of an image. Here's how you could do that via XSLT. In this case, you can't copy the node whole-sale:

<xsl:template match="/">
  <xsl:for-each select="Collection/Content">
    <xsl:variable name="imageSrc" select="Html/root/NewsArticle/artThumb/img/@src" />
    <xsl:variable name="imageId">
      <xsl:text>NewsArticle_</xsl:text>
      <xsl:value-of select="ID" />
      <xsl:text>_image</xsl:text>
    </xsl:variable>
    <xsl:variable name="contentTitle" select="Html/root/NewsArticle/artTitle" />

    <img id="{ $imageId }" class="myCssClass" title="{ $contentTitle }" alt="{ $contentTitle }" src="{ $imageSrc }" />
  </xsl:for-each>
</xsl:template>

(Updated again - appears i misread your comment. Thanks, @MathiasMüller!) When assigning ids to elements like this, I prefer to use a little more than just the content id. In this case, by using "NewsArticle_{Content ID}image", I allow for a container div to use an id "NewsArticle{Content Id}" if it is needed in the future without colliding with the image ids.

Upvotes: 1

Mathias M&#252;ller
Mathias M&#252;ller

Reputation: 22637

How do i assign a title and an alt from artTitle and also a class and id?

Building upon the answer given by @BrianOliver, this is how you output an img element whose "title" attribute reflects the content of artTitle from your input XML - the same for ID.

I assume that by "an alt from artTitle" you mean that the text content of img/@alt should also come from the artTitle element.

<xsl:template match="/">
  <xsl:for-each select="Collection/Content">
    <xsl:variable name="imageSrc" select="Html/root/NewsArticle/artThumb/img/@src" />
    <!--xsl:variable name="imageAlt" select="Html/root/NewsArticle/artThumb/img/@alt" /-->
    <xsl:variable name="imageId" select="ID"/>
    <xsl:variable name="imageTitle" select="Html/root/NewsArticle/artTitle"/>

    <img  id="{$imageId}" class="myCssClass" title="{$imageTitle}" alt="{ $imageTitle}" src="{$imageSrc}"/>
  </xsl:for-each>
</xsl:template>

However, I am not sure where the class attribute should come from.

Upvotes: 1

Related Questions