Hi there, 

I guess you could let them upload a background image and then insert it using inline css on the div...or it is possible with some nifty CSS to insert the image and position it and the text over the image. I've done something simalr here...

http://www.campbellnash.com/

The main carousel background image, text, sub text and link are all editbale by the user. However my method used doctypes rather than letting the user enter details via a macro, have you throught about doing that way?

I would have a look at the excellent standard website package

http://our.umbraco.org/projects/starter-kits/standard-website

It has good examples of how to let users manage panels within a page.

If you would prefer to keep with you method the XSLT looks ok to me and the page is rendering fine or is that a mock up? What line number is throwing the error?

S

Thanks Stephen - sorry for the delayed reply long Christmas break.  The page is showing html that works.  I will try doing it your way and let you know how I get on

Hi,  i think the eaisest way to do this would be to define a css class and then use some jquery to add a background-image: url(""); and insert the image path you get from getMedia() into it.  In respect of the carousel, i did the same thing with a document types.  I allowed the node(page) that was going to render the carousel to have document types of 'carousel' underneath it. This document type simply consisted of an media picker and some text fields.  In the xslt i then simply checked and rendered any direct descendant of type 'carousel'.  

I think you will have an error by the way in the xslt above because you have used a '>' symbol.  You need to use the >

Hey all

Thanks for your replies - got most of the elements working except for the image could anyone suggest what's wrong with my xslt below

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

  <xsl:variable name="title" select="/macro/title" />
  <xsl:variable name="text" select="/macro/text" />
  <xsl:variable name="image" select="/macro/image" />
  <xsl:variable name="linkItem" select="/macro/linkItem" />
  <xsl:variable name="linkText" select="/macro/linkText" />
 
  
  <xsl:template match="/">
      <div class="panelColumn">
  <div class="panelContent">
     <div class="contentHeader">
      <xsl:if test="$title != ''">
              <xsl:value-of select="$title"/>
          </xsl:if>
      </div>
   
          <xsl:if test="$text != ''">
            <p>
              <xsl:value-of select="$text"/>
            </p>
          </xsl:if>
        <xsl:variable name="image" select="data [@alias = 'image']"></xsl:variable>


      <xsl:if test="$image &gt; 0">

        <xsl:variable name="mediaNode" select="umbraco.library:GetMedia($image, 0)" />

        <xsl:if test="$mediaNode/umbracoFile">

            <img src="{$mediaNode/umbracoFile}" />

        </xsl:if>

    </xsl:if>
      <xsl:if test="$linkItem != ''">
 
    <a href="{umbraco.library:NiceUrl($linkItem)}">
      <xsl:value-of select="$linkText"/>
    </a>
</xsl:if>

          </div>
      </div>
 
  </xsl:template>
</xsl:stylesheet>

Thanks again

Do a

<textarea>

<xsl:copy-of select=$currentPage></xsl:copy>

</textarea>

Have a look in the xml and see if you having anything in there for your image.

Why are you using:  select="/macro/linkItem" ?

HI Charles

The link item is so that the user can use the media picker to link the item internally.  I am not sure what you mean by

<textarea>

<xsl:copy-of select=$currentPage></xsl:copy>

</textarea>

do I put my code in between and where do I do this.  Sorry about all the silly questions I'm pretty new to XSLT and programming.

Thanks again

Hi Natasha,

No problem i would put it as i have below.  Put it in your xslt.  

What it will show you is what information is contained with it for instance $title and $image.  Have a look and let us know the results.   Will be able to post a bit more later but got to go.  See below :)

  <div class="contentHeader"> 
      <xsl:if test="$title != ''">
              <xsl:value-of select="$title"/>
          </xsl:if>
      </div>

    <textarea>

<xsl:copy-of select=$currentPage></xsl:copy>

</textarea>

          <xsl:if test="$text != ''">
            <p>
              <xsl:value-of select="$text"/>
            </p>
          </xsl:if>
        <xsl:variable name="image" select="data [@alias = 'image']"></xsl:variable>

Hi Charles

I worked it out.... this is what it returned:

<a href="/case-study.aspx">Link to case study</a></div></div></div>
</div>
</div>
<div class="panelColumn">
  <div class="panelContent">
    <div class="contentHeaderRed">Our research library</div>
    <div class="contentBase">
      <p>All C4EO research, presentations,
        toolkits and more</p>
      <p><img src="images/img-research.jpg" width="220" height="71" /></p>
      <p>BROWSE CATEGORIES</p>
    </div>
  </div>
  <div class="panelContent">
<div class="contentHeaderBlue">Who we work with</div>
<div class="contentBase"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus lacinia commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus lacinia commodo. </p>
<p><img src="images/img-who.jpg" width="220" height="99" /></p>
<p>READ MORE</p>
</div>
</div>


