display post image and post title by category or tags or slugs

Geofrey 40 posts 161 karma points

Feb 02, 2018 @ 14:06

Using Umbraco And Getting Started

Umbraco 7

Hii guys:

I want to display post image and post title by category in a specific div.

Here is what I have done:

foreach (var blogposts in blogArchive.Children.Where("Visible").Where("categories == @0", "SubMainPageBanner"))
                {

                    <img src="@blogposts.GetPropertyValue("postImage")" />
                    <h5><a href="@blogposts.Url">@blogposts.Name</a></h5>
                }

             }

my page display nothing , what am I doing wrong here?

Copy Link

Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Feb 02, 2018 @ 15:22

Hi Geofrey

What version of Umbraco are you using? Can you show the code of all view? What property type "categories" is?

/Alex

Copy Link

Geofrey 40 posts 161 karma points

Feb 06, 2018 @ 09:39

Version 7.5 , what do u mean What property type "categories" is?

Copy Link

Sven Geusens 169 posts 881 karma points c-trib

Feb 02, 2018 @ 15:25

Couple questions:

Do you want to only show posts of 1 category or all categories with all the posts that have that category.

How do you select the category in the backend, is it a textfield/tags/single picker/multi picker?

Quick example: Category is a textfield | Alias = category | All blogposts ordered by category.

var groups = blogArchive.Children.Where("Visible").GroupBy(blog => blog.GetPropertyValue("category"))

foreach (var group in groups)
{
    <h2>@group.Key</h2>
    @foreach(var blogpost in group)
    {
        <img src="@blogpost.GetPropertyValue("postImage")" />
        <h5><a href="@blogpost.Url">@blogpost.Name</a></h5>
    }
}

Copy Link

Geofrey 40 posts 161 karma points

Feb 06, 2018 @ 09:36

Hii Sven

here is what I want .

<div class="TopNews" >
foreach (var blogposts in blogArchive.Children.Where("Visible").Where("categories == @0", "TopNews"))
                {

                    <img src="@blogposts.GetPropertyValue("postImage")" />
                    <h5><a href="@blogposts.Url">@blogposts.Name</a></h5>
                }

             }
</div>



   <div class="LatestNews" >
    foreach (var blogposts in blogArchive.Children.Where("Visible").Where("categories == @0", "LatestNews"))
                    {

                        <img src="@blogposts.GetPropertyValue("postImage")" />
                        <h5><a href="@blogposts.Url">@blogposts.Name</a></h5>
                    }

                 }
    </div>

<div class="BreakingNews" >
foreach (var blogposts in blogArchive.Children.Where("Visible").Where("categories == @0"BreakingNews ""))
                {

                    <img src="@blogposts.GetPropertyValue("postImage")" />
                    <h5><a href="@blogposts.Url">@blogposts.Name</a></h5>
                }

             }
</div>

Note : I am using articulate blog, so here is result I want to show 1.

Here is my blog stucture

3.Here is one of blog posts , post atributes enter image description here

when I want to display latest post without using categories it displays me what I want something like this

@{

                            foreach (var blogposts in blogArchive.Children.Where("Visible"))
                            {
                                if (blogposts.IsLast())
                                {

                    <img src="@blogposts.GetPropertyValue("postImage")" />
                    <h5><a href="@blogposts.Url">@blogposts.Name</a></h5>
            }

        }
                        }

Problem is when I want to display post according to category as I described above it display me nothing just white page . what am I doing wrong ? Please help.

Copy Link

Sven Geusens 169 posts 881 karma points c-trib

Feb 06, 2018 @ 09:45

I see you are using tags to store the category, could you check in the settings of that datatype how the system is storing the data. CSV or Json (my example is using the tag property, you should do this on your category property)

enter image description here

Copy Link

Geofrey 40 posts 161 karma points

Feb 06, 2018 @ 13:38

Sven

I have the same as yours enter image description here

NB: what about the codes am i doing the right way?

Copy Link

Geofrey 40 posts 161 karma points

Feb 06, 2018 @ 13:43

Data types of categories

enter image description here

Copy Link

Sven Geusens 169 posts 881 karma points c-trib

Feb 06, 2018 @ 13:53

Your selector is wrong (the .where) use the code below to get the blogposts for breakingNews

The problem lies in the fact that tags are a csv string that can hold multiple tags. So you need to check each blogpost if your chosend tag is contained in all the tags on that post.

@foreach(var blogpost in blogArchive.Children.Where("Visible").Where(c => c.HasValue("categories") && c.GetPropertyValue<string>("categories").ToLower().Split(',').Contains("breakingnews "))
{
    <img src="@blogpost.GetPropertyValue("postImage")" />
    <h5><a href="@blogpost.Url">@blogpost.Name</a></h5>
}

The problem doing it this way is that it is slow + you first load all the children of your archive in memory. This starts to become a problem when you have 200-1000+ nodes in your archive, depending on your machine strenght.

A better way to do it, would be to create an extra field in the examineIndex that contains the tags in a way so that examine can easily search them. And then retrieve the blogposts straight from the examineIndex.

Below you can find a fjew posts that can help you on your way https://our.umbraco.org/forum/developers/api-questions/57958-Using-Examine-to-search-UmbracoTags https://24days.in/umbraco-cms/2013/getting-started-with-examine/

Copy Link

Geofrey 40 posts 161 karma points

Feb 06, 2018 @ 14:10

Thanks for help am gonna check it out ,

After I used your method I have some errors

@Html.Partial("MediaPicker")    '@Html.Partial("MediaPicker")' threw an exception of type 'System.Web.HttpException'



base    {System.Web.HttpException (0x80004005): Circular file references are not allowed.

code:

@{ 
                            var blogRoot = Umbraco.ContentAtRoot().DescendantsOrSelf("Articulate").FirstOrDefault();

                            var blogArchive = blogRoot.Children.First();



                            foreach(var blogpost in blogArchive.Children.Where("Visible").Where(c => c.HasValue("categories") && c.GetPropertyValue<string>("categories").ToLower().Split(',').Contains("breakingnews ")))

                            {


                        <img src="@blogposts.GetPropertyValue("postImage")" />
                        <h5><a href="@blogposts.Url">@blogposts.Name</a></h5>



                        }



                        }

Copy Link

Sven Geusens 169 posts 881 karma points c-trib

Feb 06, 2018 @ 14:19

What if you just put @blogpost.Name inside the foreach code block?

Copy Link

is working on a reply...

Flag this post as spam?

Display Post image and post title by category or tags or slugs