メディア¶

この章では、画像、動画、アイコンなどのメディア要素を組み込む方法について説明します。

画像¶

データベース内の画像を記録し、後でデザイン/コードで使用します。また、*メディアダイアログ*を通じてエンドユーザーが使用することもできます。

ウェブサイトビルダーは、JPG、GIF、PNG、および SVG の画像ファイル形式をサポートしています。

警告

ウェブサイトビルダーが提供するいくつかのオプションは、レコードに登録されたメディアにのみ適用されます。モジュールフォルダへの相対パスを持つ画像を直接追加すると、いくつかのオプションが表示されないことがあります。

宣言¶

コード内の画像を使用し、ビルダーのギャラリーに含めるようにするには(クライアントが再利用できるように)、次のように宣言します。

/website_airproof/data/images.xml¶

<record id="img_about_01" model="ir.attachment">
    <field name="name">About Image 01</field>
    <field name="datas" type="base64" file="website_airproof/static/src/img/content/img_about_01.jpg"/>
    <field name="res_model">ir.ui.view</field>
    <field name="public" eval="True"/>
</record>

フィールド	説明
ID	コードで使用する画像の名前
名前（name）	画像の説明的な名前
datas	画像の場所

用途¶

通常画像¶

xml テンプレートで、次のように画像を呼び出します:

<img src="/web/image/website_airproof.img_about_01" alt=""/>

img_about_01 は画像に与えたIDです。

背景画像¶

<section style="background-image: url('/web/image/website_airproof.img_about_01');">

会社のロゴ¶

会社のロゴについては、使用方法が少し異なります。最初に`website. ml`ファイルを使用し、適切なテンプレートを使用して呼び出します。例えば、ヘッダー内で呼び出すには、`<t t-call="website.placeholder_header_brand">`を使用します。

/website_airproof/data/images.xml¶

<record id="website.default_website" model="website">
    <field name="logo" type="base64" file="website_airproof/static/src/img/content/logo.png"/>
</record>

注釈

Here 会社のロゴ設定とグローバルウェブサイト設定のプリセットについての詳細を見つけることができます。

ちなみに

画像がウェブページの速度を落とさず、重量が多すぎないようにするには、以下の点を尊重してみてください。

重量: < 200Kb.
サイズ: 必要がない場合は1500px以上ではありません。
エクステンション: svg または jpg, png または gif を使用してください。
名前：スペース、アクセント、特殊文字、単語をダッシュで区切ることはできません。可能な限り関連する単語を使用してください。
1920pxより大きい画像はウェブサイトビルダーによって大きく圧縮されます。1920px以下の場合はそのまま残ります。

ビデオ¶

背景として動画を追加します。

<section class="o_background_video" data-bg-video-src="...">
    <!-- Content -->
</section>

属性	説明
data-bg-video-src	動画のURL。

動画をコンテンツとして追加します。

<div class="media_iframe_video" data-oe-expression="...">
    <div class="css_editable_mode_display" />
    <div class="media_iframe_video_size" contenteditable="false" />
    <iframe src="..."
        frameborder="0"
        contenteditable="false"
        allowfullscreen="allowfullscreen"/>
</div>

属性	説明
data-oe-expression	動画のURL。
src	動画のURL。

アイコン¶

デフォルトでは、フォントAwesomeアイコンライブラリはウェブサイトビルダーに含まれています。 CSS Prefix `fa`とアイコンの名前を使用すると、どこにでもアイコンを配置できます。 Font Awesome はインライン要素とともに使用するように設計されています。簡潔には`<i>`タグを使用できますが、`<span>`を使用する方が意味的に正しいです。

<span class="fa fa-picture-o"/>