featured image with articulate blog

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Jeff McKinnon 6 posts 76 karma points

Mar 23, 2016 @ 18:53

Hi,

I have my blog set up to show on a blog page but I want to include a featured image/thumbnail on the list of blog posts This is my code now:

<div class="col-md-3 col-sm-12 col-xs-12 text-right">
                <img src="@Umbraco.Field("blogLogo")" alt="logo_event">
            </div>
            <div class="col-md-9 col-sm-12 col-xs-12">
                <a href="@post.Url"><div class="page-title">
                    <h2>@post.Name</h2>
                    <p>@post.GetPropertyValue("Excerpt")</p>
                </div>
                </a>
            </div>
        </div>

So Im hoping someone can tell me what to add into the img src field to pull a featured image out of the post.

Thanks a million! J

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Mar 23, 2016 @ 19:52

Hi Jeff,

Could you please try something like this, if you are using the media picker to pick the thumbnail image, from the media library.

        <div class="col-md-9 col-sm-12 col-xs-12">
            <a href="@post.Url"><div class="page-title">
                <h2>@post.Name</h2>
                <p>@post.GetPropertyValue("Excerpt")</p>
                @if(post.Content.HasValue("featuredImage")){
                   var mediaItem = Umbraco.TypedMedia(post.Content.GetPropertyValue("featuredImage")); 
                   <img src="@mediaItem.GetPropertyValue("umbracoFile")" alt="@mediaItem.GetPropertyValue("Name")"/>    
                }   
            </div>
            </a>
        </div>
    </div>

Hope this helps,

/Dennis

Copy Link

Jeff McKinnon 6 posts 76 karma points

Mar 23, 2016 @ 20:07

Thanks for the help now I am getting this:

Compiler Error Message: CS1061:'Umbraco.Core.Models.IPublishedContent' does not contain a definition for 'Content' and no extension method 'Content' accepting a first argument of type 'Umbraco.Core.Models.IPublishedContent' could be found (are you missing a using directive or an assembly reference?)Source Error:Line 40:                 @if(post.Content.HasValue("featuredImage")){

Copy Link

Nicholas Westby 2054 posts 7103 karma points c-trib

Mar 23, 2016 @ 20:30

2

Change post.Content to simply post (i.e., remove the .Content).

Copy Link
Jeff McKinnon 6 posts 76 karma points

Mar 23, 2016 @ 21:58

0

No more error but still not seeing any images on the blog page... I didnt see a "featuredImage" I used a media picker for in the post content but I dont see a doc type -> generic property for featured image

Copy Link
Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Mar 23, 2016 @ 22:02

1

Hi Jeff,

You need to add a property of the type media picker to the post document type so the user add a image from the media library.

The alias of the property should be featuredImage, then you should be able to use the code above.

Hope this helps,

/Dennis

Copy Link
Jeff McKinnon 6 posts 76 karma points

Mar 24, 2016 @ 16:16
0
Dennis,

Your a lifesaver thanks a ton!
```
.killing_it
```
Jeff
Copy Link
Jeff McKinnon 6 posts 76 karma points

Mar 25, 2016 @ 16:45
0
Also how do I add it into the post itself?
```
<div class="box-inner post xfolkentry paddingtop40">
<h1>@Model.Excerpt</h1>
<br>
    <h2>@Model.Name</h2>
```
@Model.featuredImage doesnt seem to be working...
Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Mar 25, 2016 @ 17:27

Hi Jeff,

Could you try this.

 @if(Model.Content.HasValue("featuredImage")){
      var mediaItem = Umbraco.TypedMedia(Model.Content.GetPropertyValue("featuredImage")); 
      <img src="@mediaItem.GetPropertyValue("umbracoFile")" alt="@mediaItem.GetPropertyValue("Name")"/>    
 }

Hope this works for you.

/Dennis

Copy Link

Jeff McKinnon 6 posts 76 karma points

Mar 25, 2016 @ 17:45

It didnt break the site but it didnt add the image

<div class="box-inner post xfolkentry paddingtop40">
    @if(Model.HasValue("featuredImage")){
var mediaItem = Umbraco.TypedMedia(Model.GetPropertyValue("featuredImage"));

     }
<h1>@Model.Excerpt</h1>

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Mar 25, 2016 @ 18:08

0

Hi Jeff,

Okay and you are adding the image on the node in the that you viewing in the browser.

Model.Content refers to the current page that you are viewing. See this documentation https://our.umbraco.org/documentation/reference/templating/mvc/views

Hope this helps,

/Dennis

Copy Link
is working on a reply...

Please Sign in or register to post replies