Hi Robert

instead of looping the collection twice, can't you loop the collection once and print the markup in each case?
so you could print the whole list as a unordnered list - it's a list of news items (and the same list), you just want to give the latest news item with an image a different visual representation than the others.

So something like this:

<ul>
@foreach(var newsItem in newsItems){
 <li>
 if(count ==0&& newsItem.HasValue("image")){
 // print markup inclusive image for first news items
 }
 else {
 // otherwise just print e.g. an anchor tag with the name an url of the news items
 }
 </li>
}
</ul> 

Then you won't get the news item "News item with newest image" twice.

/Bjarne 

Hi Bjarne,

You mean something like this:?

@{
            int count = 0;
        }
        <ul>
        @foreach (var newsItem in newsItems){
            <li>
            @if(count == 0 && newsItem.HasValue("image")){
                // If the editor has not explicitly provided the "Page title" property page 
                // then just show the name of the page otherwise show the provided title
                var title = string.IsNullOrWhiteSpace(newsItem.Title)
                ? newsItem.Name
                : newsItem.Title;

                // If the editor has not explicitly set the publishDate property then show the create date
                var dateTime = newsItem.PublishDate == default(DateTime)
                ? newsItem.CreateDate
                : newsItem.PublishDate;

                <div class="col-md-4 col-xs-4 npl npr">
                    <a href="@newsItem.Url"><div class="NewsHomeImageDiv" style="background-image:url('/[email protected]&amp;Compression=100&amp;constrain=true');"></div></a>
                </div>
                <div class="col-md-8 col-xs-8 npr WordBreak">
                    <h3><a href="@newsItem.Url">@Umbraco.Truncate(title, 57, true, false)</a></h3>
                    @Umbraco.Truncate(newsItem.BodyText, 65, true, false)
                </div>
            }
            count++;
            else{
                <article class="is-post-summary WordBreak">
                    <h3><a href="@newsItem.Url">@Umbraco.Truncate(title, 57, true, false)</a></h3>
                </article>
            }
            </li>
        }
        </ul>

Yes, or with slightly changes:

@{
            int count = 0;
        }
        <ul>
        @foreach (var newsItem in newsItems){
            // If the editor has not explicitly provided the "Page title" property page 
            // then just show the name of the page otherwise show the provided title
            var title = string.IsNullOrWhiteSpace(newsItem.Title) ? newsItem.Name : newsItem.Title;

            // If the editor has not explicitly set the publishDate property then show the create date
            var dateTime = newsItem.PublishDate == default(DateTime) ? newsItem.CreateDate : newsItem.PublishDate;

            <li>
            @if(count == 0 && newsItem.HasValue("image")){
<article>
                <div class="col-md-4 col-xs-4 npl npr">
                    <a href="@newsItem.Url">
<img src="/[email protected]&amp;Compression=100&amp;constrain=true" alt="@title" />
    </a>
                </div>
                <div class="npr WordBreak">
                    <h3><a href="@newsItem.Url">@Umbraco.Truncate(title, 57, true, false)</a></h3>
                    <p>@Umbraco.Truncate(newsItem.BodyText, 65, true, false)</p>
                </div>
</article>
            }
            else{
                <article class="is-post-summary WordBreak">
                    <h3><a href="@newsItem.Url">@Umbraco.Truncate(title, 57, true, false)</a></h3>
                </article>
            }
            </li>
    count++;
        }
        </ul>

Thanks, i set the number of items to 4 so it will display 3 items under it.

But if i now add an item without an image it will show the for items in a list and not the latest item with image on top :)

This is what is have now:

@{
        int count = 0;
    }
    <ul>
    @foreach (var newsItem in newsItems){
        // If the editor has not explicitly provided the "Page title" property page 
        // then just show the name of the page otherwise show the provided title
        var title = string.IsNullOrWhiteSpace(newsItem.Title) ? newsItem.Name : newsItem.Title;

        // If the editor has not explicitly set the publishDate property then show the create date
        var dateTime = newsItem.PublishDate == default(DateTime) ? newsItem.CreateDate : newsItem.PublishDate;

        <li>
        @if(count == 0 && newsItem.HasValue("image")){
            <article>
                <div class="col-md-4 col-xs-4 npl npr">
                    <a href="@newsItem.Url">
                        <div class="NewsHomeImageDiv" style="background-image:url('/[email protected]&amp;Compression=100&amp;constrain=true');"></div>
                    </a>
                </div>
                <div class="npr WordBreak">
                    <h3><a href="@newsItem.Url">@Umbraco.Truncate(title, 57, true, false)</a></h3>
                    <p>@Umbraco.Truncate(newsItem.BodyText, 65, true, false)</p>
                </div>
            </article>
        }
        else{
            <article class="is-post-summary WordBreak">
                <h3><a href="@newsItem.Url">@Umbraco.Truncate(title, 57, true, false)</a></h3>
            </article>
        }
        </li>
        count++;
    }
    </ul>

