Problem with Showing Images in BlogPost

Topics: Customizing Orchard, General, Writing modules, Writing themes
May 21, 2015 at 8:28 AM
hi all ,
I added media picker field for blogpost part and now I can add images to blogpost ,
but this images does not appear in blogpost view !!!
I 've changed Content-BlogPost.cshtml in my theme folder :
@using RTL.Bootstrap.Services;
@using Orchard.ContentManagement;
@using Orchard.MediaLibrary.Fields;
@{ 
    var settings = WorkContext.Resolve<IThemeSettingsService>().GetSettings();

    var blogPost = Model.ContentItem;
                                          var part = (Orchard.ContentManagement.ContentPart)Model.ContentItem.BlogPostPart;
                                          var imageField = part.Fields.Where(field => field.PartFieldDefinition.Name == "PostImage").SingleOrDefault() as MediaLibraryPickerField;
                                          int blogPostImageCounter = 0;
}

@if (settings.BlogPostLayout == 1) {
    <div id="blogpost-@blogPost.Id" class="blogpost-1">
        <div class="center-block text-center">
            <h3 class="post-title"><a href="@Url.ItemDisplayUrl((IContent)blogPost)">@blogPost.TitlePart.Title</a></h3>
            <div class="bottomspace30">
                توسط <a href="/Search?q=@blogPost.CommonPart.Owner.UserName">@blogPost.CommonPart.Owner.UserName</a> &bull; @blogPost.CommonPart.CreatedUtc.ToString("MMMM d, yyyy") &bull; @Display(Model.Tags)
            </div>
        </div>
        <div>
          
            @if (imageField != null && Model.ContentItem.BlogPostPart.BlogPostImage.MediaParts.Count > 1) {
               @Model.ContentItem.BlogPostPart.BlogPostImage.MediaParts.Count
            <div class="row">
                <div class="col-md-6">
                    <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"
                               : "" )"></li>
                            blogPostImageCounter++;
                            }
                        </ol>
                        <div class="carousel-inner">
                            @{blogPostImageCounter = 0;}
                            @foreach (var mediapart in Model.ContentItem.BlogPostPart.BlogPostImage.MediaParts) {
                            <div class="item @(blogPostImageCounter == 0 ? " active"
                                : "" )">
                                <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="fa fa-chevron-left"></span>
                        </a>
                        <a class="right carousel-control" href="#blogpost-carousel-@blogPost.Id" data-slide="next">
                            <span class="fa fa-chevron-right"></span>
                        </a>
                    </div>
                </div>
            </div>
            }
            else if (imageField != null && Model.ContentItem.BlogPostPart.BlogPostImage.MediaParts.Count == 1) {
            <div class="row">
                <div class="col-md-6">
                    @foreach (var mediapart in Model.ContentItem.BlogPostPart.BlogPostImage.MediaParts) {
                    <img src="@mediapart.MediaUrl" alt="@mediapart.AlternateText" class="img-responsive" />
                    }
                </div>
            </div>
            }
            @Display(Model.Summary)
        </div>
        <div class="clearfix"></div>
    </div>
}
and the theme placement.info file :
<Match ContentType="BlogPost">
    <Match DisplayType="Summary">
      <Place Parts_Common_Body_Summary="Summary:0"
             Parts_Tags_ShowTags="Tags:0"
              Fields_MediaPicker="Content:1"
             Parts_Comments_Count="CommentsCount:0"
             Parts_Common_Metadata="-"
             Parts_Common_Metadata_Summary="-" />
           
    </Match>
    <Match DisplayType="Detail">
      <Place Parts_Common_Body="Summary:0"
             Parts_Tags_ShowTags="Tags:0"
             Parts_Comments_Count="CommentsCount:0"
             Parts_Share_ShareBar="Footer:1"
             Parts_ListOfComments="Footer:2"
             Parts_CommentForm="Footer:3"
              Fields_MediaPicker="Content:1"
             Parts_Common_Metadata="-" />
    </Match>
  </Match>
but no success !!!
is there problem in my code or should I do any changes ?
thanks.
Coordinator
May 21, 2015 at 4:20 PM
Did you try to attach a debugger and set a breakpoint in there to see what's going on?
May 21, 2015 at 4:50 PM
Thanks @BertrandLeRoy because of your reply , yeah I set breakpoint and I can see image ides of blogpost in result but as I said there is no image in my post detail view !
Coordinator
May 24, 2015 at 3:29 AM
Are you saying that Model.ContentItem.BlogPostPart.BlogPostImage.MediaParts contains a list of media parts, but no img tag gets rendered by your template?
May 24, 2015 at 7:13 AM
BertrandLeRoy wrote:
Are you saying that Model.ContentItem.BlogPostPart.BlogPostImage.MediaParts contains a list of media parts, but no img tag gets rendered by your template?
thanks BertrandLeRoy ,
yes , now I removed Content-BlogPost.Summary.cshtml and Content-BlogPost.cshtml from my theme and with default view of blog module it 's rendered !!!
so couldn't find what is wrong with my theme Placemane.info and Content-BlogPost.cshtml files that images not rendered ?
Jun 4, 2015 at 8:20 AM
hi all ,
after trying different solution Now I had some extra information about my problem :
I already 've added MediaLibraryPickerField for My BlogPost Type,
I 'm using an alternate layout for my blog , with the name of Layout-url-test.cshtml that the name of my blog is test .
and also creating Content-url-test.cshtml , Fields.MediaLibraryPicker.Summary-url-test.cshtml ,Parts.Blogs.BlogPost.List-url-test.cshtml ,
the layout is ok , and my blog posts with images is displaying media , but when I added alternate file Parts.Blogs.BlogPost.List-url-test.cshtml no images are displayed in blog post list and blog post detail !
I realized that there is some thing with my alternate files but I couldn't find any thing help full for my problem !!!
 var list = Model.ContentItems;
  var items = list.Items;
 var body = "";
 string name = string.Empty;
 foreach(var post in items)
    {

    var blogPost = post.ContentItem;

     body = post.ContentItem.BodyPart.Text;
   
    var field = post.MediaLibraryPickerField;
         name  =  field.DisplayName;
}
I could get text for bodypart but field always is null !!!

should I add some code lines in theme placement.info file ???