Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

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


  • Maarten Boer 61 posts 82 karma points
    May 01, 2010 @ 14:29
    Maarten Boer
    0

    create a div with a backgroud-image style with inline xslt

    Hi,

    XSLT, learning and learning.

    Have the following issue

    I'm trying to create something like this:   

    <div id="pagetotal" style="background-image:url(media/1232/bg1.jpg)">

    As u can see this is an image from my media. (The field BackImage is a media picker value) 

    So i created something like this:

    <umbraco:Item runat="server" field="BackImage" xslt="concat('&lt;div id=&quot;pagetotal&quot; style=&qout;background-image:url(umbraco.library:GetMedia({0}, true())/data[@alias='umbracoFile'])&quot; &gt;)" xsltDisableEscaping="true"/>

    This line doesn't even show in the preview..

     

    Any help is welcome


     

     

    Copy Link
  • Maarten Boer 61 posts 82 karma points
    May 01, 2010 @ 18:13
    Maarten Boer
    0

    After some experimenting this is what i created now:

    <div id="pagetotal" style="background-image:url(=<umbraco:Item runat="server" field="BackImage" xslt="umbraco.library:GetMedia({0},'true')/data[@alias='umbracoFile']" />)">

    And the result is: <div id="pagetotal" style="background-image:url(=/media/1232/bg1.jpg)">


    almost correct except for the '='

    So after removing de '='  i get something like this as result:

    <div id="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_pagetotal" style="&quot;background-image:url(&lt;umbraco:Item" field="BackImage" xslt="umbraco.library:GetMedia({0},'true')/data[@alias='umbracoFile']"></div>)">

     

    HELP.....

     

    Copy Link
  • Donald St. Martin 83 posts 128 karma points
    May 01, 2010 @ 18:48
    Donald St. Martin
    0

    Maarten,

    May I ask why you chose to use the Media section to hold your image and inline CSS to display the background image?

    My recommendation is to store the image "bg1.jpg" in the "images" folder on your server resulting in fewer calls to the database to display the image. Then, I would move the style attribute to a CSS file and control the styles of that div from there keeping your styles in a central place.  It is part of the best practices in Umbraco to go this route. All of this is on the assumption you are not going to be changing the background image often if ever.

    Copy Link
  • Maarten Boer 61 posts 82 karma points
    May 02, 2010 @ 00:05
    Maarten Boer
    0

    Hi Donald,

    Normally i couldn't agree more with you. But my client has request this.

    I already had to overcome a lot of trouble with uploading images and cropping the just for this.

    Untill now i have only found 1 option where you have to include <div id="pagetotal"....     into the xslt part of the umbraco item. Not very nice but it should work. 

    But since i'm fairly new to xslt, i haven't succeeded yet.

    Copy Link
  • Yannick Smits 321 posts 718 karma points
    May 02, 2010 @ 00:21
    Yannick Smits
    0

    Looks like your div is picking up the runat=server part of the umbraco:item. Maybe you can play around a bit with spacing (replace = by a space) or by using single quotes on either the umbraco-item or the style attribute.

    Otherwise you could always create an XSLT file which builds the div and insert it using a macro.

    Copy Link
  • Donald St. Martin 83 posts 128 karma points
    May 02, 2010 @ 04:42
    Donald St. Martin
    0

    Maybe try replacing the double quotes with single quotes in the umbraco:item part.  For example:

    <div id="pagetotal" style="background-image:url(<umbraco:Item runat='server' field='BackImage' xslt='umbraco.library:GetMedia({0},'true')/data[@alias='umbracoFile']' />)">

    If that doesn't work, I would go with the route Yannick suggested and create a new XSLT file to put the div together and attach it to a macro.  Then, you can try enabling caching on the macro to prevent it from calling the database on every page load.

    --
    Donald

    Copy Link
  • Paul Blair 466 posts 731 karma points
    May 02, 2010 @ 05:23
    Paul Blair
    1

    Hi,

    I have just implemented the same thing for a customer. I put my code into a macro though. Here is the XSLT:

      <div id="homeImage">
        <xsl:attribute name="style">background-image:url(<xsl:value-of select="umbraco.library:GetMedia($currentPage/data[@alias='homeImage'],'false')/data[@alias='umbracoFile']"/>)</xsl:attribute>
        &nbsp;
      </div>
    Copy Link
  • Dwayne A 97 posts 117 karma points
    Sep 26, 2011 @ 15:06
    Dwayne A
    0

    Nice. I needed the same sort of solution. I'm updating my own version, as the XSL syntax posted by @Paul Blair is not compatible with the 4.7 Umbraco I'm running.

    <xsl:if test="string($mediaIDA) != ''">
       <xsl:attribute name="style">background-image:url(<xsl:value-of select="umbraco.library:GetMedia($currentPage/ancestor-or-self::*/spot01Image, false)/umbracoFile"/>)</xsl:attribute>
    </xsl:if> 
    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft