diff --git a/content/developer/howtos/website_themes.rst b/content/developer/howtos/website_themes.rst index 2e1fe979d..2db59cc32 100644 --- a/content/developer/howtos/website_themes.rst +++ b/content/developer/howtos/website_themes.rst @@ -28,6 +28,7 @@ successes. We invite you to use it as a base to build your own website and adapt website_themes/layout website_themes/navigation website_themes/pages + website_themes/media website_themes/building_blocks website_themes/shapes website_themes/gradients diff --git a/content/developer/howtos/website_themes/media.rst b/content/developer/howtos/website_themes/media.rst new file mode 100644 index 000000000..12e994b64 --- /dev/null +++ b/content/developer/howtos/website_themes/media.rst @@ -0,0 +1,190 @@ +===== +Media +===== + +In this chapter we will see how to include media elements such as images, videos or icons within Odoo. + +.. _website_themes/media/images: + +Images +====== + +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*. + +.. image:: media/media-window.png + :alt: Media window + +The Website Builder supports the following image file formats: JPG, GIF, PNG, and SVG. + +.. warning:: + 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. + +.. _website_themes/media/images/declaration: + +Declaration +----------- + +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: + +.. code-block:: xml + :caption: ``/website_airproof/data/images.xml`` + + + About Image 01 + + ir.ui.view + + + +.. list-table:: + :header-rows: 1 + :stub-columns: 1 + :widths: 20 80 + + * - Field + - Description + * - id + - The name of your image to be used in your code + * - name + - A descriptive name for your image + * - datas + - The location of your image + +.. _website_themes/media/images/use: + +Use +--- + +.. _website_themes/media/images/use/regular: + +Regular images +~~~~~~~~~~~~~~ + +In your xml templates, call your images as follows: + +.. code-block:: xml + + + +Being `img_about_01` the id you gave to your image. + +.. _website_themes/media/images/use/background: + +Background images +~~~~~~~~~~~~~~~~~ + +.. code-block:: xml + +
+ +.. _website_themes/media/images/use/logo: + +Company logo +~~~~~~~~~~~~ + +For the company logo, the use is a little bit different. First declare it within the `images.xml` +library and then call it using the right template. For instance, to call inside the header, we will +use ``. + +.. code-block:: xml + :caption: ``/website_airproof/data/images.xml`` + + + + + +.. tip:: + 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. + +.. _website_themes/media/videos: + +Videos +====== + +Add videos as background. + +.. code-block:: xml + +
+ +
+ +.. list-table:: + :header-rows: 1 + :stub-columns: 1 + :widths: 20 80 + + * - Attribute + - Description + * - data-bg-video-src + - Video URL. + +Add videos as content. + +.. code-block:: xml + +
+
 
+
 
+