Overwrite Content of a Blog Post

Topics: Troubleshooting, Writing modules
Apr 29, 2014 at 3:43 PM
Edited Apr 29, 2014 at 3:46 PM
Heya,

I believe this questions is dumb but I can't find a way currently.

I'm trying to overwrite the rendering of a blog post content, as I've want to display some additional information. There I've created the template "Content-BlogPost.cshtml" within my Theme/Views Folder.

I know need to adjust the display of the content ( @Display(Model.Content)). I thought I could just iterate over the items and do the rendering like I wanted it to be. But I'm struggling as Model.Content.Items are just shapes and I don't know how to identify it's part and therefore how to render it properly.

Do you guys have any kickstart?

Cheers,
SantoDE
Apr 29, 2014 at 8:05 PM
Here's a copy of my Content-BlogPost.cshtml from one of my themes. Hope it helps
@using Orchard.ContentManagement;
@using Orchard.MediaLibrary.Fields

@{ 
    var blogPost = Model.ContentItem;
    var part = (Orchard.ContentManagement.ContentPart)Model.ContentItem.BlogPostPart;
    var imageField = part.Fields.Where(field => field.PartFieldDefinition.Name == "BlogPostImage").SingleOrDefault() as MediaLibraryPickerField;
    int blogpostimagecounter = 0;

    Layout.Title = blogPost.TitlePart.Title;
}

<div class="post-wrapper">
    <article class="post">
        @if (imageField != null && Model.ContentItem.BlogPostPart.BlogPostImage.MediaParts.Count > 1) {
            <div class="post-slider">
                <div id="blogpost-carousel-@blogPost.Id" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        @{blogpostimagecounter = 0;}
                        @foreach (var mediapart in Model.ContentItem.BlogPostPart.BlogPostImage.MediaParts) {
                            <li data-target="#blogpost-carousel-@blogPost.Id" data-slide-to="@blogpostimagecounter" class="@(blogpostimagecounter == 0 ? "active" : string.Empty)"></li>
                            blogpostimagecounter++;
                        }
                    </ol>
                    <div class="carousel-inner">
                        @{blogpostimagecounter = 0;}
                        @foreach (var mediapart in Model.ContentItem.BlogPostPart.BlogPostImage.MediaParts) {
                            <div class="item @(blogpostimagecounter == 0 ? "active" : string.Empty)">
                                <img src="@mediapart.MediaUrl" alt="@mediapart.AlternateText" class="img-responsive" />
                            </div>
                            blogpostimagecounter++;
                        }
                    </div>
                    <a class="left carousel-control" href="#blogpost-carousel-@blogPost.Id" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a class="right carousel-control" href="#blogpost-carousel-@blogPost.Id" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>
                </div>
            </div>
            using (Script.Foot()) {
                    <script type="text/javascript">
                        $(function () {
                            $('.post-details').css('border-top', '0');
                        });
                    </script>
            }
        }
        else if (imageField != null && Model.ContentItem.BlogPostPart.BlogPostImage.MediaParts.Count == 1) {
            <div class="post-thumb">
                @foreach (var mediapart in Model.ContentItem.BlogPostPart.BlogPostImage.MediaParts) {
                    <img src="@mediapart.MediaUrl" alt="@mediapart.AlternateText" class="img-responsive" />
                }
            </div>
                using (Script.Foot()) {
                <script type="text/javascript">
                    $(function () {
                        $('.post-details').css('border-top', '0');
                    });
                </script>
                }
        }
        else {
            <div class="post-thumb">
            </div>
        }
        <div class="post-details">
            <h4 class="post-title"><a href="@Url.ItemDisplayUrl((IContent)blogPost)">@blogPost.TitlePart.Title</a></h4>
            <div class="post-meta">
                <ul class="meta-list">
                    <li>Posted on <a href="#">@blogPost.CommonPart.CreatedUtc.ToLocalTime().ToString("MMMM d, yyyy")</a>
                    </li>
                    <li>By <a href="/Search?q=@blogPost.CommonPart.Owner.UserName">@blogPost.CommonPart.Owner.UserName</a>
                    </li>
                    <li>In @Display(Model.Tags)
                    </li>
                    <li>
                        @Display(Model.CommentsCount)
                    </li>
                </ul>
            </div>
            @Display(Model.Summary)
        </div>
    </article>
</div>

@Display(Model.Footer)
Apr 29, 2014 at 9:54 PM
Thanks a lot! I didn't came up with the Content Item solution, though it's so easy.

My Intelisense didn't displayed that option either, sadly.

However, thanks!