Displaying attached image with post how to i get it to display - asp.net-mvc

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>#post.Title</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>#post.Title</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