Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Abdulmenaf 2 posts 22 karma points
    Oct 25, 2014 @ 14:59
    Abdulmenaf
    0

    Using xslt for Image in css

    Hi, i have an image in css like background-image:url("..//safakjfa.jpg"). I want to add image with xslt. I searched a lot in internet,i found something but they didn't work. I added this image in html code like <img src="asfas.jpg" but template is break or i added image <img style="background-image:url("..//sdlkalkf.jpg")" but this didn't work also. How do you help me about this topic?

  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Oct 25, 2014 @ 15:46
    Dennis Aaen
    0

    Hi Abdulmenaf and welcome to our.

    One way that you could do it is by this:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
    <xsl:stylesheet
        version="1.0"
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        xmlns:msxml="urn:schemas-microsoft-com:xslt"
        xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:Examine="urn:Examine" xmlns:google.maps="urn:google.maps"
        exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets Examine google.maps ">

    <xsl:output method="xml" omit-xml-declaration="yes"/>

    <xsl:param name="currentPage"/>

    <xsl:template match="/">

    <!-- start writing XSLT -->
       
            <xsl:if test="$currentPage/backgroundImage!=''">
            <div id="homeImage">
                <xsl:attribute name="style">
                    background-image:url("<xsl:value-of select='umbraco.library:GetMedia($currentPage/backgroundImage,0)/umbracoFile '/>");
                </xsl:attribute>
                
            </div>
        </xsl:if>

    </xsl:template>

    </xsl:stylesheet>

    Then the home Image div will get a background image, In XSLT you can´t have an empty div, so if you don´t need to have a text in there you need to use e.g a non-breaking-space so the div tag is not empty.

    Another way that you could do it is by doing something like this.

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
    <xsl:stylesheet
        version="1.0"
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        xmlns:msxml="urn:schemas-microsoft-com:xslt"
        xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:Examine="urn:Examine" xmlns:google.maps="urn:google.maps"
        exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets Examine google.maps ">


    <xsl:output method="xml" omit-xml-declaration="yes"/>

    <xsl:param name="currentPage"/>

    <xsl:template match="/">

    <!-- start writing XSLT -->
        
            <xsl:if test="$currentPage/backgroundImage !=''">
                <style>
                    #homeImage{
                        background-image:url("<xsl:value-of select='umbraco.library:GetMedia($currentPage/backgroundImage,0)/umbracoFile '/>");
                    }
                </style>
       
                <div id="homeImage"> </div>
            </xsl:if>

    </xsl:template>

    </xsl:stylesheet>

    Since you are new to Umbraco I would like to include some documentation on what CurrentPage is http://our.umbraco.org/wiki/reference/xslt/understanding-currentpage

    In my exmple I have a field on the documenttype with an alias of backgroundImage.

    Hope this helps,

    /Dennis

  • Abdulmenaf 2 posts 22 karma points
    Oct 25, 2014 @ 16:43
    Abdulmenaf
    0

    Finally it's done. Thank you so much. Both work.

Please Sign in or register to post replies

Write your reply to:

Draft