Rendering media
呈现媒体
Templates can access items in the Media library, to assist in displaying rich content like galleries
模板可以访问媒体库中的项目,来显示丰富的内容,比如画廊
Rendering a single media item
呈现单一媒体项目
A media node is not just a file, but a collection of fields, such width, height and the path to the stored file.
A standard image in the media library is based on the Mediatype image
which provides a number of standard values - if you want to add more, simply edit the media type under settings.
一个媒体节点不仅仅是一个文件, 而是字段的集合, 比如宽度、高度和存储文件的路径。
媒体库中的标准图像是基于Mediatype——image
, 提供了许多标准的值——如果你想添加更多,只需编辑设置下的媒体类型。
@{
var mediaItem = Umbraco.Media(1234);
var height = mediaItem.UmbracoHeight;
var file = mediaItem.UmbracoFile;
}
<img src="@file" height="@height" />
Rendering media item with Image Cropper
呈现图像切割的媒体项目
If the Image Cropper is used as the upload field (umbracoFile) on a media type you can get the cropped image by calling the GetCropUrl
function and referencing a crop alias.
如果图像收割被用作媒体类型中的上传字段(如umbracoFile),你可以通过调用GetCropUrl
函数,传入需要切割的图像的别名,来获取裁剪后的图像。
@{
var mediaItem = Umbraco.Media(1234);
var croppedUrl = mediaItem.GetCropUrl("cropAlias");
}
<img src="@croppedUrl" />
If you want the original, uncropped image.
如果你想要原始的,未切割的图像:
@{
var mediaItem = Umbraco.Media(1234);
var file = mediaItem.umbracoFile.src;
}
<img src="@file" />
Working with stylesheets and javascript
使用样式表和javascript
Bundling & Minification for JavaScript and CSS
引用&压缩JavaScript和CSS
You can of course use whatever tools you are comfortable with for bundling & minification but it’s worth noting that Umbraco ships with the ClientDependency Framework which offers simple runtime bundling & minification.
You can bundle and minify as follows in a view template file.
你当然可以使用任何工具你轻松地引用和压缩,但值得注意的是,Umbraco附带ClientDependency框架提供了一个简单的运行时的绑定和压缩。
你可以在视图模板文件中进行引用和压缩,如下:
@using ClientDependency.Core.Mvc
@using ClientDependency.Core
@{
Html.RequiresJs("~/scripts/Script1.js", 1);
Html.RequiresJs("~/scripts/Script2.js", 2);
Html.RequiresCss("~/css/style.css");
}
<html>
<head>
@Html.RenderCssHere()
@Html.RenderJsHere()
</head>
Full details of the ClientDependency Framework can be found here: http://github.com/Shandem/ClientDependency