Add a class to the first li item in a webapp using liquid

[Steve @ Lightplay]

I need to add a class to the first li item in a webapp using liquid (making the first item active) but not sure how to do this, can someone point me in the right direction?

[Alex___IntegrateBc · Accepted solution]

Below snippet can give you an idea:

{% for item in yourWebAppItemCollection -%}

<li {% if forloop.first == true -%} class="active" {% endif -%}></li>

{% endfor -%}

Reference: Logic tags | Business Catalyst Support

[Steve @ Lightplay]

Thank you for your help, that worked great and has applied the active class to the first li item.

Now my issue is to have another class on every other item in the list except the first item.

I can see the answer to this will help me with so many situations.

[Alex___IntegrateBc]

Just add "else" clause:

{% if forloop.first == true -%} class="active" {% else -%} class="inactive" {% endif -%}

[Steve @ Lightplay]

Now we're talking it all works perfectly, thank you so much. I've just successfully completed my first webapp using liquid.

[Steve @ Lightplay]

It was all going so well and I thought I had nailed it but I've discovered a hitch: I'm trying to display an image in the webapp and using the following markup <img src="{{bedlinen2.items[0].["image 300px"]}}" /> however it only displays the same image for every item without changing, am I doing something wrong? Note: my collection isn't inside a webapp layout but this hasn't affected any other fields from displaying correctly.

[Alex___IntegrateBc]

Zero in square brackets points to the first item in the collection. If you use the same syntax as i used, you should do item.["image 300px"]

[Steve @ Lightplay]

That's fixed it, all great now. The docs on this are a little confusing.

Thank you for your help, you have been a lifesaver.

I hope you have a great NYE and all the best for 2017.

Steve

[Alex___IntegrateBc]

Thanks Steve, have a nice 2017, too.