Show a Blog entry on the home page?

Is there a way to show a Blog entry on the home page just like news items are shown, or show last 2 or 3 blog posts?

Yes though it requires some coding:

Create a partial view:  _ListHomePage.cshtml

@{ 
    for (int i = 0; i < Model.BlogPosts.Count; i++)
    {
        Nop.Web.Models.Blogs.BlogPostModel bpm = Model.BlogPosts[i];
        
      
                    <a href="@Url.RouteUrl("BlogPost", new { blogPostId = bpm.Id, SeName = bpm.SeName })">
                      <img alt="" src="" width="75"  />
                    </a>  
    }
}

Copy the BlogControllers list method and call it something else (ListHomePage) and add this towards the button. The hard coded 3 is for my home page:

   model.BlogPosts = blogPosts
                .Select(x =>
                {
                    var blogPostModel = new BlogPostModel();
                    PrepareBlogPostModel(blogPostModel, x, false);
                    return blogPostModel;
                }).OrderBy(x=>x.CreatedOn).Take(3)  
                .ToList();

            return View("_ListHomepage",model );

Add the partial to your home page view:

  @Html.Action("ListHomepage", "Blog")

This was a kind of quick and coded for my specific needs.  You could probably clean this up a bit and make it more generalized with parameters for the # to display/etc but this will get you going.  Also note that I didn't paste the full code for my view nor my controller so a straight copy/paste won't work.

Thanks for posting this, I am not sure i understand though and would appreciate some guidance.

From my understanding you open the BlogController.cs file, make a duplicate of the "List" method, keep it in the BlogController.cs file and rename it to "ListHomePage". Then at the bottom of that method paste:

model.BlogPosts = blogPosts
                .Select(x =>
                {
                    var blogPostModel = new BlogPostModel();
                    PrepareBlogPostModel(blogPostModel, x, false);
                    return blogPostModel;
                }).OrderBy(x => x.CreatedOn).Take(3)
                .ToList();

which would leave that method looking like this???:

public ActionResult ListHomePage(BlogPagingFilteringModel command)
        {
            if (!_blogSettings.Enabled)
                return RedirectToRoute("HomePage");

            var model = PrepareBlogPostListModel(command);
            
            model.BlogPosts = blogPosts
                .Select(x =>
                {
                    var blogPostModel = new BlogPostModel();
                    PrepareBlogPostModel(blogPostModel, x, false);
                    return blogPostModel;
                }).OrderBy(x => x.CreatedOn).Take(3)
                .ToList();
            }
            return View("_ListHomepage", model);

        }

pictoric
Do you have the complete code for Blogs on the Home page?

Here is the tutorial to add blog posts on homepage: http://www.strivingprogrammers.com/Blog/post/Lavish-Kumar/62/How-to-add-blog-posts-on-homepage-in-nopCommerce/

How to show Blog image on Home Page, I can set the title, date and Bodyoverview on Home page but Image is not displaying. Please suggest.

manojsharma0387 wrote:

Hi manojsharma0387,

You can set (show) on home page everything like blog images, blog title, blog date etc. That you will add using blog admin panel.

You should simple change inside view part (cshtml file).

Step : 1
-----------------------------------------------------------

Open Blog list file : ~/Themes/ThemeName/Views/Blog/List.cshtml
Replace this code area (layout assign area)

@{
    Layout = "~/Views/Shared/_ColumnsTwo.cshtml";
    
    //title
    Html.AddTitleParts(T("PageTitle.Blog").Text);
}

Using this code

@{
    var isHomePage = false;
    var controllerName = HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString();
    var actionName = HttpContext.Current.Request.RequestContext.RouteData.Values["action"].ToString();
    if (controllerName == "Home" && actionName == "Index")
    {
        Layout = "";
        isHomePage = true;
    }
    else
    {
        Layout = "~/Views/Shared/_ColumnsTwo.cshtml";
        //title
        Html.AddTitleParts(T("PageTitle.Blog").Text);

    }
}

Step 2
------------------------------------
Replace blog post body area

@Html.Raw(!String.IsNullOrEmpty(item.BodyOverview) ? item.BodyOverview : item.Body)

Using this code

 @if (isHomePage)
                        {
                            if(!String.IsNullOrEmpty(item.BodyOverview))
                            {
                                @Html.Raw(item.BodyOverview)
                            }
                            @Html.Raw(item.Body);
                        }
                        else
                        {
                            @Html.Raw(!String.IsNullOrEmpty(item.BodyOverview) ? item.BodyOverview : item.Body)
                        }

Step 3
------------------------------------
Open home page file : ~/Themes/ThemeName/Views/Home/Index.cshtml

Set (Call) this action where you want to show blog

@Html.Action("List", "Blog")

Hi, works great!

What code should I add to only display the last 3 items of blog articles on the homepage ?

hanzzz wrote:


Hi, you can set a counter before @foreach loop to show only last 3 blogs on home page like this  

           @{
                var counter = 0;
            }

            @foreach (var item in Model.BlogPosts)
            {

and you should check when last 3 blogs will be print then @foreach loop  will be close like this

counter++;
 if (counter == 3)
 {
    break;
 }

This is complete source code
-------------------------------------------------
Open Blog list file : ~/Themes/ThemeName/Views/Blog/List.cshtml
Replace all using this code

@model BlogPostListModel
@using Nop.Web.Models.Blogs;
@{
    var isHomePage = false;
    var controllerName = HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString();
    var actionName = HttpContext.Current.Request.RequestContext.RouteData.Values["action"].ToString();
    if (controllerName == "Home" && actionName == "Index")
    {
        Layout = "";
        isHomePage = true;
    }
    else
    {
        Layout = "~/Views/Shared/_ColumnsTwo.cshtml";
        //title
        Html.AddTitleParts(T("PageTitle.Blog").Text);

    }
}
@section left {
    @Html.Widget("left_side_column_blog_before")
    @Html.Action("BlogMonths", "Blog")
    @Html.Widget("left_side_column_after_blog_archive")
    @Html.Action("BlogTags", "Blog")
    @Html.Widget("left_side_column_blog_after")
}
<div class="page blog-page">
    <div class="page-title">
        <a href="@Url.RouteUrl("BlogRSS", new { languageId = Model.WorkingLanguageId })" class="link-rss" title="@T("Blog.RSS.Hint")">@T("Blog.RSS")</a>
        <h1>
            @if (String.IsNullOrEmpty(Model.PagingFilteringContext.Tag))
            {
                if (Model.PagingFilteringContext.GetParsedMonth().HasValue)
                {
                    @String.Format(T("Blog.FilteredByMonth").Text, Model.PagingFilteringContext.GetParsedMonth().Value.Year, Model.PagingFilteringContext.GetParsedMonth().Value.ToString("MMMM"))
                }
                else
                {
                    @T("Blog")
                }
            }
            else
            {
                @String.Format(T("Blog.TaggedWith").Text, Model.PagingFilteringContext.Tag)
            }
        </h1>
    </div>
    <div class="page-body">
        @Html.Widget("bloglist_page_before_posts")
        <div class="blog-posts">

            @{
                var counter = 0;
            }

            @foreach (var item in Model.BlogPosts)
            {
                @Html.Widget("bloglist_page_before_post", item.Id)
                <div class="post">
                    <div class="post-head">
                        <a class="post-title" href="@Url.RouteUrl("BlogPost", new {SeName = item.SeName})">@item.Title</a>
                        <span class="post-date">[email protected]("D")</span>
                    </div>
                    @Html.Widget("bloglist_page_before_post_body", item.Id)
                    <div class="post-body">
                        @if (isHomePage)
                        {

                            if (!String.IsNullOrEmpty(item.BodyOverview))
                            {
                                @Html.Raw(item.BodyOverview)
                            }
                            @Html.Raw(item.Body);
                            
                            counter++;
                            if (counter == 3)
                            {
                                break;
                            }
                        }
                        else
                        {
                            @Html.Raw(!String.IsNullOrEmpty(item.BodyOverview) ? item.BodyOverview : item.Body)
                        }
                    </div>
                    @Html.Widget("bloglist_page_after_post_body", item.Id)
                    <div class="blog-details">
                        @if (item.Tags.Count > 0)
                        {
                            <div class="tags">
                                <label>@T("Blog.Tags"):</label>
                                <ul>
                                    @for (int i = 0; i < item.Tags.Count; i++)
                                    {
                                        var tag = item.Tags[i];
                                        <li><a href="@Url.RouteUrl("BlogByTag", new {tag = tag})">@tag</a></li>
                                        if (i != item.Tags.Count - 1)
                                        {
                                            <li class="separator">,</li>
                                        }
                                    }
                                </ul>
                            </div>
                        }
                        <div class="buttons">
                            @if (item.AllowComments)
                            {
                                <a href="@Url.RouteUrl("BlogPost", new {SeName = item.SeName})#comments" class="read-comments">@string.Format(T("Blog.CommentsLink").Text, item.NumberOfComments)</a>
                            }
                            <a href="@Url.RouteUrl("BlogPost", new {SeName = item.SeName})" class="read-more">@T("Blog.MoreInfo")</a>
                        </div>
                    </div>
                    @Html.Widget("bloglist_page_inside_post", item.Id)
                </div>
                @Html.Widget("bloglist_page_after_post", item.Id)
            }
        </div>
        @{
            var pager = Html.Pager(Model.PagingFilteringContext).QueryParam("pagenumber");
        }
        @if (!pager.IsEmpty())
        {
            <div class="pager">
                @pager
            </div>
        }
        @Html.Widget("bloglist_page_after_posts")
    </div>
</div>

and call this action on home page

@Html.Action("List", "Blog")

Note : I applied this Technic on nopCommerce 3.7 version

[email protected] wrote:

getting error with your code

An exception of type 'System.Web.HttpException' occurred in System.Web.dll but was not handled in user code

Additional information: Error executing child request for handler 'System.Web.Mvc.HttpHandlerUtil+ServerExecuteHttpHandlerAsyncWrapper'.

Compiler Error Message: CS1061: 'Nop.Web.Models.Blogs.BlogPostModel' does not contain a definition for 'BodyOverview' and no extension method 'BodyOverview' accepting a first argument of type 'Nop.Web.Models.Blogs.BlogPostModel' could be found (are you missing a using directive or an assembly reference?)

Source Error:


 

Line 67:                         {
Line 68: 
Line 69:                             if (!String.IsNullOrEmpty(item.BodyOverview))
Line 70:                             {
Line 71:                                 @Html.Raw(item.BodyOverview)