Медіа¶

У цьому розділі ми побачимо, як додавати медіа-елементи, такі як зображення, відео чи значки, в Odoo.

Зображення¶

Записуйте зображення в базу даних та використовуйте їх пізніше у своєму дизайні/коді. Вони також будуть доступні для кінцевого користувача через діалогове вікно медіа.

Конструктор веб-сайтів підтримує такі формати файлів зображень: 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.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>

Примітка

Тут ви можете знайти більше інформації про налаштування логотипу компанії та глобальні пресетні налаштування вебсайту.

Порада

Щоб переконатися, що ваші зображення не уповільнюють роботу веб-сторінки та не важать забагато, спробуйте дотримуватися цих кількох пунктів:

Вага: < 200 Кб.
Розмір: не більше 1500 пікселів, якщо не потрібен.
Розширення: використовуйте svg або jpg, png або gif.
Назва: без пробілів, наголосів чи спеціальних символів, розділяйте слова тире. Використовуйте релевантні слова, коли це можливо.
Зображення розміром понад 1920 пікселів будуть сильно стиснуті конструктором веб-сайтів. Якщо < 1920 пікселів, вони залишаться недоторканими.

Відео¶

Додайте відео як фон.

<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-адреса відео.

Іконки¶

За замовчуванням бібліотека значків Font Awesome включена до Конструктора веб-сайтів. Ви можете розміщувати значки будь-де, використовуючи префікс CSS fa та назву значка. Font Awesome розроблено для використання з вбудованими елементами. Ви можете використовувати тег <i> для стислості, але використання <span> є семантично правильнішим.

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

Перегляньте також

Font Awesome v4 icons

Увімкніть параметри стилю Конструктора веб-сайтів.

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

Редагувати на GitHub