Thumbnails

Feb 15, 2011 at 9:29 AM

Anyone have a way to create a thumbnail for the Imagefield when it is being displayed in a list/summary?

Coordinator
Feb 15, 2011 at 4:52 PM

If you don't want to create a new template for the whole content item, then you would need a specific alternate for the Display Type. There is no such default behavior in Orchard, though it's a very good time to implement. In the meantime you can still create this feature. It would then resolve a field template using the convention Fields_Contrib_Image_Display__Summary.

It also reminds me we would need a thumbnail generation service.

Jul 29, 2011 at 9:11 AM

As a newb to Orchard and CMS in general I found it quite hard to figure it out how to create a list with imagefield. It turned out to be pretty straightforward, once I got hold of it.

Here is a concrete example, that can hopefully help other newbs. I don't know if it is done in the right way (the way Orchard intend it to be), but it works.

I wanted to have a list, with an image thumbnail on the left, and some data on the right.

In Orchard, using the dashboard, I defined a new content type, that I named Projects. I added a couple of text fields to that type:

  • ProjectName
  • Description
  • ToolUsed
  •  ...

And one ImageField, named Thumbnail.

Still in the dashboard, I then created a new content of type List, that contains items of type Projects.

Finally, I copied a file named "Content-Projects.cshtml" to the directory "\Themes\Contoso\Views\Content-Projects.cshtml" (I use the Contoso theme, make sure to copy the file to the right theme). Perhaps the only thing worth to note out of this code is how I access the image through the model with the following line

@Url.Content(Model.ContentItem.Projects.Thumbnail.FileName)

 

Here is the content of "Content-Projects.cshtml" :


<h1 style="background-color: #666862; color: #FFFFFF; padding-top: 5px; padding-bottom: 5px; margin-top: 15px; margin-bottom: 8px;">
    @Model.ContentItem.Projects.ProjectName.Value</h1>
<table style="width: 100%;">
    <tr>
        <td valign="middle" style="margin: 0px; padding: 0px; vertical-align: middle; width: 150px; height: auto;">
            <img src="@Url.Content(Model.ContentItem.Projects.Thumbnail.FileName)" width="140" align="middle" />
        </td>
        <td valign="top" align="left" style="width: auto">
            <h4 style="font-weight: bold">
                What it is:</h1>
            <h2>
                @Model.ContentItem.Projects.Description.Value</h2>
            <h4 style="font-weight: bold">
                Tools used:</h1>
            <h2>
                @Model.ContentItem.Projects.ToolsUsed.Value</h2>
            <h4 style="font-weight: bold">
                My role in the project:</h1>
            <h2>
                @Model.ContentItem.Projects.Role.Value</h2>
           <button type="button" OnClick="window.open('@Model.ContentItem.Projects.TryIt.Value');">
                    Try it out !</button>
            
        </td>
    </tr>
</table>

 

Aug 14, 2011 at 5:19 PM

@blelem, thank you very much for sharing that, it really helped me out as I was trying to achieve the same thing.

Thanks!

Mar 1, 2012 at 3:22 PM

Yeah, I'm very grateful for this post too.