Média¶

In this chapter we will see how to include media elements such as images, videos or icons within Odoo.

Képek¶

Record images in the database and use them later in your design/code. They will also be available for the end user through the media dialog.

A Weboldal Készítő a következő képformátumokat támogatja: JPG, GIF, PNG és SVG.

Figyelem

Some options offered by the Website Builder are only applicable to media registered into a record. You might not see some options if you add an image directly with a relative path to your module folder.

Deklaráció¶

To use your images in your code and have them included in the builder’s gallery (so the client can reuse them), declare them like this:

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

Mező	Leírás
azonosító	The name of your image to be used in your code
név	A descriptive name for your image
adatok	The location of your image

Use¶

Regular images¶

In your xml templates, call your images as follows:

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

Being img_about_01 the id you gave to your image.

Background images¶

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

Company logo¶

For the company logo, the use is a little bit different. First declare it within the website.xml file and then call it using the right template. For instance, to call inside the header, we will use <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>

Megjegyzés

Here you can find more information about the company logo setup and global website settings presets.

Javaslat

To make sure that your images don’t slow down your web page and don’t weigh too much, try to respect these few points:

Weight: < 200Kb.
Size: not more than 1500px if not needed.
Extension: use svg or jpg, png or gif.
Name: no spaces, accents or special characters and separate words with dashes. Use relevant words whenever possible.
Images larger than 1920px will be heavily compressed by the website builder. If < 1920px, they will remain intact.

Videók¶

Adjon hozzá videókat háttérként.

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

Attribútum	Leírás
adat-bg-video-src	Videó URL.

Adjon hozzá videókat tartalomként.

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

Attribútum	Leírás
adat-oe-kifejezés	Videó URL.
forrás	Videó URL.

Ikonok¶

Alapértelmezés szerint a Font Awesome ikon könyvtár be van építve a Weboldal Készítőbe. Ikonokat bárhol elhelyezhet a CSS Prefix fa és az ikon neve használatával. A Font Awesome úgy van tervezve, hogy inline elemekkel használható legyen. Használhat <i> tag-et a rövidség kedvéért, de a <span> használata szemantikailag helyesebb.

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

Lásd még

Font Awesome v4 ikonok

Engedélyezze a Weboldal Készítő stílus opcióit.

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

Növelje az ikon méretét (fa-2x, fa-3x, fa-4x, vagy fa-5x osztályok).

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