

Media (OrchardCore.Media)

媒体（OrchardCore.Media）

The Media modules provides a UI to upload and organize binary files that can be used while creating content.

媒体模块提供用于上载和组织可在创建内容时使用的二进制文件的UI。

The media processing liquid filters can also create custom sized images.

媒体处理液体过滤器还可以创建定制尺寸的图像。

HTML filters

HTML过滤器

The following filters allow for media manipulation:

以下过滤器允许媒体操作：

asset_url

ASSET_URL

Returns the URL of a media based on its location in the media library.

根据媒体库中媒体库的位置返回媒体的URL。

Input

输入

{{ 'animals/kittens.jpg' | asset_url }}

or when using your added content

或使用添加的内容时

{{ Model.ContentItem.Content.YourContentType.YourMediaField.Paths.first | asset_url }}

Output

产量

/media/animals/kittens.jpg

img_tag

Renders an <img src /> HTML tag.

呈现一个<img src />HTML标记。

Input

输入

{{ 'animals/kittens.jpg' | asset_url | img_tag }}

Output

产量

<img src="/media/animals/kittens.jpg" />

Options

选项

alt (Default)

alt（默认）

The alternate text attribute value

备用文本属性值

Image resizing filters

图像调整大小过滤器

resize_url

Convert the input URL to create a dynamic image with the specified size arguments.

转换输入URL以使用指定的大小参数创建动态图像。

Input

输入

{{ 'animals/kittens.jpg' | asset_url | resize_url: width:100, height:240 | img_tag }}

Output

产量

<img src="/media/animals/kittens.jpg?width=100&height=240" />

Arguments

参数

The width and height arguments are limited to a specific list of values to prevent

width和height参数仅限于要防止的特定值列表

malicious clients from creating too many variations of the same image. The values can be

恶意客户端无法创建同一图像的太多变体。价值观可以是

16, 32, 50, 100, 160, 240, 480, 600, 1024, 2048.

width (or first argument)

宽度（或第一个参数）

The width of the new image. One of the allowed values.

新图像的宽度。其中一个允许的值。

height (or second argument)

高度（或第二个参数）

The height of the new image. One of the allowed values.

新图像的高度。其中一个允许的值。

mode (or third argument)

模式（或第三个参数）

The resize mode.

调整大小模式。

pad

垫

Pads the resized image to fit the bounds of its container.

将调整大小的图像填充以适合其容器的边界。

If only one dimension is passed, the original aspect ratio will be maintained.

如果只传递一个尺寸，则将保持原始宽高比。

boxpad

Pads the image to fit the bounds of the container without resizing the original source.

将图像填充以适合容器的边界，而无需调整原始源的大小。

When downscaling, performs the same functionality as pad.

缩小时，执行与“pad”相同的功能。

max (Default)

最大（默认）

Constrains the resized image to fit the bounds of its container maintaining the original aspect ratio.

约束调整大小的图像以适应其容器的边界，保持原始高宽比。

min

分

Resizes the image until the shortest side reaches the given dimension. Upscaling is disabled in this mode and the original image will be returned if attempted.

调整图像大小，直到最短边到达给定尺寸。在此模式下禁用升级，如果尝试，将返回原始图像。

stretch

伸展

Stretches the resized image to fit the bounds of its container.

拉伸已调整大小的图像以适合其容器的边界。

Input

输入

{{ 'animals/kittens.jpg' | asset_url | resize_url: width:100, height:240, mode:'crop' }}

Output

产量

<img src="/media/animals/kittens.jpg?width=100&height=240&rmode=crop" />

Razor Helpers

剃刀助手

To obtain the correct URL for an asset, use the AssetUrl helper extension method on the view's base Orchard property, e.g.:

要获取资产的正确URL，请在视图的基础Orchard属性上使用AssetUrl帮助扩展方法，例如：

@Orchard.AssetUrl(Model.Field.Paths[0])

To obtain the correct URL for a resized asset use AssetUrl with the optional width, height and resizeMode parameters, e.g.:

要获得调整大小的资产的正确URL，请使用带有可选width，height和resizeMode参数的AssetUrl，例如：

@Orchard.AssetUrl(Model.Field.Paths[0], width: 100 , height: 240, resizeMode: ResizeMode.Crop)

Razor image resizing tag helpers

Razor图像调整大小标签助手

To use the image tag helpers add @addTagHelper *, OrchardCore.Media to _ViewImports. asset-src is used to obtain the correct URL for the asset and set the src attribute. Width, height and resize mode can be set using img-width, img-height and img-resize-mode respectively. e.g.:

要使用图像标记帮助程序，请将“@addTagHelper *，OrchardCore.Media”添加到_ViewImports。 asset-src用于获取资产的正确URL并设置src属性。可以分别使用img-width，img-height和img-resize-mode设置宽度，高度和调整大小模式。例如。：

<img asset-src="Model.Field.Paths[0]" alt="..." img-width="100" img-height="240" img-resize-mode="Crop" />

Alternatively the Asset Url can be resolved independently and the src attribute used:

或者，可以单独解析Asset Url并使用src属性：

<img src="@Orchard.AssetUrl(Model.Field.Paths[0])" alt="..." img-width="100" img-height="240" img-resize-mode="Crop" />

The Razor Helper is accessible on the Orchard property if the view is using Orchard Core's Razor base class, or by injecting OrchardCore.IOrchardHelper in all other cases.

如果视图使用Orchard Core的Razor基类，或者在所有其他情况下注入OrchardCore.IOrchardHelper，则可以在Orchard属性访问Razor Helper。

CREDITS

学分

ImageSharp

https://sixlabors.com/projects/imagesharp/

Licensed under the Apache License, Version 2.0

根据Apache许可证2.0版获得许可