Adding image to blog post (featured)

Topics: Administration, Customizing Orchard, Installing Orchard, Troubleshooting, Writing themes
Apr 16, 2015 at 1:50 PM
I want to add an image which will be displayed on the recent blog post widget shown on my home page.
I am using orchard 1.8.1

I am finding a lot of information that seems to be out/outdated and not applicable to 1.8.1 (i.e. the designer tools module 1.6 does not work in 1.8.1)

Where can i find information on how to add change the content of the recent blog posts part to show the newly added feature image (added to the blog post content type)

Little frustrating because the shapes feature is enabled but nothing is visible either. Not sure if broken/changed or what.

thx -dave
Apr 19, 2015 at 7:45 PM
Any help? thx
Apr 21, 2015 at 1:34 AM
You added a ImageField or how did you add the feature image?
I think you have to override the shape for the recent blogpostpart. Make sure the module "ShapeTracing" is enabled. Then a small bar should appear on the bottom of your site. With the button on it you can size up the shape tracer. Move over your widget to get all alternatives displayed and click on "Create". Automatically Orchard creates the correct *.cshtml file in your active theme. Edit this file according to your needs.
Apr 21, 2015 at 6:48 AM
benschi11 wrote:
I think you have to override the shape for the recent blogpostpart.
The RecentBlogPostPartDriver uses the List shape to display content items in Summary display type. Therefore you should be able to do it with just editing the
May 8, 2015 at 7:52 PM
I added a MediaLibraryPickerField to my BlogPost Part, then I override the Parts.Blogs.RecentBlogPosts shape. Here is an example from one of my themes:
@using System.Linq;
@using Orchard.ContentManagement;
@using Orchard.Blogs.Models;
@using Orchard.MediaLibrary.Fields;

    IEnumerable<object> blogPosts = Model.ContentItems.ContentItems;

@if (blogPosts == null || blogPosts.Count() < 1) {
else {
    <ul class="recent-posts round-images">
        @foreach (dynamic post in blogPosts) {
            string title = post.Title;
            ContentItem contentItem = post.ContentItem;
            var part = (Orchard.ContentManagement.ContentPart)post.ContentItem.BlogPostPart;
            var mediaField = part.Fields.Where(field => field.PartFieldDefinition.Name == "BlogPostMedia").SingleOrDefault() as MediaLibraryPickerField;
            DateTime date = post.ContentItem.CommonPart.CreatedUtc;

                <article class="post-format-standard">
                    <div class="wf-td">
                        <a class="alignleft post-rollover animsition-link" href="@Url.ItemDisplayUrl((IContent)contentItem)">
                            @if (mediaField != null && post.ContentItem.BlogPostPart.BlogPostMedia.MediaParts.Count > 0) {
                                foreach (var mediapart in mediaField.MediaParts.Take(1)) {
                                    if (mediapart.MimeType.StartsWith("image")) {
                                        <img class="preload-me" src="@Display.MediaUrl(Profile: "RecentBlogPosts", Path: mediapart.MediaUrl)" alt="@mediapart.AlternateText" />
                                    else if (mediapart.MimeType.StartsWith("video")) {
                                        <img class="preload-me" src="@Display.MediaUrl(Profile: "RecentBlogPosts", Path: mediapart.AlternateText)" alt="" />
                            else {
                                <img class="preload-me" src="@Href(Html.ThemePath(WorkContext.CurrentTheme, "/Content/noimage-thumbnail.jpg"))" width="44" height="44" alt="" />
                    <div class="post-content">
                        @Html.ItemDisplayLink(title, contentItem, new { @class = "animsition-link" })<br />
                        <time class="text-secondary" datetime="@date.ToLocalTime().ToString("yyyy-MM-ddTHH:mm:ss.fffffffZ")">@date.ToLocalTime().ToString("MM/dd/yyyy")</time>
Hope this helps