How to add a thumbnail Image to a Blog Post

Mar 9, 2013 at 12:06 PM
Edited Mar 9, 2013 at 12:31 PM
Dear Community:

First of all, thanks for reading this discussion. I've done my homework, and I've been trying to rely the best that I can on self-research, but, I can't get the answer so, here I state it:

Problem:

I have an Orchard installation, version 1.6 (as March 9th, 2012) and I proceeded to install an Image Field Module, version 1.1.3 developed byt Sébastien Ros.

You can watch the steps about how to do that here.

So, what I would like to achieve is to be able to relate / connect / attach (what ever lingo you want to imagine is fine) a "thumbnail" or small image next to the a Blog Post in a Blog created within Orchard.

So, let's try to picture it as it's working now:

| --------------------------------------------------------------- |
| Home Link | Blog Link |------------------------------------ |
| --------------------------------------------------------------- |
| Blog Title (what ever you named your blog) ------------- |
| Blog Post (this is an entry in your blog) No tumbnail --- |

What I would like to get is:

| --------------------------------------------------------------- |
| Home Link | Blog Link |------------------------------------ |
| --------------------------------------------------------------- |
| Blog Title (what ever you named your blog) ------------- |
| | xxxx | Blog Post (this post has a thumbnail next to the |
| blog post) --------------------------------------------------- |


Now, I found out that the behavior of the Image Field is defined by the placement.info that is located in the Drive-where-you-installed-your-web:\your-orchard-installation\Orchard\Modules\Contrib.ImageField.

By default, that file has the following XML format:
<Placement>
  <Place Fields_Contrib_Image_Edit="Content:2.5"/>

  <Match DisplayType="SummaryAdmin">
    <Place Fields_Contrib_Image="-"/>
  </Match>

  <Match DisplayType="Summary">
    <Place Fields_Contrib_Image="-"/>
  </Match>

  <Place Fields_Contrib_Image="Content:before"/>
</Placement>
According to damoclarke, collaborator at StackOverflow.com, it is better to modify the placement.info file of the Theme that you are applying presently to your Orchard Installation rather than to the Image Field one.

In that case, the modification should be made to the placement.info file that is located in _Drive-where-you-installed-your-web:\your-orchard-installation\Orchard\Themes\Name-of-the-theme-that-you-are-using._

His advice (which I followed with no result) was to place the following XML snippet inside the mentioned placement.info file:
<Match ContentType="BlogPost">
  <Match DisplayType="Summary">
    <Place Fields_Contrib_Image="Content"/>
  </Match>
</Match>
My placement.info file in my Theme's folder is:
<Placement>
  <!-- Customize where the shapes are rendered -->

  <!-- 
  <Place Parts_Blogs_BlogArchives="Content:before"/>
  <Place Parts_Blogs_RecentBlogPosts="Content:after"/>
  <Match ContentType="Blog">
    <Match DisplayType="Summary">
      <Place Parts_Blogs_Blog_Description="Content:before"
             Parts_Blogs_Blog_BlogPostCount="Meta:3"/>
    </Match>
  </Match>
  <Match ContentType="BlogPost">
    <Match DisplayType="Summary">
      <Place Fields_Contrib_Image="Content"/>
    </Match>
  </Match>
  <Match Path="/About">
    <Place Parts_Common_Metadata="-"/>
  </Match>
-->
</Placement>
I also added an Image Field to the "Blog Post" content type, and I configured it as follows:

Name: Thumbnail.
Limit Size: Width: 0; Height: 0.
Pull-down list: Validate
Media Folder: Blog_Post_Tumbnails.

I also did the previous steps for the "Recent Blog Posts" content type, as well.

In the sake of the discussion, I also tried to modify Match ContentType="BlogPost" for Match ContentType="RecentBlogPosts", but as I said, with no avail.

I'm looking for a simple and elegant solution that can be achieved with this Image Field Module.

I would deeply appreciate any hint / advice / or direction into this matter.

Thank you.
Apr 21, 2014 at 5:30 AM
I think your problem is that you've got your additions to the placement file commented out. It might also be more appropriate to use the media picker field.
  <Match ContentType="BlogPost">
    <Match DisplayType="Summary">
      <Place Fields_MediaPicker="Content"/>
    </Match>
  </Match>