Grid layout with images

Topics: Customizing Orchard
Mar 1, 2013 at 8:52 AM
Hi all,
I am a beginner using orchard but I like it very much.
My next challenge is to create a page that has a grid layout with images, something like you can see on this page.

One of my friend said that I should go with Masonry or Isotope jquery plugins.
It would'nt be a pain for my very simple knowledge but the problem is integration with orchard.
Those are the steps I have already done:
  • i have created a content type that resemble a single item
  • i have created a query on my content types that returns the list of interesting items
Where do i go from here? Can someone drive me through completing those steps?

Thanks a lot!
Developer
Mar 2, 2013 at 10:12 AM
Next steps would be:
  • On your Query, optionally define a Layout (if you don't define a Layout, a default one will be used in the next step)
  • Add a ProjectionWidget to a zone, or create a Projection content item. Both will let you select which Query to project.
  • The default Query Layout renders the content items using an UL/LI list. To style the individual items, there are a couple of ways that you can mix and match to customize how the items look. Because each item is by default rendered using the Summary display type, you can use Placement.info to configure which shapes for the display type and content type are rendered in what (local) zone, or not render at all. You can also create a Razor view for the content type and display type (e.g. Content-MyContentType.Summary.cshtml) which lets you render the content item in any way you want.
Alternatively, if you need more control over the list structure, you could add a Layout to your Query and specify some properties from there.
If you nee even more control, or perhaps full control, I highly recommend installing Contrib.ProjectionLayouts. It has a Shape and Raw layout. Shape layout wll let you specify which template to use to render your list (the model for that template will contain a list of yielded content items as well as a delegate to a function that will render the content items). Raw layout lets you define the list element, item element, classes to use, and a couple of other things.
Mar 2, 2013 at 10:59 AM
Hi sfskywalker,
Thanks a lot for your answer.
It seems that, maybe because I am not english mother tongue, I was'nt able to explain my requirement as I would.
Let me try it again.
I need to create two pages:
  1. First one will be a summary page, like a categories page for example, where where i will show, in a grid layout with images, only the categories of my posts.
  2. Second page would be activated when the user click on a category showing all the posts of that category
I have downloaded the taxonomy module to create a taxonomy for my posts, i have the attached the taxonomy field to my content type and now i am able to define a category for each post.

Following your suggestions, along with what i have already done, i have been able to create a query (that only select terms of a specific taxonomy) with a grid layout and a projection for that query that shows items in a grid (thanks for suggestions).

Regarding this page....
  • how can I modify the rendering of the table? I have seen that it render the table as an HTML TABLE element, but if I would use those plugins I have to completely change this rendering. Which file I have to create on my theme to override rendering? Is there any sample where I can start with (the default one will be great)
Thanks again for your help!
Developer
Mar 2, 2013 at 11:06 AM
No problem.

Well, if you want to completely change the rendering of the list/table, I'd go with the Shape Projection Layout that comes with Contrib.ProjectionLayouts: https://gallery.orchardproject.net/List/Modules/Orchard.Module.Contrib.ProjectionLayouts/1.0
Mar 2, 2013 at 11:39 AM
Edited Mar 2, 2013 at 12:22 PM
Thank you!
One more question... In the view that I have created i am enumerating the content items that i can find in the Model.ContentItems with code like this one
@{
    IEnumerable<object> items = Model.ContentItems;
}
<div class="ctg-container">
@foreach (dynamic item in items) {
    <div class="category" style="width:  200px; margin: 10px; float:  left;">
        <p>@Display(item)</p>
    </div>
}
</div>
If I leave it like this then I will just get two elements prinetd as "Orchard.ContentManagement.ContentItem".
But if I change inside the foreach adding
<p>@item.Category</p>
I will get the following error

'Orchard.ContentManagement.ContentItem' does not contain a definition for 'Category'

How can I access the fields of the item directly?
Developer
Mar 2, 2013 at 1:31 PM
Edited Mar 2, 2013 at 1:31 PM
If Category is a field, then it is attached to a part, which in turn is attached to your content item.
Can you tell us more about the structure of your content type? E.g.

MyContentTypeName
  • MyContentPartName
    • MyContentFieldName And Type
Mar 2, 2013 at 3:58 PM
Edited Mar 2, 2013 at 3:59 PM
Right. Category is a field. This is my content type.

MyContentType

Fields
  • Cover (Media Picker Field)
  • Summary (Text Field)
  • Category (Taxonomy Field)
Parts
  • Common
  • Autoroute
  • Image Gallery
  • Publish Later
  • Tags
  • Title
  • Containable
Developer
Mar 2, 2013 at 6:57 PM
Ok, so then there will also be a part called MyContentType to which the fields are attached.
You can access those fields like this:
var contentItem = (dynamic)_contentManager.Get(42);
var coverField = contentItem.MyContentType.Cover;
var summaryField = contentItem.MyContentType.Summary;
var category = contentItem.MyContentType.Category;
The pattern is: contentItem.[Part].[Field].
Mar 3, 2013 at 1:55 AM
First of all, thanks again.
I have to say that I had the code a bit changed from yours regarding the summary and category fields.
For the summaryField I had to modify in
var summaryField = contentItem.MyContentType.Summary.Value
Nice what happened for category instead.
Doing as you wrote returns "Contrib.Taxonomies.Fields.TaxonomyField", so I have looked at that class and discovered that can loop on the member property called Terms.
Done the change, I stopped for another error
Cannot implicitly convert type 'Orchard.ContentManagement.Utilities.LazyField<System.Collections.Generic.IEnumerable<Contrib.Taxonomies.Models.TermPart>>' to 'System.Collections.IEnumerable'. An explicit conversion exists (are you missing a cast?)
I have finally searched on google for "orchard lazyfield class" and the second result got my attention.
http://skywalkersoftwaredevelopment.net/orchard-development/lazyfield-t

Double thanks!

Note: the final working code is the following
var summaryField = contentItem.MyContentType.Summary.Value;
string category = "";
foreach (dynamic term in contentItem.MyContentType.Category.Terms.Value) {
    category += term.Name
}
May 18, 2013 at 7:48 AM
This is exactly what i was looking for!!