Copied to clipboard

Flag this post as spam?

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


  • Natasha 79 posts 195 karma points
    Dec 17, 2012 @ 12:38
    Natasha
    0

    Creating a new Macro

    Hi All

    I am trying to create a macro where the user will input the header background image, title, text an image and link it to some content.

    I have two problems, firstly I am not sure how to allow the user to choose the background image so I have left it out in the test and secondly when I test the macro it lets me fill in all the fields but then says error parsing xslt.  Can anyone help on either issue.  I am using version 4.11 and the box I am trying to create can be seen on the right hand column of http://upgrade.c4eo.org.uk/1065.aspx.

     

    My XSLT at the moment look 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"
        exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">


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

    <xsl:include href="MediaImage.xslt"/>
      <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="link" 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:if test="$image > 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 != ''">
      <xsl:variable name="pickedPage" select="umbraco.library:GetXmlNodeById($currentPage/linkItem)"/>
        <a href="{umbraco.library:NiceUrl($pickedPage/@id)}">
          <xsl:value-of select="linkText"/>
        </a>
    </xsl:if>

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

    Thanks in advance

  • Stephen Davidson 216 posts 392 karma points
    Dec 19, 2012 @ 11:06
    Stephen Davidson
    0

    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

  • Natasha 79 posts 195 karma points
    Jan 11, 2013 @ 16:34
    Natasha
    0

    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

  • Charles Afford 1163 posts 1709 karma points
    Jan 12, 2013 @ 22:25
    Charles Afford
    0

    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'.  

  • Charles Afford 1163 posts 1709 karma points
    Jan 12, 2013 @ 22:34
    Charles Afford
    0

    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 &gt;

     

  • Natasha 79 posts 195 karma points
    Jan 15, 2013 @ 18:00
    Natasha
    0

    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

  • Charles Afford 1163 posts 1709 karma points
    Jan 16, 2013 @ 10:00
    Charles Afford
    0

    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" ?

  • Natasha 79 posts 195 karma points
    Jan 16, 2013 @ 14:45
    Natasha
    0

    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

  • Charles Afford 1163 posts 1709 karma points
    Jan 16, 2013 @ 15:17
    Charles Afford
    0

    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>

  • Natasha 79 posts 195 karma points
    Jan 16, 2013 @ 15:35
    Natasha
    0

    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.

  • Charles Afford 1163 posts 1709 karma points
    Jan 16, 2013 @ 21:39
    Charles Afford
    0

     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"/>

     

  • Charles Afford 1163 posts 1709 karma points
    Jan 16, 2013 @ 21:49
    Charles Afford
    0
  • Natasha 79 posts 195 karma points
    Feb 21, 2013 @ 17:53
    Natasha
    0

    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

  • Natasha 79 posts 195 karma points
    Feb 22, 2013 @ 13:29
    Natasha
    0

    Seems to have fixed itself over night.

Please Sign in or register to post replies

Write your reply to:

Draft