Blog Post Title Images

This is something I attempted to do back when SF4 was released and I migrated my site over to 4.  It didn’t work at all, and I think it was Radoslav who identified the problem was with the parsing engine for templates.  However since then I believe he said the engine has been upgraded to use the Standard Asp.net one (I’ll have to check the ticket) but regardless this is now possible and be as creative as you want to be…it’s opened a ton of possibilities :)

The idea is to be able to toggle visiblility of content based on if the content actually exists.  Now since blog posts don’t typically have an image field, what you need to do is leverage the awesome new built in Custom Fields option inside your blog.

So once you click that link I want you to make at least one new custom field as defined below.  The custom field will be called “ImageURL”.

I included a second field called ImageStyle to allow me to set custom inline css properties on the image (just in case).

Ok so now we need to go edit our blog Widget Template.  Which template you edit is totally dependant on the one you picked inside your blog widget so I wont TELL you which one to use.  You can open your own widget properties and have a look though (and edit it there).  Where you place this code is also totally up to you.  For me, I place it right below the blog title h1 tag.

So it’s just a simple asp:Panel, however look at the two new properties we just created.  The ImageStyle property is inside of a style attribute so if we wanted we could set the property in the new blog post to have a bottom margin of 40, or maybe a bottom border, or maybe even a background color! 
  Also have a look at the Visible property of the panel.  That’s saying we only want to show the panel if a value exists inside the ImageURL custom property.  So if we don’t define anything then the markup doesn’t even get rendered!  Lastly the asp:Image control just shows the image based on the ImageURL.  So I suppose what you can also do is define a new property for ImageAltText and put that as the alternate text on the img tag if you want :) …get the idea…see why this is so awesome…there’s zero visual studio coding involved.

So lastly when you create your blog post this is what you’ll get to enter your images URLs :)

Now I haven’t TRIED this, but I assume that since I used an asp:Image control that this field should also accept the tilde “~” for relative image pathing.

Happy Sitefinitying
- Steve

**EDIT**
As of 4.2 this post will not work, they’ve changed the security to not allow serverside code in templates.