<div class="panelContent">
<div class="contentHeaderContact">Contact Us</div>
<div class="contentBaseContact"><p><strong>t.</strong> 020 7843 6358 <br />
<strong>e.</strong> [email protected] </p>
</div>
</div>

</div>

</div>

<div class="clear"></div>
</div>
</div>
   

   

    <!-- Insert default "news-content" markup here -->




    <div id="wrapSEO">
<div class="Container">
<div id="seoNews">
    <h2>Latest News</h2>   
<ul><li class="seoNews"><h3>Child Poverty
    | 11.12.12</h3><p><em>Improving children’s outcomes - New services offer from C4EO
C4EO want to support Local Authorities understand the complexities of child poverty, its costs and how to improve the outcomes for children and families. Click title to download document.</em></p><a href="/news/child-poverty.aspx">Read More></a></li><li class="seoNews"><h3>New opportunities
    | 03.12.12</h3><p><em>This short paper highlights the new responsibilities and legal duties being placed upon local authorities and their statutory health partners in relation to the health and wellbeing of their populations. Click title to download document</em></p><a href="/news/new-opportunities.aspx">Read More></a></li></ul>
</div>

<div id="seoPractice">
<h2>Latest Best Practice</h2>
<ul><li class="seoNews"><h3>Playing Up</h3><p><em>Playing Up is a six week community interactive programme to help adults manage the behaviour of their babies and young children. The programme aims to help parents and practitioners find their own values and solutions so that they feel confident and able to cope and enjoy being a parent all the time.</em></p><a href="/best-practice/playing-up.aspx">Read More></a></li><li class="seoNews"><h3>Luton STEPP</h3><p><em>The aim of this partnership project is to develop a whole system parent education programme underpinned with a staff training/education and audit model.</em></p><a href="/best-practice/luton-stepp.aspx">Read More></a></li></ul>
    </div>
<div class="clear"></div>
</div>
</div>



<div id="wrapFooter">
<div class="Container">
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</div>
</div>

<div id="wrapCopyright">
<div class="Container">Copyright © C4EO, 2012. All Rights Reserved</div>
</div>

</div>


</body>
</html>

not sure I've done it right though.

 Hello.  Add the <xsl:param name="currentPage"/> where i have put it at the bottom of this post.  You will then be able to able all of the properties on the current page you are in using <xsl:value-of select=$currentPage/yourpropertyname></xsl:value-of>

You will also be able to use the   

 <textarea>

<xsl:copy-of select=$currentPage></xsl:copy>

</textarea>

You will notice when you have got it working as you will see all of the property values you have and all of thier values :).

Hope this makes sense :)

<xsl:outputmethod="xml"omit-xml-declaration="yes"/><xsl:param name="currentPage"/>.

<xsl:includehref="MediaImage.xslt"/>
  <xsl:variablename="title"select="/macro/title"/>

Hi All

Thanks for all your replies.  I have mananged to get this working with the following xslt:

<xsl:variable name="title" select="/macro/title" />
  <xsl:variable name="text" select="/macro/text" />
        <xsl:variable name="image" select="/macro/image/Image" />
  <xsl:variable name="linkItem" select="/macro/linkItem" />
        <xsl:variable name="url" select="/macro/url" />
  <xsl:variable name="linkText" select="/macro/linkText" />
        <xsl:variable name="header" select="/macro/header/Image" />
        <xsl:variable name="urlText" select="/macro/urlText" />
 
  
  <xsl:template match="/">
       <div class="panelContent">
     <div class="contentHeader">
         <xsl:if test="$header  != ''">       
            <img src="{$header/umbracoFile}"/>     
        </xsl:if>
      <xsl:if test="$title != ''">
          <h2><xsl:value-of select="$title"/></h2>
          </xsl:if>
      </div>
    <div class="contentBase">
          <xsl:if test="$text != ''">
            <p>
              <xsl:value-of select="$text"/>
            </p>
          </xsl:if>
   
       
        <xsl:if test="$image  != ''">       
            <p><img src="{$image/umbracoFile}"/></p>     
        </xsl:if>
       
       
     
              
          <xsl:choose>
    <xsl:when test="$linkItem != ''">
       <a href="{umbraco.library:NiceUrl($linkItem)}">
      <xsl:value-of select="$linkText"/>
    </a>
    </xsl:when>
    <xsl:when test="$url != ''">
      <a href="{$url}">
 <xsl:value-of select="$urlText"/>
</a> 
    </xsl:when>
   
  </xsl:choose>

        </div>     
       
          </div>
     
 
  </xsl:template>
</xsl:stylesheet>

But the problem I have now is that the links are showing up in white no matter how I change the css.  My current css is:

.contentBase a:link, a:active, a:visited{color:#000; text-transform: uppercase;}

It was working before I added the choose conditions but now the link are there and you can click on them but you just can't see them.  Any help would be appreciated.

Thanks

Seems to have fixed itself over night.

is working on a reply...