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


  • Dustin 15 posts 105 karma points
    Dec 07, 2015 @ 14:00
    Dustin
    0

    Will a partial view macro to make news carousel?

    Using Umbraco 7
    Umbraco 7

    First I would like to say that I am very new to umbraco. I am trying to make a news carousel using the template here. http://sevenx.de/demo/bootstrap-carousel/inc.carousel/news-carousel.html

    I have my doctype setup with all the required fields. I am thinking now that I need to use either a partial or a partial view macro to accomplish this, although I am still confused at the difference.

    My main problem is that I am confused on how to access the properties of my doctype within the partial.

    This is what I have came up with so far and it is not working. 

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            foreach (var child in page.Children.OrderBy("date desc").Take(5)) 
            {

            <div class="item active">
                <img src="@child.newsPicture">
                <div class="carousel-caption">
                    <h4><a href="#">@child.newsHeading</a></h4>
                    <p>@child.newsContent</a></p>
                </div>
            </div><!-- End Item -->

            }



        </div><!-- End Carousel Inner -->

        foreach (var child in page.Children.OrderBy("date desc").Take(5))
        {

        <ul class="list-group col-sm-4">
            <li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><h4>@child.newsContent</h4></li>

        </ul>
        }

        <!-- Controls -->
        <div class="carousel-controls">
            <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>

    </div><!-- End Carousel -->
</div>

}

    I think this is because it is trying to access the current page info which is technically the home page and not the newsitem doctype. How do I go about getting this working?

    Copy Link
  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Dec 07, 2015 @ 14:08
    Dennis Aaen
    0

    Hi Dustin and welcome to our :-)

    If you can post a screenshot of your content tree, and explain on which page in your content tree that you are trying to output the data.

    Then I am sure someone can help you getting this working.

    /Dennis

    Copy Link
  • Dustin 15 posts 105 karma points
    Dec 07, 2015 @ 14:15
    Dustin
    0

    enter image description here

    I think this is what you mean. I am trying to render a partial on the home page. I just want to loop through the first 5 newest news items in company news.

    Copy Link
  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Dec 07, 2015 @ 17:38
    Dennis Aaen
    0

    Hi Dustin,

    Try the code below, and remember to change the "News" in this line of code.

    @{
    var page = CurrentPage.AncestorOrSelf(1).Descendants("News").FirstOrDefault();
}

    So it match your document type alias for the page type of company news

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
    var page = CurrentPage.AncestorOrSelf(1).Descendants("News").FirstOrDefault();
}

<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            foreach (var child in page.Children.OrderBy("date desc").Take(5)) 
            {

            <div class="item active">
                <img src="@child.newsPicture">
                <div class="carousel-caption">
                    <h4><a href="#">@child.newsHeading</a></h4>
                    <p>@child.newsContent</a></p>
                </div>
            </div><!-- End Item -->

            }



        </div><!-- End Carousel Inner -->

        foreach (var child in page.Children.OrderBy("date desc").Take(5))
        {

        <ul class="list-group col-sm-4">
            <li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><h4>@child.newsContent</h4></li>

        </ul>
        }

        <!-- Controls -->
        <div class="carousel-controls">
            <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>

    </div><!-- End Carousel -->
</div>

}

    Hope this helps,

    /Dennis

    Copy Link
  • Dustin 15 posts 105 karma points
    Dec 07, 2015 @ 20:56
    Dustin
    0

    I have been trying to figure this out all day. I have got this far and this is somewhat working. I put another if statement inside the foreach and now I am having a different problem. The counter increaments each time it loops. I am just trying to detect 1 and if it is one then it changes the div class.

    I keep getting the following error. enter image description here

        @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
    var page = CurrentPage.AncestorOrSelf(1).Descendants("News").FirstOrDefault();
    int num = 1;
}

<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

      <!-- Wrapper for slides -->
    <div class="carousel-inner">
            @foreach (var child in page.Children) 
            {

                @if(num == 1)
                {
                    <div class="item active">
                        }else{
                    <div class="item">
                        }

                    }
                <img src="https://placeholdit.imgix.net/~text?txtsize=71&bg=999999&txtclr=cccccc&txt=760%C3%97400&w=760&h=400">
                <div class="carousel-caption">
                    <h4><a href="#">@child.newsHeading</a></h4>
                   @child.newsContent
                </div>
           @num++

                }
</div>


    <ul class="list-group col-sm-4">
      <li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><h4>Lorem ipsum dolor sit amet consetetur sadipscing</h4></li>
      <li data-target="#myCarousel" data-slide-to="1" class="list-group-item"><h4>consetetur sadipscing elitr, sed diam nonumy eirmod</h4></li>
      <li data-target="#myCarousel" data-slide-to="2" class="list-group-item"><h4>tempor invidunt ut labore et dolore</h4></li>
      <li data-target="#myCarousel" data-slide-to="3" class="list-group-item"><h4>magna aliquyam erat, sed diam voluptua</h4></li>

    </ul>

      <!-- Controls -->
      <div class="carousel-controls">
          <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>

    </div><!-- End Carousel -->