Okay.. so it's not always the latest news which should be at top? But the latest with an image.. and if there is one newer without an image it should be in the list below?

Because then then count doesn't match 0, e.g. if you have one newer item without an image then "old" newsitem is number 2 (count = 1) in the collection.

Could you try change this part:

@int index = 0;
@if(index == 0 && newsItem.HasValue("image")){
    <article>
        <div class="col-md-4 col-xs-4 npl npr">
            <a href="@newsItem.Url">
                <div class="NewsHomeImageDiv" style="background-image:url('/[email protected]&amp;Compression=100&amp;constrain=true');"></div>
            </a>
        </div>
        <div class="npr WordBreak">
            <h3><a href="@newsItem.Url">@Umbraco.Truncate(title, 57, true, false)</a></h3>
            <p>@Umbraco.Truncate(newsItem.BodyText, 65, true, false)</p>
        </div>
    </article>
    @index++;
}

Yes! We are almost there :)

Now it shows only the latest item with image, but... if you add an item later without an image it puts that on top of the one with image.

The code:

<ul>
        @{ int index = 0;}
        @foreach (var newsItem in newsItems){
            // If the editor has not explicitly provided the "Page title" property page 
            // then just show the name of the page otherwise show the provided title
            var title = string.IsNullOrWhiteSpace(newsItem.Title) ? newsItem.Name : newsItem.Title;

            // If the editor has not explicitly set the publishDate property then show the create date
            var dateTime = newsItem.PublishDate == default(DateTime) ? newsItem.CreateDate : newsItem.PublishDate;

            <li>
            @if(index == 0 && newsItem.HasValue("image")){
                <article>
                    <div class="col-md-4 col-xs-4 npl npr">
                        <a href="@newsItem.Url">
                            <div class="NewsHomeImageDiv" style="background-image:url('/[email protected]&amp;Compression=100&amp;constrain=true');"></div>
                        </a>
                    </div>
                    <div class="npr WordBreak">
                        <h3><a href="@newsItem.Url">@Umbraco.Truncate(title, 57, true, false)</a></h3>
                        <p>@Umbraco.Truncate(newsItem.BodyText, 65, true, false)</p>
                    </div>
                </article>
                index++;
            }
            else{
            <div class="rowpad col-md-12">
                <article class="is-post-summary WordBreak">
                    <h3><a href="@newsItem.Url">@Umbraco.Truncate(title, 57, true, false)</a></h3>
                </article>
            </div>
            }
            </li>
        }
        </ul>

See image of the item how it displays:

Okay, then you need to reorder the list so the latest with an image comes first, but not affect the others that might have an image.
I haven't tested this, but think you can order the collection by the first item with an image: 

@foreach (var newsItem in newsItems.OrderBy(x => x.HasValue("image").First())){
   ...
} 

Hmm... I'm not really familiar with this code.

I get the error: Compiler Error Message: CS1977: Cannot use a lambda expression as an argument to a dynamically dispatched operation without first casting it to a delegate or expression tree type

Do you know what i must do to get this row working?

Okay, in this case it doesn't seem linq can be used to order because of the type of newsItems.

You could use this, but then the list is reordered so all news with an image comes first.

@foreach(var newsItem in newsItems.OrderBy("image desc")){
   ...
}

YESSSS!!! You're the best! :D

Thank you very much for your help i appreciate it! I only added the max amount of items so it displays 4 news items including the image Take(4).

Thank you thank you thank you!

The whole working code:

