CODEWITHSUNDEEP
htmlxmlimagexslt
Kenneth951Lo
Kenneth951Lo

Reputation: 7

Getting img src from xslt value from child element in xml

I would like to retrieve the img source from XML using XSLT, however the element for image source is in children element, this has caused me for having trouble to retrieve the value. I tried with Attribute Template, however it still can't seem to work

//  XML
<recipeImgPath>
    <imgPath>images/upload/thumbnail_1488881669_mango-avocado-salsa-recipeThumb.png</imgPath>
    <imgPath>images/upload/slider_1488881669_mango-avocado-salsa-slider.png</imgPath>
    <imgPath>images/upload/featured_1488881669_mango-avocado-salsa-featuredRecipe.png</imgPath>
    <imgPath>images/upload/background_1488881669_mango-avocado-salsa-recipeBackground.png</imgPath>
</recipeImgPath>

and

//    part of my XSLT code which need to get the source of image
<a href="recipe-page-1.php">
<img src="{imgPath}" alt=""/>
<div class="hover-cover"></div>
<div class="hover-icon">View Recipe</div>
</a>

Upvotes: 0

Views: 758

Answers (2)

zx485
zx485

Reputation: 29042

Another simple approach for simply putting the imgPath element's text into the appropriate href attributes would be

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>

 <xsl:template match="recipeImgPath/imgPath">
   <a href="recipe-page-1.php">
     <img src="{text()}" alt=""/>
     <div class="hover-cover"></div>
     <div class="hover-icon">View Recipe</div>
   </a> 
 </xsl:template>

</xsl:stylesheet>

Add an identity template as desired (or as in the other answer) to replicate the other elements.

Upvotes: 0

Jarek
Jarek

Reputation: 61

I do not see your xslt but you can try following stylesheet:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
    <xsl:output method="xml" doctype-public="XSLT-compat" omit-xml-declaration="yes" encoding="UTF-8" indent="yes"/>
    <xsl:template match="/">
        <output>
            <xsl:apply-templates/>
        </output>
    </xsl:template>
    <xsl:template match="@*|node()">
        <xsl:copy>
            <xsl:apply-templates select="@*|node()"/>
        </xsl:copy>
    </xsl:template>
    <xsl:template match="imgPath">
        <a href="recipe-page-1.php">
            <img src="{.}" alt=""/>
            <div class="hover-cover"/>
            <div class="hover-icon">View Recipe</div>
        </a>
    </xsl:template>
</xsl:transform>

Which produce following output:

<output>
    <recipeImgPath>
        <a href="recipe-page-1.php">
            <img src="images/upload/thumbnail_1488881669_mango-avocado-salsa-recipeThumb.png" alt=""/>
            <div class="hover-cover"/>
            <div class="hover-icon">View Recipe</div>
        </a>
        <a href="recipe-page-1.php">
            <img src="images/upload/slider_1488881669_mango-avocado-salsa-slider.png" alt=""/>
            <div class="hover-cover"/>
            <div class="hover-icon">View Recipe</div>
        </a>
        <a href="recipe-page-1.php">
            <img src="images/upload/featured_1488881669_mango-avocado-salsa-featuredRecipe.png" alt=""/>
            <div class="hover-cover"/>
            <div class="hover-icon">View Recipe</div>
        </a>
        <a href="recipe-page-1.php">
            <img src="images/upload/background_1488881669_mango-avocado-salsa-recipeBackground.png" alt=""/>
            <div class="hover-cover"/>
            <div class="hover-icon">View Recipe</div>
        </a>
    </recipeImgPath>
</output>

Upvotes: 1

Related Questions