スマートCDNでアセットを埋め込む

Brandfolder の Smart CDN を使用すると、Web 全体にアセットを埋め込み、特定のニーズに合わせて即座にフォーマットすることができます。CDN リンクにより、コンテンツには常にBrandfolderアセットに加えられた最新の変更が反映されます。

CDN リンクはBrandfolderに固有です。Brandfolder内でアセットを移動しても、CDN リンクは維持されます。ただし、アセットを別のBrandfolderに移動すると、URL が変更され、新しい CDN リンクを取得する必要があります。

CDNを有効にする

所有者と管理者は、アカウントの SAML と SSO を有効にすることができます。

1. 選択設定 > 一般設定
2. 選択してください高度なタブ
3. 確保するCDN埋め込みリンクは有効です。

保留中、期限切れ、下書き、または表示専用のアセットでは、CDN リンク機能は無効になります。の埋め込みタブと切り取られた CDN リンクアセットが承認された場合にのみ表示されます。

単一のアセットを埋め込むにはどうすればよいですか?

ウェブサイトまたはランディング ページに 1 つのアセットを埋め込むと、複数のページにわたるアセットの更新が簡単になり、すべてのユーザーがアクセスできるようになります。

1. アセット モーダルの 1 つを開きます。
2. 選択してください埋め込みタブ。
3. URLをコピーして貼り付けます。

CDN URL 埋め込みオプション:

• CDN リンク - 添付ファイル: これにより、ユーザーは位置を気にせずに添付ファイルを埋め込むことができます。これは添付ファイルへの直接リンクであり、アセットの最も最適化されたバージョンです。すべての添付ファイル URL に、カスタム パラメータ セットをデフォルトで追加することもできます。

追加の CDN リンクで利用可能なその他のオプション:

• CDN リンク - アセット:他の添付ファイルとの関係での位置に基づいて更新される添付ファイルを埋め込みます。
• CDN リンク - 添付ファイル (元のファイル) : この URL は、事前定義された変換や最適化 (パラメータ) なしで、元の添付ファイル CDN URL を参照します。
• CDN リンク - フレーム: アセットが入っているコンテナに基づいて自動的にサイズを変更します。

このリンクを のような画像タグ内に配置することができ、アセットを更新すると、リンクがどこにあっても更新されます。アセットに複数の添付ファイルがある場合、一番上の位置にある添付ファイルがこのリンクを使用して表示されます。

カスタム プリセット CDN リンク

スマート CDN プリセットは、自動的にフォーカスされ、自動的にトリミングされた CDN リンク形式でレンディションを自動的に作成します。有効にすることもできますカスタムトリミングプリセット埋め込みタブに表示されます。プリセットを有効にしたら、カスタムプリセットCDNリンクメニュー。選択してくださいリンクをコピー選択したプリセットの横にあるボタンをクリックし、目的の場所に貼り付けます。

高度なスマートCDN機能

資産の切り抜き

画像を希望のサイズにトリミングし、トリミングした画像の CDN リンクをコピーできます。 

変換と変換:

URL のパラメータを調整することで、切り抜かれた画像の CDN リンクを取得することもできます。

たとえば、次のようなスマートCDN URLがあるとします。 https://cdn.brandfolder.io/YUHW9ZNT/as/6skcfbkq/brandfolder_icon_aqua.png 。

特定の寸法の同じ画像が必要な場合は、次のように URL で指定します。 https://cdn.brandfolder.io/YUHW9ZNT/as/6skcfbkq/brandfolder_icon_aqua.png?width=150 。

PNGではなくJPG が必要ですか? URL の末尾の拡張子を変更するだけです。 https://cdn.brandfolder.io/YUHW9ZNT/as/6skcfbkq/brandfolder_icon_aqua.jpg

ファイルのより大きなバージョンが必要ですか? URLの高さまたは幅のパラメータを増やして、 &pad=真元の画像に空白のパディングを追加します。

透明なアセットの場合、一部のデフォルトのブラウザ ビューアーでは背景 (通常は白) が自動的に入力されます。 

自動延長:

Brandfolder CDN では、v1 では .auto、v2 では auto=webp の拡張子を使用できます。画像を読み込むブラウザに最適な形式が自動的に選択されます。これには、WEBP 形式を使用して画像を送り返すことが含まれます。これにより、画像のサイズが損失なく縮小され、サイトでの画像の読み込みが高速化されます。

• v1: https://cdn.brandfolder.io/YUHW9ZNT/as/6skcfbkq/brandfolder_icon_aqua.auto
• v2: https://cdn.brandfolder.io/YUHW9ZNT/as/6skcfbkq/brandfolder_icon_aqua?auto=webp

Smart CDN を使用すると、最初の添付ファイルだけでなく、アセット内の任意の添付ファイルにリンクできます。アセットに複数の添付ファイルがあり、アセットに 4 番目の添付ファイルが必要な場合は、CDN URL の末尾に ?position=4 を追加して指定します。 https://cdn.brandfolder.io/C0KGG2P6/as/pd20zo-6xxwds-g0sj9j/CDN%20Example.png?position=3 。

上記を任意に組み合わせて CDN リンクを変更し、ユースケースに必要なBrandfolder添付ファイルを正確に取得します。

ライブ更新:

Brandfolder内のアセットを更新するたびに、埋め込まれた関連する Smart CDN リンクも更新され、その変更が反映されます。

自動有効期限:

Brandfolder内のアセットを期限切れにしたり、承認を取り消したり、削除したりすると、Smart CDN リンクも自動的に期限切れになります (最大 24 時間キャッシュされたままになる場合があります)。

ビデオアセットの埋め込み

ビデオアセットの埋め込みは画像アセットとは少し異なります。Brandfolder は、ビデオ プレーヤーが埋め込まれた基本的な iframe を提供します。ユーザーは、iframe のサイズと、ビデオのオプション パラメータの数を制御できます。

埋め込みコードの例

ループ

再生終了後にビデオをループ再生できるようにします。

• loop
• デフォルト: false
• オプション: ブール値 - true または false

ミュート

プレーヤーのロード時にサウンドをミュートするかどうかを決定します。これは、ブラウザの自動再生制限により自動再生設定を使用する場合に便利です。

• muted
• デフォルト: false
• オプション: ブール値 - true または false

自動再生

ロード時にビデオを自動的に再生します。

• autoplay
• デフォルト: false
• オプション: ブール値 - true または false

Brandfolder を使用して、ページの読み込み時にビデオを自動再生するのは簡単な問題ではありません。これは、動画を自動再生したくないというユーザーの要望にブラウザベンダーが応えたことから生じています。多くのブラウザ (Chrome を含む) は音声付きのビデオを自動再生しないため、最も信頼性の高い方法は autoplay=true&muted=true を設定することです。

注意してください消去この機能を使用するときは資産を！