@inherits UmbracoTemplatePage
@using System.Linq;
@{

// If the editor has not explicitly provided the "Page title" property page 
// then just show the name of the page otherwise show the provided title
var pageTitle = string.IsNullOrWhiteSpace(CurrentPage.Title)
    ? CurrentPage.Name
    : CurrentPage.Title;

// Model.Content is the current page that we're on
// AncestorsOrSelf is all of the ancestors this page has in the tree
// (1) means: go up to level 1 and stop looking for more ancestors when you get there
// First() gets the first ancestor found (the home page, on level 1)
var homePage = CurrentPage.AncestorsOrSelf(1).First();    

// Find all pages with document type alias umbNewsOverview
// We do that using the plural, umbNewsOverviews (note the extra "s" in the end)
// Then take the first one, as we know there will only be on news overview page
var newsOverview = homePage.umbNewsOverview1.First();

// Similar to above: find all pages with document type umbNewsItem under the news overview page
// Then order them, first by publishDate (a property the editor can explicitly set on the news item)
// and then by createDate, which is set by Umbraco automatically when a page gets created.
var newsItems = newsOverview.umbNewsItems.OrderBy("publishDate desc, createDate desc").Take(4);

bool containsImages = newsItems.Where("image != String.Empty").Count() > 0 ? true : false;

var featuredNews = containsImages ? (Umbraco.Web.Models.DynamicPublishedContent)newsItems.OrderBy("image desc").First() : null;
var otherNews = newsItems;

if (containsImages && featuredNews != null)
{
    var featuredNewsId = featuredNews.Id;

    if(featuredNewsId > 0)
    {
        var values = new Dictionary<string, object>();
        values.Add("excludenode", featuredNewsId);

        otherNews = newsItems.Where("Id != excludenode", values);
    }
}
}

<div class="col-md-6 col-xs-6">
<div class="HomeBlock1"><h2>Senioren</h2></div>
<div class="HomeBlockContent">
    <div class="rowpad col-md-12">
        <ul>
            @if (containsImages && featuredNews != null)
            {
                var featuredNewsTitle = string.IsNullOrWhiteSpace(featuredNews.GetPropertyValue("title").ToString()) ? featuredNews.Name : featuredNews.GetPropertyValue("title").ToString();
                var featuredNewsText = featuredNews.GetPropertyValue("bodyText").ToString();
                var featuredNewsImage = featuredNews.GetPropertyValue("image");

                <li>
                    <article>
                        <div class="col-md-4 col-xs-4 npl npr">
                            <a href="@featuredNews.Url">
                                <div class="NewsHomeImageDiv" style="background-image:url('/ImageGen.ashx?image=@featuredNewsImage&amp;Compression=100&amp;constrain=true');"></div>
                            </a>
                        </div>
                        <div class="npr WordBreak">
                            <h3><a href="@featuredNews.Url">@Umbraco.Truncate(featuredNewsTitle, 57, true, false)</a></h3>
                            <p>@Umbraco.Truncate(featuredNewsText, 65, true, false)</p>
                            @*<h3><a href="@featuredNews.Url">@Umbraco.Truncate(title, 57, true, false)</a></h3>*@
                            @*<p>@Umbraco.Truncate(featuredNews.GetPropertyValue("bodyText")), 65, true, false)</p>*@
                        </div>
                    </article>
                </li>
            }
            @foreach (var newsItem in otherNews)
            {

                // If the editor has not explicitly provided the "Page title" property page 
                // then just show the name of the page otherwise show the provided title
                var title = string.IsNullOrWhiteSpace(newsItem.Title) ? newsItem.Name : newsItem.Title;

                // If the editor has not explicitly set the publishDate property then show the create date
                var dateTime = newsItem.PublishDate == default(DateTime) ? newsItem.CreateDate : newsItem.PublishDate;

                <li>
                    <article class="is-post-summary WordBreak">
                        <div class="rowpad col-md-12">             
                            <h3><a href="@newsItem.Url">@Umbraco.Truncate(title, 57, true, false)</a></h3>
                        </div>
                    </article>
                </li>
            }
        </ul>
    </div>
</div>

Hi Robert

Great to hear it solved your problem..

In your code you can also just remove these lines:

@using System.Linq;

@*<h3><a href="@featuredNews.Url">@Umbraco.Truncate(title, 57, true, false)</a></h3>*@
@*<p>@Umbraco.Truncate(featuredNews.GetPropertyValue("bodyText")), 65, true, false)</p>*@

Please mark the post as solved :)

/Bjarne

Yes deleted, thank you! :D

I have one other question related to this topic...

When we have a new news-item with an image it will be displayed on top so that is good. But when we make a new news-item with an image that is earlier uploaded so it has an older upload date for the image, that news-item will not be on top.

I would like to have control over the items so we have an publishDate that must sort the items and not the create date from the images. Some one that could change that please?

This is the whole Partial View:

