Umbraco 官方技术文档 翻译 四 、Creating media-创建媒体

来源:互联网 发布:青天白日t恤 淘宝 编辑:程序博客网 时间:2024/05/20 14:20

Creating media
创建媒体
Media in Umbraco is handled in much the same way as content. Instead of defining Document Types you define Media Types that act as the base for media items. Unlike with normal content there are a three default Media Types:
在Umbraco中媒体的处理方式和content是一样的。只是不是定义文档类型,而是为媒体项目定义媒体类型。与content不同的是,媒体有三个默认的类型:
  • Folder
  • Image
  • File
The Folder Media Type is a container for organizing media items in the media tree. TheImage Media Type is used for uploading and storing images and theFile Media Type is used to upload and store other files in the Media section. This means you don't have to define your own Media Types to start using the section. You've already got the tools for organizing and uploading media.
媒体类型的Folder是一个容器,用来在项目树上组织媒体内容。Imag类型是用来上传和存储图像,File类型是用来上传和存储其他文件。这意味着你不需要定义自己的媒体类型,才能开始使用Media部分,你已经有了组织和上传Media的工具。

Creating a folder
创建一个文件夹
It is always a good idea to start by creating a folder for Media items. Make sure to name your folders in a way that makes it easy for editors to upload files and images in the right place.

为媒体项目创建一个文件夹总是一个好主意。确保文件夹的命名能让它容易被编辑者上传文件和图片到正确的位置。
To create a media folder go to the Media section and click the menu icon to the right ofMedia, alternatively you can right click the Media node and choose create. This will bring up the create dialogue. Pick theFolder, enter a name and press save.

创建一个媒体文件夹,选择Media section ,单击Medi右边的菜单图标 ,或者您可以右键单击Medi节点并选择创建。这将弹出创建对话框。选择Folder ,输入一个名称并点击save

Uploading images and files
上传图片和文件

There are a couple different ways to do this. You can use the context menu as when creating a folder. Click the menu icon next to the folder and chooseImage or File, enter a name for your media item and click theChoose File button.

An easier way to do it is to simply drag and drop the file to the upload area. Umbraco will automatically detect if it is an image or a file and create a media item in the folder. You can even drop entire folders (with subfolders) and the folder and file structure will be recreated. Alternatively you can click- or click here to choose files and get a standard OS file picker dialog.

The default Image Media Type has 5 properties that will be populated once the the image is uploaded. These areUpload Image, Width, Height, Size and Type and can be viewed in theMedia section and accessed in your templates.
有几种不同的方法可以做到这一点。您可以在创建一个文件夹的时候使用context 菜单,单击文件夹 旁边的菜单图标 并选择ImageFile ,为您的媒体项目 输入一个名称,然后单击Choose File 按钮。

一个更简单的方法就是, 简单地将文件拖拽到上传区域。Umbraco会自动检测,如果它是一个图像还是一个文件,并在文件夹中创建一个媒体项目。你甚至可以把整个文件夹(以及子文件夹)拖过去, 这个文件夹的完整文件结构将被重新建立起来。或者你可以点击- or click here to choose files 来打开操作系统的文件选择对话框。

默认的Image 媒体类型有5个属性,一旦上传图像将自动填充好。这些都是Upload Image,Width, Height, Size 和 Type ,可以在Media section看到, 在templates 中使用。

Organizing and editing media items
组织和编辑媒体项目

The default view for the media section is a card view that let's you preview the images and files.

You can select multiple media items and do bulk operations (delete/move) by clicking the image. To edit properties on a media item simply click the blue bar at the bottom of the item.
媒体部分的默认视图是一个卡片视图, 可以让你预览图片和文件。

您可以通过单击图像 选择多个媒体项目,进行批量操作(删除/移动)。只需单击项目底部的蓝色栏就可以编辑属性项。


You can switch to a list view by clicking the view toggle next to the search field and selecting the listview.
你可以点击搜索字段 旁边的视图切换(view toggle ) 来切换到列表视图,,然后选择列表视图。



