Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Robert 63 posts 282 karma points
    Jul 29, 2014 @ 09:41
    Robert
    0

    News item with image, on top

    Hello,

    I'm struggling with news items on a website, i have a news block with in total 4 items. 1 of the 4 items should be shown on top, but only it the item has an image. So the newest news-item with an image should be shown on the top of the items...

    Under that it should show 3 older items but not the item that is already shown above this 3 with the image...

    I have managed to get the latest item with an image to show on top, but now that item must not show it the list of 3 under that.

    Im using Umbraco 7

    This is how it looks:

    I don't know if the explaination is clear but this is the code i have: (partial view)

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage @{ // 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.umbNewsOverview2.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. // Finally, take the first 3 items to show in the news overview var newsItems = newsOverview.umbNewsItems.OrderBy("publishDate desc, createDate desc").Take(3); } <div class="col-md-6 col-xs-6"> <div class="HomeBlock2"><h2>Jeugd</h2></div> <div class="HomeBlockContent"> <div class="rowpad col-md-12"> @{ int count = 0; } @foreach (var newsItem in newsItems){ 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++; } </div> <div class="rowpad col-md-12"> <div class="HomeNewsItems"> <div class="HomeNewsItem"> <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> <article class="is-post-summary WordBreak"> <h3><a href="@newsItem.Url">@Umbraco.Truncate(title, 57, true, false)</a></h3> </article> </li> count++; } </ul> </div> </div> </div> </div> </div>
  • Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib
    Jul 29, 2014 @ 10:41
    Bjarne Fyrstenborg
    0

    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 

  • Robert 63 posts 282 karma points
    Jul 29, 2014 @ 11:34
    Robert
    0

    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>
    
  • Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib
    Jul 29, 2014 @ 11:54
    Bjarne Fyrstenborg
    0

    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>
  • Robert 63 posts 282 karma points
    Jul 29, 2014 @ 12:04
    Robert
    0

    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>
    
  • Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib
    Jul 29, 2014 @ 12:28
    Bjarne Fyrstenborg
    0

    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++;
    }
  • Robert 63 posts 282 karma points
    Jul 29, 2014 @ 13:16
    Robert
    0

    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:

    Image how it shows on the website

  • Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib
    Jul 29, 2014 @ 16:07
    Bjarne Fyrstenborg
    0

    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())){
    ...
  • Robert 63 posts 282 karma points
    Jul 30, 2014 @ 08:42
    Robert
    0

    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?

  • Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib
    Jul 30, 2014 @ 16:01
    Bjarne Fyrstenborg
    0

    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")){
       
    ...
    }
  • Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib
    Jul 30, 2014 @ 21:46
    Bjarne Fyrstenborg
    100

    When using strongly typed it seems you can use linq, but with dynamic access it should be formatted as string in Where() and OrderBy(): http://our.umbraco.org/documentation/Reference/Mvc/querying

    "With DynamicObject (DynamicNode too, because it inherits from), the c# compiler / razor parser doesn't allow you to use the familiar lambda syntax to filter your sets. This is because we now return a DynamicObject [DynamicNodeList] to allow method chaining.": http://umbraco.com/follow-us/blog-archive/2011/3/1/umbraco-razor-feature-walkthrough-%E2%80%93-part-4.aspx

     So I have changed the code a bit: I sort the existing newsitems collection by image in decending order and then choose the latest item. If one is found I choose that item and update the newsitem collection, which is excluded this item, where this collection is called othernews. Furthermore I have a variabled called containsImages, where there is a check if any of the nodes have an image, otherwise the expression newsItems.OrderBy("image desc") return an exception "Sequence contains no elements" if none of the nodes have a value in the image property.

    @inherits UmbracoTemplatePage
    @using System.Linq;
    @{
        Layout = "umbLayout.cshtml";
    
        // 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");
    
        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);
            }
        }
    
    }
    <!-- Your Page Markup -->
    <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"> <img src="@featuredNewsImage" alt="" /> </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>

    It should look like this when at least one news item have an image (in this case the newsitem "This is a wonderful news item" was the only with an image and created as the second news item) :

    otherwise it looks like this (in this case none of the news items have images and the newsitem "This is a wonderful news item" was created as the second news item):

    /Bjarne

  • Robert 63 posts 282 karma points
    Jul 31, 2014 @ 08:56
    Robert
    0

    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>
    

  • Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib
    Jul 31, 2014 @ 11:14
    Bjarne Fyrstenborg
    0

    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

  • Robert 63 posts 282 karma points
    Jul 31, 2014 @ 11:18
    Robert
    0

    Yes deleted, thank you! :D

  • Robert 63 posts 282 karma points
    Sep 04, 2014 @ 10:28
    Robert
    0

    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

Please Sign in or register to post replies

Write your reply to:

Draft