different css classes on each element in a foreach loop

Henrik Vincent 122 posts 616 karma points

Dec 01, 2017 @ 10:52

Hi guys

I'm making a news site, where I have 7 focus posts on the frontpage. Each of these have different Bootstrap CSS classes.

How can I add these classes when doing a foreach loop in my partial view?

My markup:

<div class="row focusGallery">
    <div class="col-lg-8 col-md-12 col-sm-12 focusGalleryItem">
        <div class="focusGalleryItemImage">
            <img src="http://via.placeholder.com/370x370" alt="Placeholder">
        </div>
        <div class="focusGalleryItemContent">
            <a href="#">Post title</a>
        </div>
    </div>
    <div class="col-lg-4 col-md-6 col-sm-6 focusGalleryItem">
        <div class="focusGalleryItemImage">
            <img src="http://via.placeholder.com/370x370" alt="Placeholder">
        </div>
        <div class="focusGalleryItemContent">
            <a href="#">Post title</a>
        </div>
    </div>
    <div class="col-lg-4 col-md-6 col-sm-6 focusGalleryItem">
        <div class="focusGalleryItemImage">
            <img src="http://via.placeholder.com/370x370" alt="Placeholder">
        </div>
        <div class="focusGalleryItemContent">
            <a href="#">Post title</a>
        </div>
    </div>
    <div class="col-lg-8 col-md-12 col-sm-12 focusGalleryItem">
        <div class="focusGalleryItemImage">
            <img src="http://via.placeholder.com/370x370" alt="Placeholder">
        </div>
        <div class="focusGalleryItemContent">
            <a href="#">Post title</a>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12 focusGalleryItem">
        <div class="focusGalleryItemImage">
            <img src="http://via.placeholder.com/370x370" alt="Placeholder">
        </div>
        <div class="focusGalleryItemContent">
            <a href="#">Post title</a>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12 focusGalleryItem">
        <div class="focusGalleryItemImage">
            <img src="http://via.placeholder.com/370x370" alt="Placeholder">
        </div>
        <div class="focusGalleryItemContent">
            <a href="#">Post title</a>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12 focusGalleryItem">
        <div class="focusGalleryItemImage">
            <img src="http://via.placeholder.com/370x370" alt="Placeholder">
        </div>
        <div class="focusGalleryItemContent">
            <a href="#">Post title</a>
        </div>
    </div>
</div>

My view (just a basic list elements with "post" doctype, so far).

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@using Umbraco.Web

@{
    var selection = Umbraco.TypedContentAtXPath("//post").OrderBy("UpdateDate desc").Take(7);
}
    <div class="row focusGallery">
    @foreach(var item in selection){
        <div class="focusGalleryItem">
            <div class="focusGalleryItemImage">
                <img src="http://via.placeholder.com/370x370" alt="Placeholder">
            </div>
            <div class="focusGalleryItemContent">
                <a href="#">@item.Name</a>
            </div>
        </div>
    }
    </div>

How would you suggest adding the specific Bootstrap col-classes to each of the seven elements.

Would it be possible making some sort of array, and then adding those based on i++ or something like that?

Thanks in advance

Best

Henrik

Copy Link

Steve Morgan 1348 posts 4457 karma points c-trib

Dec 01, 2017 @ 11:35

Hi,

I'd just use a quick switch - something like

var boostrapClass = "";
var i = 1;
     foreach (var item in selection)
        {
           switch (i)
            {
                case 1:
                case 3:
                    bootstrapClass = "col-md-9";
                    break;
                case 2:
                case 4:
                    bootstrapClass = "col-md-6 col-sm-6";
                    break;
                // 5,6,7 
                default:
                    bootstrapClass = "col-md-4 col-sm-12";
                    break;
            }
            i++;

            <div class="@bootstrapClass focusGalleryItem">
                <p>Magic here </p>
            </div>
        }

Change the cases to meet your requirements.. make the default all others. The above sets 1,3 and 2,4 and lets 5,6,7 fall to the default.

hope that helps

Steve

UPDATED To init var in the correct place!

Copy Link

Henrik Vincent 122 posts 616 karma points

Dec 01, 2017 @ 12:10

Hi Steve!

Thanks alot for the quick reply and fix.