Using media items in content
在内容中使用媒体项目

By adding a Media Picker property to a Document Type the editor will have the ability to select media items in theContent section.

TIP: The Upload File property on the images use the Image Cropper Data Type. If crops are added to this you can adjust the individual crops on the media item and access them in templates. You can add crops by editing the Upload File property on the Image media type in the Settings section or in the Developer section under Data Types.
通过给文档类型 添加一个Media Picker属性,编辑器就可以在Content 部分 添加媒体项目。

提示:图片上的Upload File 属性使用Image Cropper 数据类型。如果图片被添加到其中,你就可以在Media项目中调整图片,再模板中使用了。您可以在Developer section 下面的Data Types 中或者在Settings section 中的Image media type ,通过编辑Upload File 属性 来添加图片。

Creating a Media Type
创建一个媒体类型

You can create your own Media Types and add tabs, properties, and control the structure of the Media tree just as with Document Types. This means you can store information that is specific to the media on the media item itself.

A Media Type is created in the Settings section using the Media Type editor.

Go to the Settings section. On theMedia Types node click the menu icon (or right click the node) to bring up the context menu. Here you can choose between creating a media type or a folder.

TIP: Having different folders for different media types makes it possible to restrict where media items can be created. Only allowing PDF uploads in a certain folder or employee images in another makes it easier for editors to keep the Media section organized.

Choose New Media Type. This will open the Media Type editor. It is basically the same editor used for creating Document Types, the difference is that Media Types define items for Media section and you do not have the ability to assign a template for the Media Type.
您可以创建自己的媒体类型,添加标签、属性和控制媒体的结构树,就像操作文档类型一样。这意味着您可以存储媒体项目本身的特定信息。

一个媒体类型是在Settings 部分,通过使用媒体类型编辑器创建 的。

Settings 部分。在Media Types 节点上单击菜单图标(或右键单击节点),来弹出上下文菜单。在这里你可以选择创建一个媒体类型或一个文件夹。

提示:给不同的媒体类型 创建不同的文件夹,可以在创建项目时限制媒体项目的上传位置。比如在某个文件夹只允许上传PDF,或另一个文件夹中只保存员工图片,这样更明朗。

选择New Media Type 。这将打开媒体类型编辑器。它基本上是和用于创建文档类型 一样的编辑器, 所不同的是,媒体类型定义不需要分配一个媒体类型的模板。 

 
Name the Media Type "Employee Image". Choose an icon (user) by clicking the icon to the left of the name.
命名媒体类型为“Employee Image ”。通过点击类型名称框左边的图标,来选择一个图标(user )。

Adding tabs
添加标签

Before we start adding properties to the Media Type we need to create a tab to put these on.

Go to the Tabs tab and create a tab called "Image".
在我们将属性添加到媒体类型中之前 , 我们需要创建一个选项卡来放置这些属性。

Tabs 选项卡并创建一个名为“Image ”的标签。

Adding properties
添加属性
We need to add the same properties as on the default Image Media Type. These are:
我们需要为默认Image 媒体类型添加相同的属性。如下:
  • umbracoFile
  • umbracoWidth
  • umbracoHeight
  • umbracoBytes
  • umbracoExtension

On the Image tab click Add new property. Name it "Upload image" and change the alias to "umbracoFile".

Click Add editor, search for "cropper" and chooseImage cropper under Available editors. This will create a new Image Cropper Data Type. The name of the new Data Type type is a bit long so rename it to "Employee Image Cropper".

Add two new crops called "Thumbnail" (200px x 350px) and "wideThumbnail" (350px x 200px).
在图像选项卡上单击Add new propert 。命名为“Upload image ”,别名改为“umbracoFile”。

点击Add editor ,搜索“cropper ”并在Available editors 中选择Image cropper 。这将创建一个新的Image Cropper 数据类型。新的数据类型的名称有点长,所以将它重命名为“Employee Image Cropper ”。

