|
| 1 | +===== |
| 2 | +Media |
| 3 | +===== |
| 4 | + |
| 5 | +In this chapter we will see how to include media elements such as images, videos or icons within Odoo. |
| 6 | + |
| 7 | +.. _website_themes/media/images: |
| 8 | + |
| 9 | +Images |
| 10 | +====== |
| 11 | + |
| 12 | +Record images in the database and use them later in your design/code. They will also be |
| 13 | +available for the end user through the *media dialog*. |
| 14 | + |
| 15 | +.. image:: media/media-window.png |
| 16 | + :alt: Media window |
| 17 | + |
| 18 | +The Website Builder supports the following image file formats: JPG, GIF, PNG, and SVG. |
| 19 | + |
| 20 | +.. warning:: |
| 21 | + Some options offered by the Website Builder are only applicable to media registered into a |
| 22 | + record. You might not see some options if you add an image directly with a relative path to |
| 23 | + your module folder. |
| 24 | + |
| 25 | +.. _website_themes/media/images/declaration: |
| 26 | + |
| 27 | +Declaration |
| 28 | +----------- |
| 29 | + |
| 30 | +To use your images in your code and have them included in the builder's gallery (so the client can |
| 31 | +reuse them), declare them like this: |
| 32 | + |
| 33 | +.. code-block:: xml |
| 34 | + :caption: ``/website_airproof/data/images.xml`` |
| 35 | +
|
| 36 | + <record id="img_about_01" model="ir.attachment"> |
| 37 | + <field name="name">About Image 01</field> |
| 38 | + <field name="datas" type="base64" file="website_airproof/static/src/img/content/img_about_01.jpg"/> |
| 39 | + <field name="res_model">ir.ui.view</field> |
| 40 | + <field name="public" eval="True"/> |
| 41 | + </record> |
| 42 | +
|
| 43 | +.. list-table:: |
| 44 | + :header-rows: 1 |
| 45 | + :stub-columns: 1 |
| 46 | + :widths: 20 80 |
| 47 | + |
| 48 | + * - Field |
| 49 | + - Description |
| 50 | + * - id |
| 51 | + - The name of your image to be used in your code |
| 52 | + * - name |
| 53 | + - A descriptive name for your image |
| 54 | + * - datas |
| 55 | + - The location of your image |
| 56 | + |
| 57 | +.. _website_themes/media/images/use: |
| 58 | + |
| 59 | +Use |
| 60 | +--- |
| 61 | + |
| 62 | +.. _website_themes/media/images/use/regular: |
| 63 | + |
| 64 | +Regular images |
| 65 | +~~~~~~~~~~~~~~ |
| 66 | + |
| 67 | +In your xml templates, call your images as follows: |
| 68 | + |
| 69 | +.. code-block:: xml |
| 70 | +
|
| 71 | + <img src="/web/image/website_airproof.img_about_01" alt=""/> |
| 72 | +
|
| 73 | +Being `img_about_01` the id you gave to your image. |
| 74 | + |
| 75 | +.. _website_themes/media/images/use/background: |
| 76 | + |
| 77 | +Background images |
| 78 | +~~~~~~~~~~~~~~~~~ |
| 79 | + |
| 80 | +.. code-block:: xml |
| 81 | +
|
| 82 | + <section style="background-image: url('/web/image/website_airproof.img_about_01');"> |
| 83 | +
|
| 84 | +.. _website_themes/media/images/use/logo: |
| 85 | + |
| 86 | +Company logo |
| 87 | +~~~~~~~~~~~~ |
| 88 | + |
| 89 | +For the company logo, the use is a little bit different. First declare it within the `images.xml` |
| 90 | +library and then call it using the right template. For instance, to call inside the header, we will |
| 91 | +use `<t t-call="website.placeholder_header_brand">`. |
| 92 | + |
| 93 | +.. code-block:: xml |
| 94 | + :caption: ``/website_airproof/data/images.xml`` |
| 95 | +
|
| 96 | + <record id="website.default_website" model="website"> |
| 97 | + <field name="logo" type="base64" file="website_airproof/static/src/img/content/logo.png"/> |
| 98 | + </record> |
| 99 | +
|
| 100 | +.. tip:: |
| 101 | + To make sure that your images don't slow down your web page and don't weigh too much, try to |
| 102 | + respect these few points: |
| 103 | + |
| 104 | + - **Weight**: < 200Kb. |
| 105 | + - **Size**: not more than 1500px if not needed. |
| 106 | + - **Extension**: use svg or jpg, png or gif. |
| 107 | + - **Name**: no spaces, accents or special characters and separate words with dashes. Use |
| 108 | + relevant words whenever possible. |
| 109 | + - Images larger than 1920px will be heavily compressed by the website builder. If < 1920px, they |
| 110 | + will remain intact. |
| 111 | + |
| 112 | +.. _website_themes/media/videos: |
| 113 | + |
| 114 | +Videos |
| 115 | +====== |
| 116 | + |
| 117 | +Add videos as background. |
| 118 | + |
| 119 | +.. code-block:: xml |
| 120 | +
|
| 121 | + <section class="o_background_video" data-bg-video-src="..."> |
| 122 | + <!-- Content --> |
| 123 | + </section> |
| 124 | +
|
| 125 | +.. list-table:: |
| 126 | + :header-rows: 1 |
| 127 | + :stub-columns: 1 |
| 128 | + :widths: 20 80 |
| 129 | + |
| 130 | + * - Attribute |
| 131 | + - Description |
| 132 | + * - data-bg-video-src |
| 133 | + - Video URL. |
| 134 | + |
| 135 | +Add videos as content. |
| 136 | + |
| 137 | +.. code-block:: xml |
| 138 | +
|
| 139 | + <div class="media_iframe_video" data-oe-expression="..."> |
| 140 | + <div class="css_editable_mode_display"> </div> |
| 141 | + <div class="media_iframe_video_size" contenteditable="false"> </div> |
| 142 | + <iframe src="..." |
| 143 | + frameborder="0" |
| 144 | + contenteditable="false" |
| 145 | + allowfullscreen="allowfullscreen"/> |
| 146 | + </div> |
| 147 | +
|
| 148 | +.. list-table:: |
| 149 | + :header-rows: 1 |
| 150 | + :stub-columns: 1 |
| 151 | + :widths: 20 80 |
| 152 | + |
| 153 | + * - Attribute |
| 154 | + - Description |
| 155 | + * - data-oe-expression |
| 156 | + - Video URL. |
| 157 | + * - src |
| 158 | + - Video URL. |
| 159 | + |
| 160 | +.. _website_themes/media/icons: |
| 161 | + |
| 162 | +Icons |
| 163 | +===== |
| 164 | + |
| 165 | +By default, the Font Awesome icons library is included in the Website Builder. You can place icons |
| 166 | +anywhere using the CSS Prefix `fa` and the icon's name. Font Awesome is designed to be used with |
| 167 | +inline elements. You can use `<i>` tag for brevity, but using a `<span>` is more semantically |
| 168 | +correct. |
| 169 | + |
| 170 | +.. code-block:: xml |
| 171 | +
|
| 172 | + <span class="fa fa-picture-o"/> |
| 173 | +
|
| 174 | +.. seealso:: |
| 175 | + `Font Awesome v4 icons <https://fontawesome.com/v4/icons/>`_ |
| 176 | + |
| 177 | +Enable the Website Builder style options. |
| 178 | + |
| 179 | +.. code-block:: xml |
| 180 | +
|
| 181 | + <span class="fa fa-2x fa-picture-o rounded-circle"/> |
| 182 | +
|
| 183 | +Increase the icon size (fa-2x, fa-3x, fa-4x, or fa-5x classes). |
| 184 | + |
| 185 | +.. code-block:: xml |
| 186 | +
|
| 187 | + <span class="fa fa-2x fa-picture-o"/> |
| 188 | +
|
| 189 | +.. image:: media/icon-options.png |
| 190 | + :alt: Icon options |
0 commit comments