Hi René

I just have a similar issue, and I solved it like doing this.

Perhaps there is a better way of doing it, but this works for me.

@if (CurrentPage.HasValue("images"))
{
  var imagesList = CurrentPage.images.Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
  var imagesCollection = Umbraco.Media(imagesList);

  foreach (var image in imagesCollection)
  {
    // first item and set css
        var itemClass = "";

        if(image.IsFirst()){ 
            itemClass = "active";
        }else{ 
            itemClass = null;
        }

    <div class="item @itemClass">
      <img src="@image.Url" class="img-responsive" alt="..." />
    </div>
  }
}

Hope this helps,

/Dennis

Hi René

You should be able to use a ternary operator for this...

So you could make a check like this

<div class="@image.IsFirst ? 'item active' : 'item'">

Does this work?

/Jan

You can see another example of a ternary operator here http://stackoverflow.com/questions/4091831/how-to-use-ternary-operator-in-razor-specifically-on-html-attributes

/Jan

Hi Dennis and Jan

Dennis: Your solution works for me. Thanks

Jan: I used this code:

<div class="@(image.IsFirst ? "item active" : "item")">

But it only uses the last option "item". It does not insert the "item active" on the first item.

I would really like this to work with your solution, because it is a very clean solution.

Any suggestions?

// René

Hi René

Hmm, ok...that's because image.IsFirst never returns true...ok...this can probably be done prettier but you should be able to do something like

@{
var isFirst = image.IsFirst("true");
}

<div class="@(isFirst == 'true' ? 'item active' : 'item')">

Does this work?

/Jan

Hi Jan and Dennis

Jan: I did not manage to get your solution to work, but you definitely got me and Dennis in the right direction. :-)

I got this error message:

Operator '==' cannot be applied to operands of type 'System.Web.HtmlString' and 'string'

Dennis: Your solution works great.

Thank you both of you. :-)

// René

Hi René

Good that you managed to get it working - That's what matters. I was just trying to see if you could assign a string of true and then compare it. There should probably have been .ToString() in that sentence. But nevermind, using the (image.IsFirst) does the job :)

/Jan

Hi Jan

If you don't mind, then I would like to see how you would insert the .ToString() in your solution, maybe your solution could be used in another project. :-)

I ran into another issue regarding this topic.

My problem is that I want to add class="active" to the active item and nothing to the other items.

I use this code and it almost works:

@(slide.IsFirst() ? "class='active'" : null)

The output is this:

<li data-target="#portfolio-slideshow" data-slide-to="0" class=&#39;active&#39;></li>
<li data-target="#portfolio-slideshow" data-slide-to="1"></li>
<li data-target="#portfolio-slideshow" data-slide-to="2"></li>

How can i get rid of the "'" before and after active? It looks like it renders out the HTML number for the single quotes.

If i remove the single quotes then the HTML output is like this missing the double quotes around "active":

<li data-target="#portfolio-slideshow" data-slide-to="0" class=active></li>

Thanks!

// René

Hi Jan

I found a solution and now i use this code:

Html.Raw("class=\"active\"") : null)

// René

is working on a reply...