Media

در این فصل خواهیم دید چگونه عناصر media مانند تصاویر، ویدئوها یا آیکون‌ها را در Odoo قرار دهیم.

تصاویر

تصاویر را در پایگاه‌داده ثبت کنید و بعداً در طراحی/کد خود از آن‌ها استفاده کنید. آن‌ها همچنین برای کاربر نهایی از طریق media dialog در دسترس خواهند بود.

ابزار ساخت وب‌سایت از فرمت‌های فایل تصویری زیر پشتیبانی می‌کند: JPG، GIF، PNG و SVG.

هشدار

برخی گزینه‌های ارائه‌شده توسط ابزار ساخت وب‌سایت تنها برای media ثبت‌شده در یک رکورد قابل اعمال هستند. اگر یک تصویر را مستقیماً با یک مسیر نسبی به پوشهٔ ماژول خود اضافه کنید، ممکن است برخی گزینه‌ها را نبینید.

اعلان

برای استفاده از تصاویر خود در کد و گنجاندن آن‌ها در گالری builder (تا کلاینت بتواند از آن‌ها دوباره استفاده کند)، آن‌ها را به این شکل اعلان کنید:

/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');">
   <!-- Content -->
</section>

لوگوی شرکت

برای لوگوی شرکت، استفاده کمی متفاوت است. ابتدا آن را در فایل website.xml اعلان کنید و سپس با استفاده از قالب مناسب آن را فراخوانی کنید. برای مثال، برای فراخوانی داخل header، از <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>

توجه

اینجا می‌توانید اطلاعات بیشتری دربارهٔ راه‌اندازی لوگوی شرکت و presetهای تنظیمات سراسری وب‌سایت بیابید.

نکته

برای اطمینان از این که تصاویر شما صفحهٔ وب را کند نمی‌کنند و حجم زیادی ندارند، سعی کنید چند نکتهٔ زیر را رعایت کنید:

• وزن: کمتر از ۲۰۰ کیلوبایت.

• اندازه: اگر نیاز نیست، بیش از ۱۵۰۰ پیکسل نباشد.

• پسوند: از svg، jpg، png یا gif استفاده کنید.

• نام: بدون فاصله، علائم آوایی یا کاراکترهای ویژه و کلمات را با dash جدا کنید. هرگاه ممکن است از کلمات مرتبط استفاده کنید.

• تصاویر بزرگ‌تر از ۱۹۲۰ پیکسل به‌شدت توسط ابزار ساخت وب‌سایت فشرده خواهند شد. اگر < ۱۹۲۰ پیکسل باشند، دست‌نخورده باقی خواهند ماند.

ویدئوها

ویدئوها را به‌عنوان پس‌زمینه اضافه کنید.

<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 برای استفاده با عناصر inline طراحی شده است. برای اختصار می‌توانید از تگ <i> استفاده کنید، اما استفاده از یک <span> از نظر معنایی صحیح‌تر است.

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

همچنین ببینید

آیکون‌های Font Awesome v4

گزینه‌های استایل ابزار ساخت وب‌سایت را فعال کنید.

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