媒体¶

在本章中，我们将了解如何在 Odoo 中包含图片、视频或图标等媒体元素。

图片¶

将图片记录到数据库中，并在设计/代码中稍后使用。它们还会通过 媒体对话框 提供给最终用户。

Website Builder 支持以下图片文件格式：JPG、GIF、PNG 和 SVG。

警告

Website Builder 提供的一些选项仅适用于已注册到记录中的媒体。如果通过模块文件夹的相对路径直接添加图片，则可能看不到某些选项。

声明¶

要在代码中使用您的图片并将其包含在构建器的图库中（以便客户可以重复使用），请按如下方式声明：

/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	在代码中使用的图片名称
名称	图片的描述性名称
数据	图片的位置

使用¶

常规图片¶

在您的 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');">

公司标志¶

对于公司标志，其使用方式略有不同。首先在 images.xml 库中声明它，然后使用正确的模板调用它。例如，要在页眉内调用，我们将使用 <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>

注解

在此处，您可以找到有关公司标志设置和全局网站设置预设的更多信息。

小技巧

为确保您的图片不会拖慢网页速度且不会占用过多空间，请尽量遵循以下几点：

大小：< 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">&nbsp;</div>
    <div class="media_iframe_video_size" contenteditable="false">&nbsp;</div>
    <iframe src="..."
        frameborder="0"
        contenteditable="false"
        allowfullscreen="allowfullscreen"/>
</div>

属性	描述
data-oe-expression	视频 URL。
src	视频 URL。

图标¶

默认情况下，Font Awesome 图标库已包含在 Website Builder 中。您可以使用 CSS 前缀 fa 和图标的名称将图标放置在任何位置。Font Awesome 旨在与内联元素一起使用。为了简洁起见，您可以使用 <i> 标签，但使用 <span> 在语义上更为正确。

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

参见

Font Awesome v4 图标

启用 Website Builder 的样式选项。

<span class="fa fa-2x fa-picture-o rounded-circle"/>

增大图标尺寸（使用 fa-2x、fa-3x、fa-4x 或 fa-5x 类）。

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

Edit on GitHub