bootsrap carousel

Natasha 79 posts 195 karma points

Aug 03, 2015 @ 16:06

Hi There

I am trying to edit this partial view script written by someone else to include a link and some text. I don't have a clue where to begin. I would be grateful for any help. Also when I try and replicate the script in a test page I get the error 'no umbracoFile defined'

 @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@* Macro to display child pages below the root page of a standard website. Also highlights the current active page/section in the navigation with the css class "current". *@

@{ @*Get the root of the website *@ var root = CurrentPage.AncestorOrSelf(1); }

@if (Model.Content.HasValue("sliderimages")) { var imagesList = Model.Content.GetPropertyValue

<text>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
</text>

for (int i = 0; i < imagesCollection.Count<IPublishedContent>(); i++)
{
    string indicatoractive = "";
    if (i == 0)
    {
        indicatoractive = "active";
    }
    <li data-target="#myCarousel" data-slide-to="0" class='@indicatoractive'></li>
}


@:</ol>
@:<div class="carousel-inner">

int count = 0;
string activeclass = "";

foreach (var imageItem in imagesCollection)
{
    if (count == 0)
    {
        activeclass = "item active carousel_image";
        count++;
    }
    else
    {
        activeclass = "item carousel_image";
    }


    <div class='@activeclass'>
     <img src='@imageItem.Url' />
        </div>
}
@:</div>
@: <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
@: <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
@:</div><!-- /.carousel -->

}

Thanks in advance Natasha

Copy Link

Natasha 79 posts 195 karma points

Aug 10, 2015 @ 12:04

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,

Copy Link

James 251 posts 1169 karma points

Aug 10, 2015 @ 14:40

Is the property "Link" a standard text field?

Copy Link

Natasha 79 posts 195 karma points

Aug 10, 2015 @ 15:11

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

Copy Link

Arlan 58 posts 184 karma points

Aug 11, 2015 @ 01:34

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>

Copy Link

Arlan 58 posts 184 karma points

Aug 11, 2015 @ 01:45

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

enter image description here

Copy Link

Natasha 79 posts 195 karma points

Aug 25, 2015 @ 00:30

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.

Copy Link

is working on a reply...

Flag this post as spam?

bootsrap carousel