添加两个图片,命名为“Thumbnail ”(200 px x 350 px)和“wideThumbnail”(350 px x 200 px)。


Name the remaining four properties "Width", "Height", "Size" and "Type" and give them the aliases seen above. They should all use theLabel editor. As mentioned before these properties will automatically be populated once an image has been uploaded.
名字的剩下的四个属性是"Width", "Height", "Size" 和"Type" ,见上表分别给他们加个别名。他们都应该使用Label 编辑器。正如前面提到的,一旦上传图像这些属性将自动填充。

Defining a Media Type folder
定义一个媒体类型文件夹
Next up we'll create a folder to hold the employee images. We could use the existingFolder Media Type but that would mean editors can upload employee images to any folder of that type. If we create a folder specifically for employee images there is only one place to put them thus making it easier to have an organized Media section.
接下来,我们将创建一个文件夹,来保存员工的图像。我们可以使用现有的Folder 媒体类型,但那将意味着一个编辑人员可以上传员工图片到任何类型的文件夹中。如果我们专门为员工图像 创建一个文件夹, 这样有一个明确的地方放着图像,从而使媒体部分更有组织性。

Structure and inheritance
结构和继承

Go back to the Settings and create a new Media Type and name it "Employee Images". Select the folder icon by clicking the icon to the left of the name.

We want the same basic functionality (same properties and tabs) as the Folder Media type and that can be achieved by clicking Compositions and selecting the Folder Media Type. Now Employee images will inherit tabs and properties from the Folder Media Type.
回到Settings ,创建一个新的媒体类型,命名为“Employee Images ”。通过点击名称左边的图标 来选择文件夹图标。

我们希望新建的文件夹拥有 和Folder 媒体类型一样的基本功能(相同的属性和标签), 可以通过选择Compositions 中的Folder 媒体类型来实现 。现在员工的图像文件夹将会继承Folder 的媒体类型的标签和属性。


Finally we need to allow the employee images in our new folder. Go to thePermissions tab. Click Add child underEmployee images.

All that is left to do is to define where the folder can be created. We want to create the folder in the root of the Media section so select theAllow at root option at the top of the Permission tab.
最后我们需要允许员工图片文件夹出现在我们的新文件夹下面。去Permissions 选项卡。单击Employee images 下的Add child 来完成。

剩下要做的就是定义文件夹可以在哪儿被创建。我们想要在根媒体部分 创建一个文件夹,所以选择Permission 选项卡顶部的Allow at root 选项。

Creating the folder and media items
创建文件夹和媒体项目

Go to the Media section and click the menu icon next to Media and select theEmployee images folder. Name it "Employee Images" and click create.

To start uploading images to the folder click the menu icon on theEmployee images node or use the Create button in the content view and selectEmployee image.

Remember you can uncheck the Allow at root option on theEmployee images Media Type to prevent editors from creating multiple folders of this type. This will not affect created folders, just disable the creation of new ones
Media 部分并单击旁边的菜单图标,选择Employee images文件夹。命名为“Employee Images ”, 单击create。

通过点击Employee images节点中的menu图标来上传图片,或者点击Employee images中的Create按钮。

记住你可以Employee images 媒体类型 取消Allow at root ,以防止编辑人员创建多个同种类型的文件夹。这不会影响创建文件夹,只是禁用创建一个同样的新的文件夹。

Cropping the images
裁剪的图像


If you select an image that has been uploaded to this folder you'll see the full image and the two crops we have defined below. Moving the blue focal point on the on the image will update the crops to focus accordingly. You can also edit the individual crops by selecting them and moving the image or adjust the slider to zoom.
如果你选择一个已经上传到这个文件夹的图片,你会看到完整的图片和下面的两种我们已经裁剪好的 图片。移动图像上的蓝色的点,将会更新相应的裁剪的图片的焦点。你可以通过选择缩放图像或调整滑块来生成你想要的缩略图。

最后附上一个其他人翻译的官方的入门文档的链接:http://www.cnblogs.com/maoyazhi/category/703432.html


1 0
原创粉丝点击