Grav-メディア

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

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

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

以下は、Grav-でサポートされているメディアファイルタイプです。

  • Image − jpg、jpeg、png

  • Animated Image − gif

  • vectorized Image − svg

  • Video − mp4、mov、m4v、swf

  • Data/information − txt、doc、pdf、html、zip、gz

表示モード

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

  • Source −画像、ビデオ、またはファイルの視覚的表示です。

  • text −メディアファイルのテキスト表示。

  • thumbnail −メディアファイルのサムネイル画像。

サムネイルの検索

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

  • In the same folder where your media files exists[media-name]。[media-extension] .thumb。[thumb-extension]; ここで、media-nameとmedia-extensionは実際のメディアファイルの名前と拡張子であり、thumb-extensionはイメージメディアタイプでサポートされている拡張子です。

  • User Folder − user / images / media / thumb- [media-extension] .png; ここで、media-extensionは実際のメディアファイルの拡張子です。

  • System foldersystem / images / media / thumb- [media-extension] .png; ここで、media-extensionは実際のメディアファイルの拡張子です。

ライトボックスとリンク

Gravは、ライトボックスプラグインが読み取る要素の一部を含むアンカータグの出力を提供します。プラグインに含まれていないライトボックスライブラリを使用する場合は、次の属性を使用して独自のプラグインを作成できます。

  • rel−ライトボックスリンクを示します。値はライトボックスです。

  • href −メディアオブジェクトへのURLです。

  • data-width −ユーザーが選択したライトボックスの幅を設定します。

  • data-height −ユーザーが選択したライトボックスの高さを設定します。

  • data-srcset −イメージメディアの場合、srcset文字列が使用されます。

行動

Gravのビルダーパターンは、メディアを処理し、複数のアクションを実行するために使用されます。すべてのメディアでサポートされているアクションにはいくつかの種類がありますが、特定のメディアでのみ使用できるアクションもあります。

一般

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

シニア番号 アクションと説明
1 url()

url()は返します raw url path メディアに。

2 html([title] [、alt] [、classes]

出力には、メディア用の有効なhtmlタグが含まれます。

3

display(mode)

異なる表示モードを切り替えるために使用されます。表示モードに切り替えると、すべてのアクションがリセットされます。

4 リンク()

リンクの前に適用されたアクションは、リンクのターゲットに適用されます。

5 ライトボックス([幅、高さ])

ライトボックスはリンクアクションに似ていますが、いくつかの追加属性を持つリンクを作成するという少しの違いがあります。

6 サムネイル

任意のタイプのメディアファイルのページとデフォルトの間で選択します。これは手動で行うことができます。

画像に対するアクション

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

シニア番号 アクションと説明
1 サイズ変更(幅、高さ、[背景])

サイズを変更して、画像の幅と高さを変更します。

2 forceResize(幅、高さ)

元の比率に関係なく、必要に応じて画像を引き伸ばします。

3 CropResize(幅、高さ)

幅と高さに応じて、画像のサイズを小さくしたり大きくしたりします。

4 クロップ(x、y、幅、高さ)

xとyの位置から幅と高さで表されるように画像を切り抜きます。

5 CropZoom(幅、高さ)

リクエストに応じて画像をズームおよびトリミングするのに役立ちます。

6 品質(値)

画質の値を0〜100の範囲で設定します。

7 negate()

色は否定で反転します。

8 明るさ(値)

とともに value-255+255、明るさフィルターが画像に追加されます。

9 コントラスト(値)

-100から+100の値は、画像にコントラストフィルターを適用するために使用されます。

10 グレイスケール()

グレースケールフィルターは、画像の処理に使用されます。

11 エンボス()

エンボスフィルターは、画像の処理にも使用されます。

12 スムーズ(値)

-10から+10の値を設定することにより、スムージングフィルターが画像に適用されます。

13 シャープ()

シャープニングフィルターが画像に追加されます。

14 縁()

エッジ検出フィルターが画像に追加されます。

15 colorize(赤、緑、青)

赤、緑、青の色を調整して画像を色付けします。

16 セピア()

セピアフィルターを追加し、ヴィンテージ感を演出。

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

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

シニア番号 アクションと説明
1 サイズ変更(幅、高さ)

サイズ変更アクションが設定されます 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 高密度ディスプレイ

ファイル名に接尾辞を追加すると、uはページに高密度の画像を追加できます。

2 メディアクエリを含むサイズ

ファイル名に接尾辞を追加すると、uはページに高密度の画像を追加できます。

メタファイル

image1.jpg, archive.zipまたは、その他の参照には変数を設定する機能があるか、メタファイルでオーバーライドできます。これらのファイルは、次の形式になります。<filename>.meta.yaml。たとえば、次のような画像がある場合image2.jpg、次にメタファイルを次のように作成できます image2.jpg.meta.yaml。コンテンツはyaml構文である必要があります。この方法を使用して、任意のファイルまたはメタデータを追加できます。