Grav-メディア

メディアファイルには、画像、ビデオ、その他多くのファイルなど、さまざまな種類の表示コンテンツが含まれています。 Gravはこれらのファイルを自動的に検出して処理し、どのページでも使用できるようにします。ページの組み込み機能を使用して、メタデータにアクセスし、メディアを動的に変更できます。

*Smart-caching* は、必要に応じてキャッシュ内で生成されたメディアを作成するGravによって使用されます。 この方法では、メディアを何度も生成する代わりに、すべてキャッシュバージョンを使用できます。

サポートされているメディアファイル

Gravでサポートされているメディアファイルタイプは次のとおりです-

画像-jpg、jpeg、png
アニメーション画像-gif
ベクトル化された画像-svg
ビデオ-mp4、mov、m4v、swf
データ/情報-txt、doc、pdf、html、zip、gz

表示モード

以下は、Gravの表示モードのいくつかのタイプです-

ソース-画像、ビデオ、またはファイルの視覚的な表示です。
text -メディアファイルのテキスト表示。
thumbnail -メディアファイルのサムネイル画像。

サムネイルの特定

あなたは3つの場所を使用してサムネイルを見つけることができます-

メディアファイルが存在する同じフォルダ内-_ [media-name]。[media-extension] .thumb。[thumb-extension]; _ここで、media-nameとmedia-extensionは実際のファイルの名前と拡張子です。メディアファイルとサム拡張子は、画像メディアタイプでサポートされている拡張子です。
* User Folder-* _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のBuilderパターンは、メディアの処理、複数のアクションの実行に使用されます。すべてのメディアでサポートされるアクションにはいくつかの種類がありますが、特定のメディアでのみ利用できるアクションがいくつかあります。

全般

メディアタイプに使用できる一般的なアクションには6つのタイプがあります。各アクションについて以下に説明します。

Sr.No.	Action & Description
1	url() url（）は* raw URLパス*をメディアに返します。
2	html([title[, alt][, classes]] 出力には、メディア用の有効なhtmlタグが含まれます。
3	display(mode) 異なる表示モードを切り替えるために使用されます。表示モードに切り替えると、すべてのアクションがリセットされます。
4	link() リンクの前に適用されるアクションは、リンクのターゲットに適用されます。
5	lightbox([width, height)] ライトボックスはリンクアクションに似ていますが、いくつかの追加属性を持つリンクを作成するというわずかな違いがあります。
6	Thumbnail 任意のタイプのメディアファイルのページとデフォルトを選択します。これは手動で行うことができます。

画像に対するアクション

次の表に、画像に適用されるいくつかのアクションを示します。

Sr.No.	Action & Description
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() セピアフィルターが追加され、ビンテージの外観が得られます。

画像とビデオのアニメーションとベクトル化

アニメーション化およびベクトル化されたアクションは、画像およびビデオで実行されます。以下は、画像とビデオで行われるアクションです。

Sr.No.	Action & Description
1	resize(width, height) サイズ変更アクションは、 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)

上記のコードは、次のように出力を生成します-

Grav Media

レスポンシブ画像

次の表に、レスポンシブ画像のいくつかのタイプを示します。

Sr.No.

Action & Description

1

Higher density displays

ファイル名にサフィックスを追加すると、ページに高密度の画像を追加できます。

2

Sizes with media queries