Displaying attached image with post how to i get it to display

Question

    <div>
                    <div class="col-md-4">
                        <h3 class="textStrong">Latest Tweets</h3>
                        <a class="twitter-timeline" href="https://twitter.com/RFUK">Tweets by RFUK </a></div>
                        
                    </div>
                    <div class="col-md-4"></div>
                
                <div class="col-md-4">
                    <h2>News Feeds</h2>
 @{   
                     var news = new List<Piranha.Entities.Post>(); 
                         using (var db = new Piranha.DataContext()) { 
                          news = db.Posts 
                          .Include(p => p.CreatedBy) 
                          .Where(p => p.Template.Name == "News Post Types") 
                          .OrderByDescending(p => p.Published) 
                          .Take(4).ToList(); 
   } 
 } 
 
 
                        @foreach (var post in news) { 
                            <div class="post"> 
                             <h2><a href="@UI.Permalink(post.PermalinkId)">@post.Title</a></h2> 
                                 <p class="meta">Published @post.Published.Value.ToString("yyyy-MM-dd") by @post.CreatedBy.Firstname</p> 
                                <p>@post.Excerpt</p> 
                                
                            <img src="@post.Attachments">    
                        
                            </div>

I working with posts. I have this code to work with.... Works really well I might add.. However the attached image I wish to display with the post. How can I do that?

                            <img src="@post.Attachments">

It doesn't appear to work any suggestions on how I sort what I need to do?

Answer 1

Like @andreasnico pointed out Attachments is a collection of referenced media asset id's. If you want to display the first attachment (assuming you know it's an image) you'd probably do like this.

@foreach (var post in news) { 
  <div class="post"> 
    <h2><a href="@UI.Permalink(post.PermalinkId)">@post.Title</a></h2> 
    <p class="meta">Published @post.Published.Value.ToString("yyyy-MM-dd") by @post.CreatedBy.Firstname</p> 
    <p>@post.Excerpt</p> 

    @if (post.Attachments.Count > 0) {
      <img src="@UI.Content(post.Attachments[0])">
    }  
  </div>
}

This would get the content URL for the first attachment and use it as the source to the image. Note that you can also scale & crop images for use in lists like this with:

<img src="@UI.Content(post.Attachments[0], 300, 100)">

This would scale & crop the image to be 300px wide & 100px high. You can read more about this here: http://piranhacms.org/docs/api-reference/ui-helper

Also if the page displaying the post list is controlled by the CMS and has a page type I'd suggest you look into adding either a PostRegion or PostModelRegion to that page. These region automatically loads a collection of post into the page model, you can specify the amount, sort order & some other stuff. This will simplify you reusing the page type but for example changing which type of post to display for different page instances.

Regards

Håkan