umbraco razor dynamic divs with a large div and smaller ones around it

DonZalmrol 220 posts 833 karma points

Dec 21, 2016 @ 15:54

Hi all,

I'm trying to create a dynamic template that automatically adds divs when more items are added to the page.

I would like to create a col-lg-8 on the left and the around it and below it col-lg-4's.

The first div (col-lg-8) needs to show the latest item, then others needs to descend to the first item ever created. So it's with a sorting on the page id. That's not that hard to do.

But how can I code it in such a way that the first item is shown in the col-lg-8 and the others in the col-lg-4's?

Thanks in advance!

As an example see the static version with holders. enter image description here

Copy Link

Søren Kottal 712 posts 4570 karma points MVP 6x c-trib

Dec 21, 2016 @ 21:05

Why not just with css?

.item {
  width:33%;
}
.item:first-child {
  width:66%;
}

Copy Link

Dennis Adolfi 1082 posts 6449 karma points MVP 6x c-trib

Dec 22, 2016 @ 08:04

Hi Laurens.

What you could do is to check in a foreach loop where you iterate and render your divs, if the element you're about to render is the first item in that list. See example:

@{
    List<IPublishedContent> elements = Model.Children.ToList(); // This would in your case be replaced for your list of elements.
}

@foreach (var element in elements)
{
    var className = elements.IndexOf(element) == 0 ? "col-lg-8" : "col-lg-4";

    <div class="@className">
        @element.Name
    </div>
}

Best of luck!

Copy Link

DonZalmrol 220 posts 833 karma points

Dec 22, 2016 @ 08:49

Hi Soren,

If I would use CSS and I wish to change it then I have to dig in my css each time. With code I would only need to open the partial view that runs that part of the code.

Hi Dennis,

Perfect. Found my own way of doing it as well this morning. Yours I can use for a different part of the site :)

My version works as follows:

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
    var selection = CurrentPage.Site().FirstChild("careersMainPage").FirstChild("careerTestimonialPage").Children("careerTestimonialItem").OrderBy("Id desc");

    var counter = 0;
    var totalItems = 0;
}


<div class="container-fluid">

    @foreach(var count in selection.Take(1))
    {
        <div class="row">

            @foreach(var item in selection)
            {
                counter++;

                totalItems += counter;          

                if(@counter == @totalItems)
                {
                    <div class="col-lg-8">
                        <div class="col-lg-7">
                            <p><a href="@item.Url">@item.Name</a></p>
                            <p>@item.nameOfEmployee</p>
                            <p>@Umbraco.Truncate(@item.bodyText, 350)</p>
                        </div>

                        <div class="col-lg-5">
                            <img src="@item.Picture"  class="img-responsive img-rounded" alt="@item.nameOfEmployee">
                        </div>  

                    </div>      
                }

                else
                {
                    <div class="col-lg-4">
                        <div class="col-lg-7">
                            <p><a href="@item.Url">@item.Name</a></p>
                            <p>@item.nameOfEmployee</p>
                            <p>@Umbraco.Truncate(@item.bodyText, 50)</p>
                        </div>

                        <div class="col-lg-5">
                            <img src="@item.Picture"  class="img-responsive img-rounded" alt="@item.nameOfEmployee">
                        </div>
                    </div>
                }
            }

        </div>
    }
</div>

And the result of it is this: (Ignore the pictures, just testing images)

Copy Link

DonZalmrol 220 posts 833 karma points

Dec 22, 2016 @ 08:56

Related to this I have a second page which needs to list news articles. The articles would have the same size with the only exception for articles that do not have a picture of the newspaper/ article.

It creates the div, but it places spaces between the rows. How can I tweak it in such a way that they tend to "stick" together?

Like in a newspaper page where you have a big article then two smaller ones and then a medium sized one, etc... all neatly placed together.

i.e. You see in the current example that article 1 and 4, 3 and 6 neatly placed together. But there is a gap between 2 and 5.

enter image description here

Copy Link

Søren Kottal 712 posts 4570 karma points MVP 6x c-trib

Dec 22, 2016 @ 09:00

You can use flexbox for getting equal heights, check out this great video course: http://flexbox.io/

Copy Link

DonZalmrol 220 posts 833 karma points

Dec 22, 2016 @ 09:55

Thx, looking through the videos and sources now.

But how could I create it like this? As it's not really explained.

So you see the different "articles" knitted together on the screenshot below.

enter image description here

Copy Link

is working on a reply...

Flag this post as spam?

Umbraco razor dynamic divs with a large div and smaller ones around it