I did some minor tweaking to your example, since I kept getting the same classes on every element.

Figured out it was because i=1 was set inside the foreach loop, which made the switch start over at each element.

My final code look as follows:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@using Umbraco.Web

@{
    var selection = Umbraco.TypedContentAtXPath("//post").OrderBy("UpdateDate desc").Take(7);
    var boostrapClass = "";
    var i = 1;
}
    <div class="row focusGallery">
    @foreach(var item in selection){
            switch (i)
            {
                case 1:
                case 4:
                    boostrapClass = "col-lg-8 col-md-12 col-sm-12";
                    break;
                case 2:
                case 3:
                    boostrapClass = "col-lg-4 col-md-6 col-sm-6";
                    break;
                default:
                    boostrapClass = "col-lg-4 col-md-4 col-sm-12";
                    break;
            }
            i++;
        <div class="@boostrapClass focusGalleryItem">
            <div class="focusGalleryItemImage">
                <img src="http://via.placeholder.com/370x370" alt="Placeholder">
            </div>
            <div class="focusGalleryItemContent">
                <a href="@item.Url">@item.Name</a>
            </div>
        </div>
    }
    </div>

Thanks a whole lot for showing me this example. Haven't worked with switches before, but it works like a charm!

Have a great friday and weekend :)

Best

Henrik

PS: I'm marking this post as the solution, for the future users, so future users will place the i=1 outside the foreach loop.

Copy Link

Steve Morgan 1348 posts 4457 karma points c-trib

Dec 01, 2017 @ 13:33

Nice spot - that will teach me for posting untested code :) - I've updated my post so nobody copies the error.

Copy Link

Henrik Vincent 122 posts 616 karma points

Dec 01, 2017 @ 14:05

Hehe happens. The switch in itself still worked like a charm.

I very much appreciate you taking your time to post the code.

Switches are super awesome. I can see myself using those for a lot of different things in the future.

So you didn't just solve my problem, but gave me a really great tool for other projects as well.

So once again. Thank you!

Copy Link

George 3 posts 73 karma points

Dec 01, 2017 @ 15:41

While a switch seems to do the job just fine, you can also iterate over your collection using an IsHelper, which allows you to modify items in your collection based on the index or other properties of the current item. A quick example is shown in the documentation:

<ul>
@foreach(var item in CurrentPage.Children)
{
    <li class="@item.IsFirst("first","not-first")">@item.Name</li>
}
</ul>

Copy Link

Steve Morgan 1348 posts 4457 karma points c-trib

Dec 01, 2017 @ 15:59

George - that's a good tip but from the original post :

"..7 focus posts on the frontpage. Each of these have different Bootstrap CSS classes."

I read as there's a different size on some of the seven, not necessarily just the first item.

It's also probably worth noting that once you start getting to lots of logic in your view it might be time to hijack the route and create some custom view models to keep the view clean.

Copy Link

Henrik Vincent 122 posts 616 karma points

Dec 08, 2017 @ 13:21

Hi George

Thanks for the tip. It will definitely by useful in other cases. But as Steve also mentions, in this case I need three different CSS classes added:

col-lg-8 col-md-12 col-sm-12

col-lg-4 col-md-6 col-sm-6

col-lg-4 col-md-4 col-sm-12

Are there others of there.

.IsOdd and .IsEven perhaps. I'd see those being really usefull in other cases.

Best

Henrik

Copy Link

Steve Morgan 1348 posts 4457 karma points c-trib

Dec 08, 2017 @ 21:52

Hi Henrik,

The easiest thing to do here is to do a modulus (think of as a divide and check the remainder) check. https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/operators/modulus-operator

List<int> someList = new List<int>() { 1, 2, 3, 4, 5, 6, 7, 8
    , 9, 10 };
foreach(var someItem in someList)
{
    Console.WriteLine("****    " + someItem + " ******");
    if(someItem % 2 == 0)
        // it's even
        Console.WriteLine("it's even");

    if(someItem % 2 == 1)
        // it's odd
        Console.WriteLine("it's odd");

    if(someItem % 3 == 0)
        // it's a multiple of three
        Console.WriteLine("it's a multiple of three");
}

Copy Link

is working on a reply...

Flag this post as spam?

Different CSS classes on each element in a foreach loop