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 4457 posts 17970 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.

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies