Blog Post Title Image

Topics: Customizing Orchard, Writing modules
May 15, 2011 at 1:16 AM
Edited May 16, 2011 at 2:30 AM

Is it possible (if so can someone give example) of creating a title image part for blog posts?


What I am ultimately trying to do is create a content rotator for the home page (configurable) to show (top 5 article, newest posts etc.) What it shows needs to be managed in the dashboard eg. a setting for showing the top (5) blog posts based on votes (voting module installed ofcourse). Before I can get to the point of getting my feet wet creating this module, I first need a way to associate an image with a post (a title image if you will). I would like to have the image path stored in a db table along with the post id so that when the rotator is building the slide (for lack of better terms) I can include the post title, title image, summary, link (more...) and rating (stars module). I know that I need an upload field (I managed to create one and it shows in the new post page) but what I cant wrap my brain around is how do I store the selected image url, along with the blogpostId on save / publish from the upload field module without going into the blog module itself. Thanks in advance for your efforts. I love Orchard by the way but I have to stop thinking ASP.Net and start thinking MVC and maybe I can digest this architecture better.

Again, any help would be greatly appreciated.


May 16, 2011 at 11:26 AM


Well there are several ways you could approach this of course :)

I've been working on a couple of modules that will mean you can do this pretty much code-free.

There's "Mechanics" which allows you to define connectors (i.e. custom relationships) between content.

Then there's "Media Garden" which turns images (and other media) into proper content items.

So you can create a relationship between Blog Post -> Image Media, call that relationship "BlogPostToTitleImage", and then customize where and how the image(s) render in the UI.

Another way you could do this is with the "ImageField" module, it just gives you a custom field you can add the content types to store images.

May 16, 2011 at 3:37 PM

Thanks for the reply. I assume that I can find your modules in the gallery, yes, yes?! On the surface, the Media Garden seems like its just what I need. I wonder how granular can one get w/the associations. Im probably not thinking "Low Level"  enough to understand the architecture yet.

Normally for this, I would just create the UI to upload an image for use as a title image and either store the path (along with the images metadata) in a db table and create the assiciation/s (PK-FK (1-n)) in the db or simply store the path in the blogPost table as the titleImage tuple. My problem is that I am still thinking this way and thus my confusion persists.

Since the above is my normal approach, how do I translate that into the proper thought processes for me to conceptualize this solution in Orchard? I have read thru the customization dox (which I am about to do again) and I even hand coded everything in the MediaPicker module just so I could ensure I read all of the code. I understand some of what was going on in that code but there was alot of Why's.

Once I complete this small task (with the help of the Orchard masters such as yourself), I will be ready to dev the Rotator module and one my way to becomming efficient within the Orchard architecture

May 16, 2011 at 3:43 PM

You can do it that way; you just create a content part, with a field to store the image URL. You could have a button that launches the media picker. There are good tutorials in the documentation (on on how to create modules and parts, and also on creating joined database records (1-N and N-N relationships) using NHibernate.

But, the key thing with Orchard is that its design is modular; so you don't have to reinvent the wheel and code things yourself when there are already modules providing the features you need. So you should use either ImageField or MediaField (which I just remembered about) - or Mechanics / Media Garden is a much more complex situation but yes the connections can be very granular, if you ask me about specific scenarios you are thinking of here I can describe how the implementation would work.

May 16, 2011 at 5:54 PM
randompete wrote:

if you ask me about specific scenarios you are thinking of here I can describe how the implementation would work.

If I  understand you correctly, the best way to describe this is to show the workflow concept I have. If I am off base let me know :)

1) Admin creates a new post.

     a) In the New Post page there is a field "Title Image" which allows the uploading/selection (as well as styling, sizing etc) of an image to be used as the title image.

Note: It would be nice to have a switch to include in post body, title summary or both. Or this could be a custom setting (eg. Show TitleImage in Post Header) which will allow for choosing an alternate template for the titlesummary part (I might be reaching here:)

2) After the post construction is complete, admin clicks Save / Publish

     a) During the Save / Publish action, the URI of the title image is stored in a db table (eg. ContentTitleImage) along with the "ContentItemRecord_Id

3) The post/s are viewed and rated

4) The Content Rotator module grabs the most popular posts (lets say 5) based on total view count and rating (votes) This logic will be in the model I believe. Construct the slides which will have the titleImage, postTitle, postSummary, postRating (stars) and a link to the full post. I think this would be the View Model. Then the view (with the Jquery Rotator) will be pushed into the Featured zone of the HomePage Layer for example.


May 20, 2011 at 3:57 PM

Hi again, is it possible to show me, or point me in the right direction to learn how to get the ContentItemRecord_Id value of a Post / Page etc. from a module that is contained within that Post (Page etc.) when it is Published (or Saved)? Step 2a from above.