Copied to clipboard

Flag this post as spam?

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


  • Allie 26 posts 116 karma points
    Sep 16, 2021 @ 14:27
    Allie
    0

    Implement filter to display only certain category of news

    Hi everyone , can sb help me w/ it ?..

    I have a document type and two pages ( blog & company news ), but will be one more for all news. I want to render the content in a template based on blogCategoryId ( 0 - blog, 1-company)

    @{
        string path = HttpContext.Current.Request.Url.AbsolutePath;
    
    
        var selection1 = Umbraco.Content(Guid.Parse("1d770f10-d1ca-4a26-9d68-071e2c9f7ac1"))
                               .ChildrenOfType("blogpost")
                               .Where(x => x.IsVisible() && x.Value("blogCategoryId").ToString() == "0")
                               .OrderByDescending(x => ((ContentModels.Blogpost)x).BlogDate);
    
        var selection2 = Umbraco.Content(Guid.Parse("1d770f10-d1ca-4a26-9d68-071e2c9f7ac1"))
                            .ChildrenOfType("blogpost")
                            .Where(x => x.IsVisible() x.Value("blogCategoryId").ToString() == "1")
                            .OrderByDescending(x => ((ContentModels.Blogpost)x).BlogDate);
    }
    
                @{
                    foreach (ContentModels.Blogpost item in selection1)
                    {
    
                        if (path == @Url.Content("~/blog/"))
                        {
                            <div class="col-md-4" style="height: 330px; margin: 40px 0px">
                                <div style="height: 320px; margin: 0px; 40px; box-shadow: 0 1px 5px rgba(0,74,116,0.15); overflow: hidden; padding: 10px; text-overflow: ellipsis; line-height: 16px;">
                                    <div style="line-height: 25px;">
                                        @item.BlogDate.ToString("M/d/yy")
                                    </div>
                                    <div style="max-height: 75px; overflow: hidden; text-overflow: ellipsis; font-weight: bold; font-size: 15px; line-height: 25px; margin: 0px 0px 10px 0px">
                                        @item.PageTitle
                                    </div>
                                    <div style="max-height: 60%; overflow: hidden; text-overflow: ellipsis; line-height: 25px;">
                                        @Html.StripHtml(item.Value<string>("blogDescription"), "p")
                                    </div>
                                    <div style="min-height: 25px">
                                        <a href="@item.Url" style="color: #ffa500;">
                                            MORE
                                        </a>
                                    </div>
                                </div>
                            </div>
                        }
    
                    }
                }
    
                @{
    
                        foreach (ContentModels.Blogpost item in selection2)
                        {
                            <div class="col-md-4" style="height: 330px; margin: 40px 0px">
                                <div style="height: 320px; margin: 0px; 40px; box-shadow: 0 1px 5px rgba(0,74,116,0.15); overflow: hidden; padding: 10px; text-overflow: ellipsis; line-height: 16px;">
                                    <div style="line-height: 25px;">
                                        @item.BlogDate.ToString("M/d/yy")
                                    </div>
                                    <div style="max-height: 75px; overflow: hidden; text-overflow: ellipsis; font-weight: bold; font-size: 15px; line-height: 25px; margin: 0px 0px 10px 0px">
                                        @item.PageTitle
                                    </div>
                                    <div style="max-height: 60%; overflow: hidden; text-overflow: ellipsis; line-height: 25px;">
                                        @Html.StripHtml(item.Value<string>("blogDescription"), "p")
                                    </div>
                                    <div style="min-height: 25px">
                                        <a href="@item.Url" style="color: #ffa500;">
                                            MORE
                                        </a>
                                    </div>
                                </div>
                            </div>
                        }
                    }
            </div>
        </div>
    

    me newbie dont flame pls ty <3 in advance

  • Marc Goodson 1682 posts 11099 karma points MVP 6x c-trib
    Sep 18, 2021 @ 07:03
    Marc Goodson
    100

    Hi Allie

    Trying to get my head around what you are saying, forgive me if I misunderstand!!

    You have one place in your Umbraco site where the blog posts are created, and this has a guid id of 1d770f10-d1ca-4a26-9d68-071e2c9f7ac1

    Each Blog Post has a property for 'blogCategoryId' which can either be a 0 or 1 - and is currently entered manually? as those values... the editor types in 0 or 1 or is it a radiobutton thing?

    And you have two pages that will list out blog posts,

    One called 'Blog' and one called 'Company News'

    On the Blog page you only want to list out Blog Post with category 0 On the News page, only list out the blog posts with category 1

    The Blog and Company News are currently created with the same Document Type? eg BlogPostListingPage ???

    You'll be pleased to know this is a common thing in Umbraco and there are a gazillion ways to setting up this kind of thing! and alot depends on the context, the size of the site, the editors using it, how long til it must go live... that will determine the best way!

    So the simplest change to move this forwards, assuming the Blog and Company News page are using the same document type and the same template... is to introduce a new property to that document type called

    Blog Post Display Category

    (yeah awe inspiring name right?)

    So if you go to your Blog Post Listing Page in the Umbraco backoffice you'll be able to set this value to 0 and if you visit your Company News Listing Page you'll be able to set this value to 1.

    Now in your template, you don't need to have two seletion1 and selection2 lists, and you don't need to check the url of the page to determine which one to display... you can instead read the 'BlogPostDisplayCategory' setting and use that to filter the posts: eg

    // read in the category setting from the listing page
         var thisPagesBlogCategory = Model.Value<string>("blogPostDisplayCategory");
    
        // filter the blog posts category by this value
            var blogPostsByCategory = Umbraco.Content(Guid.Parse("1d770f10-d1ca-4a26-9d68-071e2c9f7ac1"))
                                       .ChildrenOfType("blogpost")
                                       .Where(x => x.IsVisible() && x.Value("blogCategoryId").ToString() == thisPagesBlogCategory)
                                       .OrderByDescending(x => ((ContentModels.Blogpost)x).BlogDate);     
    
                        @{
                            foreach (ContentModels.Blogpost item in blogPostsByCategory)
                            {
                                    <div class="col-md-4" style="height: 330px; margin: 40px 0px">
                                        <div style="height: 320px; margin: 0px; 40px; box-shadow: 0 1px 5px rgba(0,74,116,0.15); overflow: hidden; padding: 10px; text-overflow: ellipsis; line-height: 16px;">
                                            <div style="line-height: 25px;">
                                                @item.BlogDate.ToString("M/d/yy")
                                            </div>
                                            <div style="max-height: 75px; overflow: hidden; text-overflow: ellipsis; font-weight: bold; font-size: 15px; line-height: 25px; margin: 0px 0px 10px 0px">
                                                @item.PageTitle
                                            </div>
                                            <div style="max-height: 60%; overflow: hidden; text-overflow: ellipsis; line-height: 25px;">
                                                @Html.StripHtml(item.Value<string>("blogDescription"), "p")
                                            </div>
                                            <div style="min-height: 25px">
                                                <a href="@item.Url" style="color: #ffa500;">
                                                    MORE
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                }
    
                            }
    

    So same template but different output depending on what the Blog Post Display Category has been set to for the page!

    Anyway, apologies if I've misunderstood, but hopefully that gives you the gist and the trick you might employ to control via Umbraco properties in the backoffice to create different outcomes on pages that share the same template...

    ... there's a lot of other things to consider depending on your context, but hopefully this gives you a bit of a steer!

    regards

    Marc

  • Allie 26 posts 116 karma points
    Sep 18, 2021 @ 14:48
    Allie
    0

    Hey Marc

    Thank u so much for such an extensive answer, hopefully now i got it, i knew it was an ugly and shitty solution by me, anyways...

    How to implement the 3-rd page called 'All news' that will combine all blog posts from blog (0) and company news (1). Do i need to combine it in my selection or .. ?

    Btw, now on 'all news' page i have all the content from blog, so blogPostDisplayCategory by default set to 0?

    Kind regards :)

  • Marc Goodson 1682 posts 11099 karma points MVP 6x c-trib
    Sep 21, 2021 @ 07:50
    Marc Goodson
    100

    HI Allie

    Ugly and Shitty often wins the day...

    Yes, in your approach, you could have -1 as the convention to show 'all categories' or you could list the categories that the all news page should show...

    eg set it to be 0,1

    then

    // read in the category setting from the listing page
         var thisPagesBlogCategoryList = Model.Value<string>("blogPostDisplayCategory");
    // turn into a string[] array:
    var thisPagesBlogCategories = thisPagesBlogCategoryList.Split(new char[]{','}, StringSplitOptions.RemoveEmptyEntries);
    var 
          var blogPostsByCategory = Umbraco.Content(Guid.Parse("1d770f10-d1ca-4a26-9d68-071e2c9f7ac1"))
                                       .ChildrenOfType("blogpost")
                                       .Where(x => x.IsVisible() && thisPagesBlogCategories.Contains(x.Value("blogCategoryId").ToString()))
                                       .OrderByDescending(x => ((ContentModels.Blogpost)x).BlogDate); 
    

    so then your blogPostDisplayCategory, can be either 0 for blogs, 1 for news, or 0,1 for 'both'

    which is fine if that's all the categories you end up having, but if you start to have different types of blog posts, it might be a bit cumbersome to keep adding different ids to the 'all news' list.

    It all depends on what you are building of course and who is using it and how long you have to build it etc eg if you might have lots of categories in the future, you might have a section of the Umbraco Content Tree, where each category node is created, and then have a 'content picker' on the Blog post to pick multiple categories, and then on the Listing page, have you Blog Post Display Category field as a picker, to pick the categories to list on that page... no need for anyone to remember what 1 and 0 means...

    regards

    Marc

  • Allie 26 posts 116 karma points
    Sep 21, 2021 @ 11:41
    Allie
    0

    Hi Marc

    ... there's a lot of other increadible things i can use, but dont know yet, so need to figure it out

    Thanks a lot for your help :-)

Please Sign in or register to post replies

Write your reply to:

Draft