</div>
    Copy Link
  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Dec 07, 2015 @ 22:01
    Dennis Aaen
    100

    Hi Dustin,

    I have another look at your code, and I think that I have fixed the small issues that you have.

    Again, remember to change this line 

       @{
        var page = CurrentPage.AncestorOrSelf(1).Descendants("umbTextPage").FirstOrDefault();
    }

    So it match your document type alias for the page type of company news. You can find alias for the document type here. As you can see in my code I am using the umbTextPage you should use the alias for the company news page.

    enter image description here

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
    var page = CurrentPage.AncestorOrSelf(1).Descendants("umbTextPage").FirstOrDefault();
}

<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
         @foreach (var child in page.Children.OrderBy("date desc").Take(5)){
                <div class="item active">
                    <div class="carousel-caption">
                        <h4><a href="#">@child.newsHeading</a></h4>
                        <p>@child.newsContent</p>
                    </div>
                </div>

         }
        </div>
         @foreach (var child in page.Children.OrderBy("date desc").Take(5)){
            <ul class="list-group col-sm-4">
                <li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><h4>@child.newsContent</h4></li>

            </ul>
         }

ยจ       <!-- Controls -->
        <div class="carousel-controls">
            <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>
    </div>
</div>

    Hope this helps,

    /Dennis

    Copy Link
  • Dustin 15 posts 105 karma points
    Dec 08, 2015 @ 00:49
    Dustin
    0

    Thank you for all your help!

    I was able to get it working with your help with the following code. I have been searching all over but can not figure out how to get the url of an image from my doctype news. My alias for the image in the doctype is newsPicture.

    I have a media picker with an image selected. The image will go where <img src="http://placehold.it/760x400/dddddd/333333"> currently is. Would someone mind pointing me into the right direction?

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
    var page = CurrentPage.AncestorOrSelf(1).Descendants("News").FirstOrDefault();

    int num = 0;
    int num2 = 0;
}

<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            @foreach (var child in page.Children.OrderBy("id desc").Take(5))
            {
                if(num==0)
                {
                    @:<div class="item active">
                        }else{
                    @:<div class="item">
                }
                @:<img src="http://placehold.it/760x400/dddddd/333333">
                @:<div class="carousel-caption">
                    @:<h4><a href="#">@child.newsHeading</a></h4>
                    @:<p>@child.newsContent</a></p>
                @:</div>
            @:</div><!-- End Item -->
            num++;
            }
        </div><!-- End Carousel Inner -->
<ul class="list-group col-sm-4">
        @foreach (var child in page.Children.OrderBy("id desc").Take(5))
        {
            <li data-target="#myCarousel" data-slide-to="@num2" class="list-group-item active"><h4>@child.newsHeading</h4></li>
            num2++;
        }
</ul>
        <!-- Controls -->
        <div class="carousel-controls">
            <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>

    </div><!-- End Carousel -->
</div>

}
    Copy Link
  • Dustin 15 posts 105 karma points
    Dec 08, 2015 @ 03:25
    Dustin
    0

    Thanks for all your help. I was able to get this working with the following code!!

     @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

    @{
        var page = CurrentPage.AncestorOrSelf(1).Descendants("News").FirstOrDefault();

        int num = 0;
        int num2 = 0;
    }

    <div class="container">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                @foreach (var child in page.Children.OrderBy("id desc").Take(5))
                {
                    if(num==0)
                    {
                        @:<div class="item active">
                            }else{
                        @:<div class="item">
                    }

                    if(child.HasValue("newsPicture"))
                    {                                         

                        <img src="@Umbraco.Media(child.newsPicture).Url" class="img-responsive">

                    }     

                    @:<div class="carousel-caption">
                        @:<h4><a href="#">@child.newsHeading</a></h4>
                        @:<p>@child.newsContent</a></p>
                    @:</div>
                @:</div><!-- End Item -->
                num++;
                }
            </div><!-- End Carousel Inner -->
    <ul class="list-group col-sm-4">
            @foreach (var child in page.Children.OrderBy("id desc").Take(5))
            {
                <li data-target="#myCarousel" data-slide-to="@num2" class="list-group-item active"><h4>@child.newsHeading</h4></li>
                num2++;
            }
    </ul>
            <!-- Controls -->
            <div class="carousel-controls">
                <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>

        </div><!-- End Carousel -->
    </div>

    }
    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft