Grav - 媒體

媒體檔案包含不同型別的顯示內容，例如影像、影片和許多其他檔案。Grav 自動查詢和處理這些檔案，以便任何頁面都可以使用。透過使用頁面的內建功能，您可以訪問元資料並動態修改媒體。

Grav 使用智慧快取，在必要時建立快取生成的媒體。這樣，所有使用者都可以使用快取版本，而不是反覆生成媒體。

支援的媒體檔案

以下是 Grav 支援的媒體檔案型別：

影像 - jpg, jpeg, png
動畫影像 - gif
向量影像 - svg
影片 - mp4, mov, m4v, swf
資料/資訊 - txt, doc, pdf, html, zip, gz

顯示模式

以下是 Grav 中幾種型別的顯示模式：

原始檔 - 影像、影片或檔案的視覺化顯示。
文字 - 媒體檔案的文字表示。
縮圖 - 媒體檔案的縮圖。

查詢縮圖

您可以從三個位置查詢縮圖：

與媒體檔案位於同一資料夾中 - `[media-name].[media-extension].thumb.[thumb-extension]`；其中，`media-name` 和 `media-extension` 是實際媒體檔案的名稱和副檔名，`thumb-extension` 是影像媒體型別支援的副檔名。
使用者資料夾 - `user/images/media/thumb-[media-extension].png`；其中，`media-extension` 是實際媒體檔案的副檔名。
系統資料夾 - `system/images/media/thumb-[media-extension].png`；其中，`media-extension` 是實際媒體檔案的副檔名。

燈箱和連結

Grav 輸出一個錨標籤，其中包含燈箱外掛讀取的一些元素。如果您想使用外掛中未包含的燈箱庫，則可以使用以下屬性建立自己的外掛。

rel - 指示燈箱連結。值為 lightbox。
href - 媒體物件的 URL。
data-width - 設定使用者選擇的燈箱寬度。
data-height - 設定使用者選擇的燈箱高度。
data-srcset - 在影像媒體情況下使用 srcset 字串。

操作

Grav 中的構建器模式用於處理媒體，執行多個操作。某些操作適用於所有媒體，而某些操作僅適用於特定媒體。

常規

有 6 種類型的常規操作可用於媒體型別。下面解釋每個操作。

序號	操作和描述
1	url() url() 返回媒體的原始 url 路徑。
2	html([title][, alt][, classes] 輸出將包含媒體的有效 html 標籤。
3	display(mode) 用於在不同的顯示模式之間切換。當您切換到顯示模式時，所有操作都將重置。
4	link() 在連結之前應用的操作將應用於連結的目標。
5	lightbox([width, height]) Lightbox 類似於 link 操作，但略有不同，因為它建立的連結有一些額外的屬性。
6	縮圖為任何型別的媒體檔案選擇頁面和預設值之間的值，這可以手動完成。

影像操作

下表列出了應用於影像的一些操作。

序號	操作和描述
1	resize(width, height, [background]) 透過調整大小更改影像的寬度和高度。
2	forceResize(width, height) 無論原始比例如何，都根據需要拉伸影像。
3	cropResize(width, height) 根據其寬度和高度將影像調整為較小或較大的尺寸。
4	crop(x, y, width, height) 根據 x 和 y 位置的寬度和高度裁剪影像。
5	cropZoom(width, height) 幫助根據請求縮放和裁剪影像。
6	quality(value) 設定影像質量的值，範圍為 0 到 100。
7	negate() 顏色在反轉中反轉。
8	brightness(value) 使用值從-255到+255，將亮度過濾器新增到影像。
9	contrast(value) 使用 -100 到 +100 的值將對比度過濾器應用於影像。
10	grayscale() 使用灰度過濾器處理影像。
11	emboss() 還使用浮雕過濾器來處理影像。
12	smooth(value) 透過設定 -10 到 +10 的值將平滑濾鏡應用於影像。
13	sharp() 將銳化濾鏡新增到影像。
14	edge() 將邊緣查詢濾鏡新增到影像。
15	colorize(red, green, blue) 透過調整紅色、綠色和藍色顏色來給影像著色。
16	sepia() 新增棕褐色濾鏡以提供復古外觀。

動畫和向量化影像和影片

對影像和影片執行動畫和向量化操作。以下是對影像和影片進行的操作。

序號	操作和描述
1	resize(width, height) resize 操作將設定width、height、data-width和data-height屬性。

組合

Grav 具有影像處理功能，使影像處理變得容易。

![My New Image](/images/maxresdefault.jpg?negate&cropZoom = 500, 500&lightbox & cropZoom = 600,
200&contrast = -100&sharp&sepia)

以上程式碼將生成如下所示的輸出：

自適應影像

下表列出了幾種型別的自適應影像。

序號	操作和描述
1	更高密度的顯示向檔名新增字尾，您可以向頁面新增更高密度的影像。
2	使用媒體查詢的尺寸向檔名新增字尾，您可以向頁面新增更高密度的影像。

元檔案

image1.jpg、archive.zip或任何其他引用都能夠設定變數或被元檔案覆蓋。這些檔案採用<filename>.meta.yaml的格式。例如，如果您有一個名為image2.jpg的影像，則可以建立名為image2.jpg.meta.yaml的元檔案。內容必須採用 yaml 語法。您可以使用此方法新增任何檔案或元資料。

列印頁面