Skip to content

Draft topic

草案主题

This document targets Orchard developers. Using only the admin dashboard, you will create a gallery that renders thumbnails of images that you select from the Media folder. Afterward, you can customize the gallery with CSS and an alternate HTML template.

本文档针对Orchard开发人员。仅使用管理仪表板，您将创建一个库，用于呈现从“媒体”文件夹中选择的图像缩略图。之后，您可以使用CSS和备用HTML模板自定义库。

Create the Image Gallery Content Type

创建图像库内容类型

  • From the admin dashboard, click Content Definition.

  • 在管理仪表板中，单击内容定义。

  • The Manage Content Types page will open.

  • “管理内容类型”页面将打开。

  • Click Create new type.

  • 单击创建新类型。

  • Give the new type a Display Name (e.g. My Image Gallery).

  • 为新类型指定显示名称（例如我的图像库）。

  • Click Create.

  • 单击创建。

New content type

  • When you click create, Orchard will open the Add Parts page.

  • 单击“创建”时，Orchard将打开“添加部件”页面。

  • Check Widget, then click Save.

  • 检查小部件，然后单击保存。

  • The Edit Content Type page will now show.

  • 现在将显示“编辑内容类型”页面。

  • Change the Stereotype to Widget and click Save.

  • 将 Stereotype 更改为Widget，然后单击 Save 。

  • Then click Add Field.

  • 然后单击添加字段。

  • The Add New Field page will open.

  • 将打开“添加新字段”页面。

  • Choose Media Library Picker Field.

  • 选择媒体库选择器字段。

  • Name the field (e.g. My Media Library Picker Field.)

  • 为该字段命名（例如我的媒体库选择器字段。）

  • Click Save.

  • 点击保存。

Add a new field

  • After you click save, click on the down carat beside the new field.

  • 单击“保存”后，单击新字段旁边的向下克拉。

  • Check "Allow multiple content items."

  • 选中“允许多个内容项”。

  • Click Save at the bottom of the page.

  • 点击页面底部的保存。

  • You will now have the following Content Type. It has both a Widget Part and a Media Library Picker Field.

  • 您现在将拥有以下内容类型。它有一个小部件部分和一个媒体库选择器字段。

Finished content type

Add the Widget a Zone

添加小组件区域

  • From the admin dashboard, click on Widgets.

  • 在管理仪表板中，单击 Widgets 。

  • Click Add beside any zone (e.g. BeforeContent.)

  • 单击在任何区域旁边添加（例如BeforeContent。）

  • The Choose a Widget page will open.

  • 将打开“选择小组件”页面。

  • Choose the Widget that you just created (i.e. My Image Gallery.)

  • 选择刚刚创建的小部件（即我的图像库。）

  • The Add Widget page will open.

  • Add Widget页面将打开。

  • Give the Widget a Title (e.g. My Gallery Widget.)

  • 给小部件一个标题（例如我的画廊小部件。）

  • Click the Add button below the "My Media Library Picker Field" label.

  • 单击“我的媒体库选择器字段”标签下方的添加按钮。

  • The Media Library Picker modal will show.

  • 媒体库选择器模式将显示。

In this screen shot, we have already imported some images and created some folders. You can create folders using the Create Folder button. You can import images by opening a folder and clicking the Import button. This tutorial assumes you know how to do that.

在此屏幕截图中，我们已导入一些图像并创建了一些文件夹。您可以使用创建文件夹按钮创建文件夹。您可以通过打开文件夹并单击导入按钮来导入图像。本教程假设您知道如何执行此操作。

Finished content type

  • Select the images that you want to display.

  • 选择要显示的图像。

    • Tip: Use ctrl + click to select multiple images at once.

  • Then click the Select button in the lower left of the modal (it's a bit hidden.)

  • 然后单击模态左下角的选择按钮（它有点隐藏。）

  • The Add Widget page will again display. Click Save.

  • Add Widget页面将再次显示。点击保存。

  • Visit the front end of your site to see the scaffolding of an image gallery.

  • 访问您网站的前端，查看图片库的脚手架。

Customize the Look of the Gallery

自定义图库的外观

  • Turn on Shape Tracing

  • 打开形状跟踪

  • Create an Alternate for the Fields_MediaPickerLibrary

  • 为Fields_MediaPickerLibrary创建一个替代

  • Edit the HTML and add CSS.

  • 编辑HTML并添加CSS。

  • Here are example alternate templates, courtesy of Bertrand Le Roy's Codeplex Reply

  • 以下是Bertrand Le Roy的[Codeplex Reply]（https://orchard.codeplex.com/discussions/454808）提供的示例替代模板

Fields.MediaLibraryPicker.cshtml

Fields.MediaLibraryPicker.cshtml 

@using Orchard.ContentManagement

@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

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>