创建图片园

这篇文章是面向Orchard开发人员的。你将创建一个显示图片缩略图的园，这些图片从图片文件夹中选择。另外，你还可以通过alternate和css自定义显示效果。

创建图片园内容类型

1. 进入内容类型管理页面。
2. 点击"Create new type"。
3. 填入My Image Gallary。
4. 创建。

   

5. 在元件选择页面，选中Widget，保存。
6. 在内容类型编辑页面，Stereotype字段填入Widget。
7. 在内容类型编辑页面，点击Add field。
8. 选择Media Library Picker Field，文本框填入My Media Library Picker Field，保存

1. 点击"My Media Library Picker Field "旁边的小三角。
2. 选中"Allow multiple content items"
3. 保存。

添加部件

1. 点击后台的Widgets菜单项（部件）。
2. 点击AsideFirst块右边的Add
3. 选择上面创建的My Image Gallary部件
4. 输入Title，比如：My Gallery Widget
5. 点击"My Media Library Picker Field"下面的Add按钮，选择图片（注意，按住Ctrl，可以多选图片）

1. 点击发布
2. 访问前端页面

自定义显示样式

1. 打开Shape Tracing特性，查看图片园的Shape名称（Fields_MediaLibraryPicker）。
2. 在你的主题中，创建一个Fields_MediaLibraryPicker的特例模板
3. 编辑模板的HTML和CSS。
4. 下面是一个Fields_MediaLibraryPicker.cshtml模板的例子:

@using Orchard.MediaLibrary.Fields

@using Orchard.Utility.Extensions;

@{

var field = (MediaLibraryPickerField) Model.ContentField;

string name = field.DisplayName;

var contents = field.MediaParts;

}

<section class="media-library-picker-field media-library-picker-field @name.HtmlClassify()">

@foreach(var content in contents)

{

<div>

@Display(BuildDisplay(content, "Summary"))

</div>

}

</section>

Media.Summary.cshtml

@using Orchard.MediaLibrary.Models

@using Orchard.Utility.Extensions;

@{

MediaPart mediaPart = Model.ContentItem.MediaPart;

}

<a href="@mediaPart.MediaUrl">

<img

src="@Display.ResizeMediaUrl(Width: 200, Height: 200, Mode: "crop", Alignment: "middlecenter", Path: mediaPart.MediaUrl)"

alt="@mediaPart.Caption" class="thumbnail"/>

</a>