Okay so I've been able to add text and a link as follows, but can anyone tell me what's wrong with my link statement as it returns the following link

www.mysite.com/%7B%20%20"id":%200,%20%20"name":%20"",%20%20"url":%20"/about-leap/volunteer-with-us/",%20%20"target":%20"_self"%7D

here's the code: @if(@imageItem.GetPropertyValue("text")!=null){

@imageItem.GetPropertyValue("text")

    @if(@imageItem.GetPropertyValue("link")!=null){<a href="@imageItem.GetPropertyValue("link")" style="color:#000;border-radius: 4px; padding:5px;background: rgb(255, 191, 0);float:left;">Find out more</a>}     

any help at all received gratefully Best wishes,

Is the property "Link" a standard text field?

Hi James, No, I uploaded Gibe.LinkPicker and called the data type link picker, all the documentation refers to a link on the page or node I can't find the sytax for the property on the media item.

Thanks in advance Natasha

i have created this bootstrap xslt sometime ago, i know its not razor maybe it can give you some idea

<?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:tagsLib="urn:tagsLib" xmlns:BlogLibrary="urn:BlogLibrary"
  exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets tagsLib BlogLibrary ">
<xsl:output method="xml" omit-xml-declaration="yes"/> 
<xsl:param name="currentPage"/>
<xsl:template match="/">

    <!-- start writing XSLT -->
    <xsl:variable name="sliderNode" select="$currentPage/child::*"/>
        <xsl:text disable-output-escaping="yes">
        <![CDATA[
        <!--.carousel-->
        <section class="carousel">        
            <div class="row">
                <div id="carousel" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">]]></xsl:text>
                        <xsl:for-each select="$sliderNode/DIImageSlider">
                            <xsl:sort select="@sortOrder" order="ascending" />
                            <li data-target="#carousel" data-slide-to="{position()-1}">

                                <!-- apply active class to first item -->
                                <xsl:if test="position()=1">
                                    <xsl:attribute name="class">
                                        <xsl:text>active</xsl:text>
                                    </xsl:attribute> 
                                </xsl:if>
                            </li>
                      </xsl:for-each> 
                      <xsl:text disable-output-escaping="yes"><![CDATA[
                  </ol>
                 <!-- Wrapper for slides -->
             <div class="carousel-inner">]]></xsl:text>
                <xsl:for-each select="$sliderNode/DIImageSlider">
                    <xsl:sort select="@sortOrder" order="ascending" />
                        <div class="item"> 

                            <!-- apply item and active classes to first item -->                                            
                            <xsl:if test="position()=1">
                            <xsl:attribute name="class">
                                <xsl:text>item active</xsl:text>
                            </xsl:attribute> 
                            </xsl:if>

                            <img src="{umbracoFile}" alt='{@nodeName}'  />
                            <div class="carousel-caption">                              
                                <h2><xsl:value-of select="slideTitle" disable-output-escaping="yes"/></h2>
                                <xsl:value-of select="bodyText" disable-output-escaping="yes"/>
                            </div>                                             
                        </div> 
                 </xsl:for-each>     
                 <xsl:text disable-output-escaping="yes"><![CDATA[
             </div>
             <!-- Controls -->
             <a class="left carousel-control" href="#carousel" data-slide="prev">
                <span class="slider-primary slider-prev"></span>
              </a>
              <a class="right carousel-control" href="#carousel" data-slide="next">
                <span class="slider-primary slider-next"></span>
              </a>
          </div>
      </div>
  </section>
<!-- /.carousel --> ]]></xsl:text>
</xsl:template>
</xsl:stylesheet>

this is not bootstrap but slick carousel (http://kenwheeler.github.io/slick/), maybe can give you idea,

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{  
    var carouselPrimarySlides = CurrentPage.AncestorOrSelf(1).Descendants("CarouselHome");
}
         <div class="carousel-slick-primary-container"> 
             <div class="carousel-slick-primary">
             @if (carouselPrimarySlides.Any())
             {
                 foreach (var carouselSlide in carouselPrimarySlides.First().Children)
                 {



                 <div class="slide">

                     @if(carouselSlide.HasValue("linkSlide"))
                     {
                     <a href="@Umbraco.NiceUrl(carouselSlide.linkSlide)">
                     <span class="filter-overlay pattern-dots-square"></span>    
                     <img src="@carouselSlide.Image" alt="@carouselSlide.Name" />

                         @if((@carouselSlide.HasValue("bodyTextPositionHorizontal"))&&(@carouselSlide.HasValue("bodyTextPositionVertical")))
                         {
                         <div class="slide-caption" style="left:@Html.Raw(@carouselSlide.bodyTextPositionHorizontal);top:@Html.Raw(@carouselSlide.bodyTextPositionVertical);">@carouselSlide.BodyText</div>
                         }else if((@carouselSlide.HasValue("bodyTextPositionHorizontal"))&&!(@carouselSlide.HasValue("bodyTextPositionVertical")))
                         {
                         <div class="slide-caption" style="left:@Html.Raw(@carouselSlide.bodyTextPositionHorizontal);">@carouselSlide.BodyText</div>
                         }else if(!(@carouselSlide.HasValue("bodyTextPositionHorizontal"))&&(@carouselSlide.HasValue("bodyTextPositionVertical")))
                         {
                         <div class="slide-caption" style="top:@Html.Raw(@carouselSlide.bodyTextPositionVertical);">@carouselSlide.BodyText</div>
                         }else
                         {   
                         <div class="slide-caption">@carouselSlide.BodyText</div>    
                         }      

                     </a>    
                     }else{
                        <span class="filter-overlay pattern-dots-square"></span>     
                        <img src="@carouselSlide.Image" alt="@carouselSlide.Name" />
                         if((@carouselSlide.HasValue("bodyTextPositionHorizontal"))&&(@carouselSlide.HasValue("bodyTextPositionVertical")))
                         {
                         <div class="slide-caption" style="left:@Html.Raw(@carouselSlide.bodyTextPositionHorizontal);top:@Html.Raw(@carouselSlide.bodyTextPositionVertical);">@carouselSlide.BodyText</div>
                         }else if((@carouselSlide.HasValue("bodyTextPositionHorizontal"))&&!(@carouselSlide.HasValue("bodyTextPositionVertical")))
                         {
                         <div class="slide-caption" style="left:@Html.Raw(@carouselSlide.bodyTextPositionHorizontal);">@carouselSlide.BodyText</div>
                         }else if(!(@carouselSlide.HasValue("bodyTextPositionHorizontal"))&&(@carouselSlide.HasValue("bodyTextPositionVertical")))
                         {
                         <div class="slide-caption" style="top:@Html.Raw(@carouselSlide.bodyTextPositionVertical);">@carouselSlide.BodyText</div>
                         }else
                         {   
                         <div class="slide-caption">@carouselSlide.BodyText</div>    
                         }  
                     }

                 </div>


                 }
             }
             </div>
         </div>

slide-caption is where the RTE content is displayed, the @if(carouselSlide.HasValue("linkSlide")) just check if there is link, if there is link whole image then is link, bodyTextPositionHorizontal and bodyTextPositionVertical is the ability to specify the x and y coordinates of the RTE content on top of image

here is the DocumentType

Thanks for your help guys. trying to implement the same code in umbraco 7.2.4 but keep getting an error - Cannot resolve a Url for a media item when there is no 'umbracoFile' property defined. has the syntax changed between versions? New to bootstrap and MVC hence all the questions. Thanks again.

is working on a reply...