@inherits UmbracoTemplatePage
@using System.Globalization
@{

// If the editor has not explicitly provided the "Page title" property page 
// then just show the name of the page otherwise show the provided title
var pageTitle = string.IsNullOrWhiteSpace(CurrentPage.Title)
    ? CurrentPage.Name
    : CurrentPage.Title;

// Model.Content is the current page that we're on
// AncestorsOrSelf is all of the ancestors this page has in the tree
// (1) means: go up to level 1 and stop looking for more ancestors when you get there
// First() gets the first ancestor found (the home page, on level 1)
var homePage = CurrentPage.AncestorsOrSelf(1).First();    

// Find all pages with document type alias umbNewsOverview
// We do that using the plural, umbNewsOverviews (note the extra "s" in the end)
// Then take the first one, as we know there will only be on news overview page
var newsOverview = homePage.umbNewsOverviews.First();

// Similar to above: find all pages with document type umbNewsItem under the news overview page
// Then order them, first by publishDate (a property the editor can explicitly set on the news item)
// and then by createDate, which is set by Umbraco automatically when a page gets created.
var newsItems = newsOverview.umbNewsItems.OrderBy("publishDate desc, createDate desc").Take(4);

bool containsImages = newsItems.Where("image != String.Empty").Count() > 0 ? true : false;

var featuredNews = containsImages ? (Umbraco.Web.Models.DynamicPublishedContent)newsItems.OrderBy("image desc").First() : null;
var otherNews = newsItems;

if (containsImages && featuredNews != null)
{
    var featuredNewsId = featuredNews.Id;

    if(featuredNewsId > 0)
    {
        var values = new Dictionary<string, object>();
        values.Add("excludenode", featuredNewsId);

        otherNews = newsItems.Where("Id != excludenode", values);
    }
}
}

Fontend mark-up

<div class="col-md-6 col-sm-6">
<div class="HomeBlock4">
    <div class="col-md-6 col-xs-6 npl">
        <h2>Algemeen</h2>
    </div>
    <div class="col-md-6 col-xs-6 npr">
        <a href="/nieuws-algemeen/">
            <div class="NewsArchiveLink pull-right">
                Nieuws archief
            </div>
        </a>
    </div>
</div>
<div class="HomeBlockContent">
    <div class="rowpad col-md-12">
        <ul>
            @if (containsImages && featuredNews != null)
            {
                var featuredNewsTitle = string.IsNullOrWhiteSpace(featuredNews.GetPropertyValue("title").ToString()) ? featuredNews.Name : featuredNews.GetPropertyValue("title").ToString();
                var featuredNewsText = featuredNews.GetPropertyValue("bodyText").ToString();
                var featuredNewsImage = featuredNews.GetPropertyValue("image");
                var featuredNewsTextTruncated = Umbraco.Truncate(featuredNewsText, 100, true, false);

                <li>
                    <div class="imageItemHeight">
                        <div class="col-md-4 col-xs-4 npl">
                            <a href="@featuredNews.Url">
                                <div class="NewsHomeImageDiv">
                                    <img src="/ImageGen.ashx?image=@featuredNewsImage&amp;Compression=100&amp;width=100&amp;height=100&amp;constrain=true">
                                </div>
                            </a>
                        </div>
                        <div class="npr WordBreak">
                            <h3><a href="@featuredNews.Url">@Umbraco.Truncate(featuredNewsTitle, 57, true, false)</a></h3>
                            @Umbraco.StripHtml(featuredNewsTextTruncated)
                        </div>
                    </div>
                </li>
            }
            <div class="newsMargin">
            @foreach (var newsItem in otherNews)
            {

                // If the editor has not explicitly provided the "Page title" property page 
                // then just show the name of the page otherwise show the provided title
                var title = string.IsNullOrWhiteSpace(newsItem.Title) ? newsItem.Name : newsItem.Title;

                // If the editor has not explicitly set the publishDate property then show the create date
                var dateTime = newsItem.PublishDate == default(DateTime) ? newsItem.CreateDate : newsItem.PublishDate;
                <div class="row npl npr">
                    <div class="HomeNewsItem">
                        <li>
                            <article class="is-post-summary WordBreak">
                                <div class="rowpad col-md-12">             
                                    <h3>
                                        <img src="../Css/VVEemdijk/images/ItemImage.png" height="7" width="4" class="HomeNewsItemArrow">
                                        <a href="@newsItem.Url">@Umbraco.Truncate(title, 41, true, false)</a>
                                        <div class="NewsItemDate">@dateTime.ToString("f", CultureInfo.CreateSpecificCulture("nl"))</div>
                                    </h3>
                                </div>
                            </article>
                        </li>
                    </div>
                </div>
            }
            </div>
        </ul>
    </div>
</div>

Kind regards,

Robert

is working on a reply...