Media¶

Trong chương này, chúng ta sẽ tìm hiểu cách đưa các thành phần media như hình ảnh, video hoặc icon vào trong Odoo.

Hình ảnh¶

Ghi lại hình ảnh trong database và sử dụng chúng sau này trong thiết kế/code của bạn. Chúng cũng sẽ khả dụng cho người dùng cuối thông qua hộp thoại media.

Website Builder hỗ trợ các định dạng file hình ảnh sau: JPG, GIF, PNG và SVG.

Cảnh báo

Một số tùy chọn do Website Builder cung cấp chỉ áp dụng cho media đã được đăng ký vào một record. Bạn có thể không thấy một số tùy chọn nếu bạn thêm hình ảnh trực tiếp bằng đường dẫn tương đối đến thư mục module của bạn.

Khai báo¶

Để sử dụng hình ảnh của bạn trong code và đưa chúng vào thư viện của builder (để client có thể tái sử dụng), hãy khai báo chúng như sau:

/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>

Field	Mô tả
id	Tên hình ảnh của bạn để sử dụng trong code
name	Một tên mô tả cho hình ảnh của bạn
datas	Vị trí của hình ảnh của bạn

Cách sử dụng¶

Hình ảnh thông thường¶

Trong các template xml của bạn, hãy gọi hình ảnh của bạn như sau:

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

Với img_about_01 là id bạn đã đặt cho hình ảnh của mình.

Hình ảnh nền¶

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

Logo công ty¶

Đối với logo công ty, cách sử dụng có một chút khác biệt. Trước tiên, hãy khai báo nó trong file website.xml rồi gọi nó bằng template phù hợp. Ví dụ, để gọi bên trong header, chúng ta sẽ dùng <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>

Ghi chú

Here bạn có thể tìm thêm thông tin về cách thiết lập logo công ty và các preset cài đặt website toàn cục.

Mẹo

Để đảm bảo hình ảnh của bạn không làm chậm trang web và không quá nặng, hãy cố gắng tuân theo một vài điểm sau:

Dung lượng: < 200Kb.
Kích thước: không quá 1500px nếu không cần thiết.
Phần mở rộng: sử dụng svg hoặc jpg, png hoặc gif.
Tên: không dùng khoảng trắng, dấu hoặc ký tự đặc biệt và tách các từ bằng dấu gạch ngang. Sử dụng các từ có liên quan khi có thể.
Các hình ảnh lớn hơn 1920px sẽ bị website builder nén mạnh. Nếu < 1920px, chúng sẽ được giữ nguyên.

Video¶

Thêm video làm nền.

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

Thuộc tính	Mô tả
data-bg-video-src	URL video.

Thêm video làm nội dung.

<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>

Thuộc tính	Mô tả
data-oe-expression	URL video.
src	URL video.

Icon¶

Theo mặc định, thư viện icon Font Awesome được tích hợp trong Website Builder. Bạn có thể đặt icon ở bất kỳ đâu bằng cách sử dụng tiền tố CSS fa cùng với tên icon. Font Awesome được thiết kế để sử dụng với các thành phần inline. Bạn có thể dùng thẻ <i> cho ngắn gọn, nhưng sử dụng <span> sẽ đúng về mặt ngữ nghĩa hơn.

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

Xem thêm

Font Awesome v4 icons

Bật các tùy chọn kiểu dáng của Website Builder.

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

Tăng kích thước icon (các class fa-2x, fa-3x, fa-4x hoặc fa-5x).

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