Shapes¶

Shapes مفیدند اگر بخواهید به وب‌سایت خود شخصیت اضافه کنید. در این فصل، خواهید آموخت چگونه shapeهای استاندارد و سفارشی پس‌زمینه/تصویر اضافه کنید.

آن‌ها فایل‌های SVG هستند که می‌توانید به‌عنوان یک پس‌زمینهٔ تزئینی در sectionهای مختلف خود یا مستقیماً روی تصاویر خود اضافه کنید. هر shape یک یا چند رنگ قابل سفارشی‌سازی دارد و برخی از آن‌ها انیمیشن شده‌اند.

هشدار

shapeهای پیش‌فرض Odoo از نقشهٔ پالت رنگ‌های پیش‌فرض Odoo به‌عنوان مرجع استفاده می‌کنند. به این روش، رنگ‌ها هر بار که پالت تغییر می‌کند، به‌طور خودکار با پالت جدید تطبیق می‌یابند:

default_palette = {
   '1': '#3AADAA',
   '2': '#7C6576',
   '3': '#F6F6F6',
   '4': '#FFFFFF',
   '5': '#383E45',
}

shapeهای پس‌زمینه¶

استاندارد¶

مجموعه‌ای بزرگ از shapeهای پس‌زمینهٔ پیش‌فرض در دسترس است.

استفاده¶

<section data-oe-shape-data="{'shape':'html_builder/Zigs/06'}">
   <div class="o_we_shape o_html_builder_Zigs_06" />
   <div class="container">
      <!-- Content -->
   </div>
</section>

data-oe-shape-data یک شیء JSON است که حاوی اطلاعاتی دربارهٔ shape شماست، مانند مکان فایل SVG، گزینه‌های repeat و flip و غیره.

برای مثال، می‌توانید shape را با استفاده از محور X یا Y به این روش به‌صورت افقی یا عمودی flip کنید:

<section data-oe-shape-data="{'shape':'html_builder/Zigs/06','flip':['x','y']}">
   <div class="o_we_shape o_html_builder_Zigs_06" />
   <div class="container">
       <!-- Content -->
   </div>
</section>

نگاشت رنگ‌ها¶

همچنین می‌توانید نگاشت پیش‌فرض رنگ‌های shape خود را با تغییر رنگ‌ها در نگاشت کنونی یا با ایجاد یک نگاشت جایگزین بدون تغییر نگاشت اولیه تغییر دهید.

تغییر نگاشت رنگ‌ها¶

ابتدا، می‌توانیم از یک shape به این شکل استفاده کنیم:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="100%" height="100%">
   <defs>
      <svg id="zigs06_top" viewBox="0 0 30 30" preserveAspectRatio="xMinYMin meet" fill="#383E45" width="100%">
         <path d="M30,7.9C22.5,7.9,22.5,20,15,20S7.5,7.9,0,7.9V0h30V7.9z" />
      </svg>
      <svg id="zigs06_bottom" viewBox="0 0 30 30" preserveAspectRatio="xMinYMax meet" fill="#FFFFFF" width="100%">
         <path d="M0,22.1C7.5,22.1,7.5,10,15,10s7.5,12.1,15,12.1V30H0V22.1z" />
      </svg>
   </defs>
   <svg>
      <use xlink:href="#zigs06_top" />
      <use xlink:href="#zigs06_bottom" />
   </svg>
</svg>

در اینجا از #383E45 و #FFFFFF استفاده می‌کنیم که مربوط به رنگ‌های ۵ و ۴ در پالت رنگ پیش‌فرض Odoo است.

shape به صورت زیر در SCSS اعلان می‌شود:

/website_airproof/static/src/scss/primary_variables.scss¶

'Zigs/06': ('position': bottom, 'size': 30px 100%, 'colors': (4, 5), 'repeat-x': true),

رنگ مشکی‌گون در بالا (c5) استفاده می‌شود، روشن (c4) در پایین و بین آن دو، shape به‌سادگی شفاف است.

ما می‌خواهیم نگاشت colors را با برخی جفت‌های key: value بازنویسی کنیم:

با ارجاع به پالت رنگ و رنگ سفارشی

/website_airproof/static/src/scss/primary_variables.scss¶

 $o-bg-shapes: change-shape-colors-mapping('html_builder', 'Zigs/06', (4: 3, 5: rgb(187, 27, 152)))

یا فقط با ارجاعات

/website_airproof/static/src/scss/primary_variables.scss¶

 $o-bg-shapes: change-shape-colors-mapping('html_builder', 'Zigs/06', (4: 3, 5: 1));

c4 (سفید) با c3 (سفیدگون) و c5 (مشکی) با c1 (سفید) جایگزین خواهد شد.

نتایج

افزودن نگاشت رنگ‌های اضافی¶

افزودن نگاشت رنگ اضافی به شما اجازه می‌دهد یک گونهٔ رنگی را به قالب یک shape اضافه کنید ضمن این که نسخهٔ اصلی را حفظ می‌کنید.

/website_airproof/static/src/scss/boostrap_overridden.scss¶

$o-bg-shapes: add-extra-shape-colors-mapping('html_builder', 'Zigs/06', 'second', (4: 3, 5: 1));

<section data-oe-shape-data="{'shape':'html_builder/Zigs/06'}">
   <div class="o_we_shape o_html_builder_Zigs_06 o_second_extra_shape_mapping" />
   <div class="container">
      <!-- Content -->
   </div>
</section>

سفارشی¶

گاهی، طراحی شما ممکن است به ایجاد یک یا چند shape سفارشی نیاز داشته باشد.

ابتدا باید یک فایل SVG برای shape خود ایجاد کنید.

/website_airproof/static/shapes/waves/01.svg¶

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1309 581">
   <path style="fill: #3AADAA;" d="..." />
</svg>

مهم

مطمئن شوید برای shape خود از رنگ‌های پالت پیش‌فرض Odoo استفاده می‌کنید (همان‌طور که در بالا توضیح داده شد).

Attachment¶

فایل shape خود را اعلان کنید.

/website_airproof/data/shapes.xml¶

<record id="shape_waves_01" model="ir.attachment">
   <field name="name">waves_01.svg</field>
   <field name="datas" type="base64" file="website_airproof/static/shapes/waves/01.svg" />
   <field name="url">/html_editor/shape/website_airproof/waves/01.svg</field>
   <field name="public" eval="True" />
</record>

فیلد	توضیحات
name	نام shape
datas	مسیر به شکل
url	مکان shape شما در HTML Editor. این فایل به‌طور خودکار توسط ابزار ساخت وب‌سایت در `/html_editor/shape/website_airproof` کپی می‌شود.
public	shape را برای ویرایش‌های بعدی در دسترس قرار می‌دهد.

SCSS¶

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

/website_airproof/static/src/scss/primary_variables.scss¶

$o-bg-shapes: map-merge($o-bg-shapes,
   (
      'website_airproof': (
         'waves/01': ('position': left bottom, 'size': 100% auto, 'colors': (1)),
      ),
   )
);

کلید	توضیحات
مکان فایل	`waves/01` مربوط به مکان فایل شما در پوشهٔ `shapes` است.
position	position shape شما را تعریف می‌کند.
size	اندازهٔ shape شما را تعریف می‌کند.
colors	رنگ c* را که می‌خواهید داشته باشد تعریف می‌کند (این رنگی که در SVG خود مشخص کرده‌اید را override می‌کند).
repeat-x	تعریف می‌کند که آیا shape به‌صورت افقی تکرار می‌شود. این کلید اختیاری است و تنها در صورتی نیاز است تعریف شود که روی `true` تنظیم شود.
repeat-y	تعریف می‌کند که آیا shape به‌صورت عمودی تکرار می‌شود. این کلید اختیاری است و تنها در صورتی نیاز است تعریف شود که روی `true` تنظیم شود.

افزودن گزینه¶

در نهایت، با گسترش منبع background_shape_groups_providers، shape خود را به فهرست shapeهای موجود در ابزار ساخت وب‌سایت اضافه کنید.

/website_airproof/static/src/builder/background_shapes_option_plugin.js¶

import { Plugin } from "@html_editor/plugin";
import { _t } from "@web/core/l10n/translation";
import { registry } from "@web/core/registry";

export class AirproofBackgroundShapesOptionPlugin extends Plugin {
   static id = "airproofBackgroundShapesOption";
   resources = {
      background_shape_groups_providers: () => ({
         airproof: {
            label: _t("Airproof"),
            subgroups: {
               airproof: {
                  label: _t("Airproof"),
                  shapes: {
                     "website_airproof/waves/01": {
                        selectLabel: _t("Waves 01"),
                     },
                  },
               },
            },
         },
      }),
   };
}

registry.category("website-plugins").add(
   AirproofBackgroundShapesOptionPlugin.id,
   AirproofBackgroundShapesOptionPlugin
);

توجه

فایل JavaScript را به باندل website.website_builder_assets اضافه کنید تا ویرایشگر آن را بارگذاری کند.

از آن در صفحات خود استفاده کنید¶

در صفحات XML خود، می‌توانید shape خود را به همان شیوهٔ بقیه استفاده کنید.

<section class="..." data-oe-shape-data="{'shape': 'website_airproof/waves/01', 'colors': {'c1': '#BBE1FA'}, 'flip': ['x']}">
   <div
      class="o_we_shape o_website_airproof_waves_01 o_we_flip_x"
      style="background-image: url('/html_editor/shape/website_airproof/waves/01.svg?c1=%23BBE1FA'); background-position: 100% 100%;" />
   <div class="container">
      <!-- Content -->
   </div>
</section>

همچنین می‌توانید با استفاده از ویژگی data-oe-shape-data رنگ‌ها را دوباره تعریف کنید، اما این اختیاری است.

shapeهای تصویر¶

shapeهای تصویر، فایل‌های SVG هستند که می‌توانید به‌عنوان یک clipping mask روی تصاویر خود اضافه کنید. برخی shapeها رنگ‌های قابل سفارشی‌سازی دارند و برخی انیمیشن شده‌اند.

استاندارد¶

مجموعه‌ای بزرگ از shapeهای پیش‌فرض تصویر در دسترس است.

استفاده¶

یک shape تنها می‌تواند روی تصویری اعمال شود که قبلاً در یک رکورد ir.attachment اعلان شده باشد، زیرا ابزار ساخت وب‌سایت باید تصویر را دوباره پردازش کند. به‌طور خلاصه، سیستم تصویر اصلی را به یک فایل SVG که شامل هم تصویر و هم shape است، تزریق می‌کند.

وقتی یک تصویر shape‌دار به‌طور کامل پردازش شد، شبیه نمونهٔ زیر خواهد بود:

<img
   src="..."
   class="img img-fluid mx-auto"
   alt="..."
   data-shape="html_builder/solid/solid_blob_2"
   data-shape-colors="#0B8EE6;;;;"
   data-mimetype="image/svg+xml"
   data-mimetype-before-conversion="image/jpeg"
   data-original-src="/website/static/src/img/snippets_demo/s_picture.jpg"
   data-file-name="s_text_image.svg"
   data-original-id="590"
   data-attachment-id="590" />

img شامل ویژگی‌های data مختلفی است که به ابزار ساخت وب‌سایت اجازه می‌دهد در صورت ویرایش مجدد، تصویر را دوباره پردازش کند:

صفت	توضیحات
data-shape	مکان shape
data-shape-colors	رنگ‌ها (حداکثر ۵) اعمال‌شده روی shape (هر مقدار، حتی اگر خالی باشد، با semicolon جدا می‌شود)
data-mimetype	Mimetype تصویر shape‌دار
data-mimetype-before-conversion	Mimetype تصویر اصلی
data-original-src	مسیر به فایل تصویر اصلی
data-file-name	نام فایلی که پس از تغییر shape ایجاد می‌شود (همیشه از پسوند `.svg` استفاده کنید زیرا shape تصویر در یک فایل SVG حاوی shape و تصویر اصلی اعمال می‌شود).
data-original-id	شناسهٔ `ir.attachment` اصلی (مرتبط با تصویر آپلودشده)
data-attachment-id	شناسهٔ `ir.attachment` مرتبط با تصویر shape‌دار.

شکل را فراخوانی کنید

درج یک تصویر shape‌دار نیازمند فراخوانی attachment پردازش‌شده با حداقل ویژگی‌های الزامی است، نه فقط تصویر اصلی.

در اینجا یک نمونه از حداقل موردنیاز برای فراخوانی یک shape با عناصر رنگی آورده می‌شود:

<img
   src="..."
   class="img img-fluid mx-auto"
   alt="..."
   data-shape="html_builder/solid/solid_blob_2"
   data-shape-colors="#0B8EE6;;;;"
   data-format-mimetype="image/jpeg"
   data-file-name="s_text_image.svg"
   loading="lazy" />

وقتی یک shape به‌صورت دستی با ابزار ساخت وب‌سایت اعمال می‌شود:

رکورد اصلی پردازش می‌شود و ویژگی src با یک تصویر base64 به‌روزرسانی می‌شود.
وقتی صفحه ذخیره شد، تصویر base64 به SVG نهایی (مشخص‌شده در data-file-name) منتقل می‌شود.
در نهایت، ویژگی src با ساختار مسیر زیر به‌روزرسانی می‌شود: /web/image/<attachment_id>-<attachment_checksum>/<finale_image>.svg و برخی ویژگی‌های data توسط ابزار ساخت وب‌سایت تولید می‌شوند (data-original-id، data-attachment-id، data-mimetype، data-mimetype-before-conversion و غیره).

اما در اینجا ۲ مشکل وجود دارد:

تبدیل تصویر نهایی به فرمت base64 آن‌قدر آسان نیست (چون واقعاً قابل خواندن برای انسان نیست).
محاسبهٔ checksum نهایی ir.attachment از یک الگوریتم استفاده می‌کند.

به‌هر حال، یک ابزار خارجی لازم خواهد بود، اما ماژول html_editor یک controller با یک route مفید فراهم می‌کند که می‌تواند یک shape تصویر و یک فایل تصویر را ترکیب کند:

@http.route([
   '/web_editor/image_shape/<string:img_key>/<module>/<path:filename>',
   '/html_editor/image_shape/<string:img_key>/<module>/<path:filename>'],
   type='http', auth="public", website=True)

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

HTML Editor - route shape تصویر

روی مسیر /html_editor تمرکز کنید که «نام جدید» Web Editor قدیمی است که تا Odoo 18 استفاده می‌شد، و placeholderها را با داده‌های واقعی جایگزین کنید:

<img
   src="/html_editor/image_shape/website_airproof.img_drone_robin/html_builder/solid/solid_blob_2.svg"
   class="img img-fluid mx-auto"
   alt="..."
   data-shape="html_builder/solid/solid_blob_2"
   data-shape-colors="#0B8EE6;;;;"
   data-mimetype="image/svg+xml"
   data-mimetype-before-conversion="image/webp"
   data-original-src="website_airproof/static/src/img/content/drone-robin.webp"
   data-file-name="drone-robin.svg"
   data-original-id="560"
   data-attachment-id="560" />

نکته

اگر shape یک رنگ پیش‌فرض Odoo را قبل از هرگونه ویرایش (در مقایسه با آنچه در data-shape-colors تعریف شده) نمایش دهد، یک پارامتر پالت رنگ را با همان رنگ escape شدهٔ تعریف‌شده در data-shape-colors منتقل کنید:

<img
   src="/html_editor/image_shape/website_airproof.img_drone_robin/html_builder/solid/solid_blob_2.svg?c1=%230B8EE6" />

c* با موقعیت در data-shape-colors مطابقت دارد:

c1 با #0B8EE6;;;;
c2 با ;#0B8EE6;;;
و غیره

مهم

به‌خاطر داشته باشید تا زمانی که تصویر به‌صورت دستی با ابزار ساخت وب‌سایت ذخیره نشود، در پایگاه‌داده به‌عنوان یک رکورد ذخیره نمی‌شود، برای هر بازدیدکننده که صفحه را نمایش می‌دهد به‌صورت بی‌درنگ تولید می‌شود. بنابراین می‌تواند بر عملکرد بارگذاری وب‌سایت تأثیر بگذارد.

رنگ‌ها¶

shapeهای تصویر می‌توانند تا ۵ رنگ شامل شوند. از آنجا که فایل SVG شامل رنگ‌های مربوط به پالت رنگ‌های پیش‌فرض Odoo است، سیستم قادر است رنگ‌های موجود در فایل را نگاشت کند و آن‌ها را با رنگ‌های فراخوانی‌شده در ویژگی data-shape-colors تصویر مطابقت دهد.

<img
   src="..."
   class="img img-fluid mx-auto"
   alt="..."
   data-shape="html_builder/solid/solid_blob_2"
   data-shape-colors="#0B8EE6;;;;"
   data-mimetype="image/svg+xml"
   data-mimetype-before-conversion="image/jpeg"
   data-original-src="/website/static/src/img/snippets_demo/s_picture.jpg"
   data-file-name="s_text_image.svg"
   data-original-id="590"
   data-attachment-id="590" />

در مثال بالا، رنگ #0B8EE6 به‌عنوان اولین رنگ پالت اعمال می‌شود. با توجه به این که اولین رنگ در پالت پیش‌فرض #3AADAA است، ابزار ساخت وب‌سایت #3AADAA را با #0B8EE6 جایگزین می‌کند.

Transformations و Stretch¶

برخی shapeها را می‌توان با transformations (Flip، rotate) تنظیم کرد:

<img
   src="..."
   class="img img-fluid mx-auto"
   alt="..."
   data-shape="html_builder/geometric/geo_slanted"
   data-shape-flip="xy"
   data-shape-rotate="90"
   data-aspect-ratio="1/1"
   data-mimetype="image/svg+xml"
   data-mimetype-before-conversion="image/jpeg"
   data-original-src="/website/static/src/img/snippets_demo/s_picture.jpg"
   data-file-name="s_text_image.svg"
   data-original-id="590"
   data-attachment-id="590" />

صفت	توضیحات
data-shape-flip	shape را در امتداد محور x (`x`)، محور y (`y`) یا هر دو (`xy`) flip می‌کند.
data-shape-rotate	shape را به اندازهٔ ۹۰ درجه (`90`، `180`، `270`) می‌چرخاند.
data-aspect-ratio	shape را به نسبت تصویر کشیده می‌کند: `1/1` (به‌صورت پیش‌فرض، تصویر shape را پر می‌کند) یا `0/0` (گزینهٔ Stretch فعال است و shape با نسبت تصویر تطبیق می‌یابد)

انیمیشن¶

برخی shapeها انیمیشن دارند و سرعت آن‌ها قابل تنظیم است:

<img
   src="..."
   class="img img-fluid mx-auto"
   alt="..."
   data-shape="html_builder/geometric/geo_square_1"
   data-shape-animation-speed="2"
   data-mimetype="image/svg+xml"
   data-mimetype-before-conversion="image/jpeg"
   data-original-src="/website/static/src/img/snippets_demo/s_picture.jpg"
   data-file-name="s_text_image.svg"
   data-original-id="590"
   data-attachment-id="590" />

صفت	توضیحات
data-shape-animation-speed	سرعت انیمیشن (محدوده از `-2` تا `2` با گام‌های `0.1`)

سفارشی¶

ایجاد یک shape تصویر سفارشی نسبتاً ساده است و به ۲ گام متکی است:

یک فایل SVG با ساختار خاص ایجاد کنید
shape سفارشی را به فهرست اضافه کنید

SVG را ایجاد کنید¶

ابتدا یک فایل SVG برای shape تصویر خود ایجاد کنید.

/website_airproof/static/image_shapes/duo/01.svg¶

<svg xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="800"
   height="800">
   <defs>
      <!-- Mask -->
      <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
         <use xlink:href="#filterPath" fill="none" />
      </clipPath>
      <!-- Vector used in the mask definition (Clip-path) -->
      <path id="filterPath" d="M0.325,0.75H0.125c-0.069,0-0.125-0.056-0.125-0.125V0.125C0,0.056,
      0.056,0,0.125,0h0.2c0.069,0,0.125,0.056,0.125,0.125v0.5c0,0.069-0.056,0.125-0.125,0.125ZM1,
      0.875v-0.5c0-0.069-0.056-0.125-0.125-0.125h-0.2c-0.069,0-0.125,0.056-0.125,0.125v0.5c0,
      0.069,0.056,0.125,0.125,0.125h0.2c0.069,0,0.125-0.056,0.125-0.125Z" />
   </defs>

   <!-- Other decorative element around (not used as a mask) -->
   <svg viewBox="0 0 1 1" preserveAspectRatio="none">
      <rect x="0.494"
         y="0.325"
         width="0.0125"
         height="0.35"
         rx="0.00625"
         ry="0.00625"
         fill="#7C6576" />
   </svg>

   <!-- Preview of the Path declared in the <defs> -->
   <svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
      <use xlink:href="#filterPath" fill="darkgrey" />
   </svg>

   <!-- Future image that on wich the mask is applied -->
   <image xlink:href="" clip-path="url(#clip-path)">
      <!-- Compatibility hack (Safari, Firefox) for non-animated shapes -->
      <animateMotion dur="1ms" repeatCount="indefinite" />
   </image>
</svg>

فایل SVG را می‌توان در هر نرم‌افزار ویرایش وکتور ایجاد کرد، اما برای کار درست با ابزار ساخت وب‌سایت نیازمند برخی تطبیقات است. بیایید مثال بالا را تجزیه کنیم.

SVG اصلی

Image Shape داخل یک شیء اصلی SVG با ویژگی‌های صریح width و height بر حسب پیکسل قرار می‌گیرد:

<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="800"
   height="800">
   ...
</svg>

ماسک

mask در یک تگ <defs> تعریف می‌شود تا قابل استفاده مجدد باشد (حتی اگر نباشد). از ۲ عنصر تشکیل شده است: یک clip-path و یک vector (یک path در shape ما). در این مرحله، آنچه در defs تنظیم شده، ظاهر نمی‌شود.

<defs>
   <!-- Mask -->
   <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
      <use xlink:href="#filterPath" fill="none" />
   </clipPath>
   <!-- Vector used in the mask definition (Clip-path) -->
   <path id="filterPath" d="M0.325,0.75H0.125c-0.069,0-0.125-0.056-0.125-0.125V0.125C0,0.056,
   0.056,0,0.125,0h0.2c0.069,0,0.125,0.056,0.125,0.125v0.5c0,0.069-0.056,0.125-0.125,0.125ZM1,
   0.875v-0.5c0-0.069-0.056-0.125-0.125-0.125h-0.2c-0.069,0-0.125,0.056-0.125,0.125v0.5c0,
   0.069,0.056,0.125,0.125,0.125h0.2c0.069,0,0.125-0.056,0.125-0.125Z" />
</defs>

تزئینات اضافی

اگر shape شامل هر عنصر دکوراتیو دیگری باشد، آن‌ها در SVG اصلی اما خارج از defs تنظیم می‌شوند

<svg viewBox="0 0 1 1" preserveAspectRatio="none">
   <rect
      x="0.494"
      y="0.325"
      width="0.0125"
      height="0.35"
      rx="0.00625"
      ry="0.00625"
      fill="#7C6576" />
</svg>

نکته

SVG اصلی دارای ویژگی‌های width و height بیان‌شده برحسب پیکسل (در این مثال ۸۰۰) است، اما viewBox همیشه به مقادیر بین ۰ و ۱ نرمال می‌شود. از آنجا که SVG یک فرمت مقیاس‌پذیر است، تضمین می‌کند که تصویر صرف‌نظر از اندازهٔ رندرشده، واضح باشد.

این دکوراسیون یک رنگ fill دارد که می‌تواند با ابزار ساخت وب‌سایت ویرایش شود:

مهم

فراموش نکنید از رنگی از پالت رنگ‌های پیش‌فرض Odoo استفاده کنید تا توسط ابزار ساخت وب‌سایت قابل ویرایش باشد (همان‌طور که در بالا توضیح داده شد).

پیش‌نمایش

سپس mask را در یک «پیش‌نمایش» با استفاده از یک ارجاع به ìd تعیین‌شده قبل (filterPath) رندر کنید:

<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
   <use xlink:href="#filterPath" fill="darkgrey" />
</svg>

تصویر

در نهایت، یک تگ image با یک ارجاع clip-path اضافه کنید. تصویر آینده شما (در فرمت base64) را دریافت خواهد کرد.

<image xlink:href="" clip-path="url(#clip-path)">
   <!-- Compatibility hack (Safari, Firefox) for non-animated shapes -->
   <animateMotion dur="1ms" repeatCount="indefinite" />
</image>

نکته

در صورت تمایل این ابزار را در مرورگر خود اجرا کنید تا فایل SVG منبع خود را به یک فایل سازگار با image shape تبدیل کنید.

آن را به فهرست اضافه کنید¶

در نهایت، shape سفارشی را به فهرست اضافه کنید:

/website_airproof/static/src/website_builder/image_shapes_option_plugin.js¶

import { Plugin } from "@html_editor/plugin";
import { _t } from "@web/core/l10n/translation";
import { registry } from "@web/core/registry";
export class AirproofImageShapesOptionPlugin extends Plugin {
   static id = "airproofImageShapesOption";
   resources = {
      image_shape_groups_providers: () => ({
         airproof: {
            label: _t("Airproof"),
            subgroups: {
               airproof_duo: {
                  label: _t("Duo"),
                  shapes: {
                     "website_airproof/duo/01": {
                        selectLabel: _t("Duo 01"),
                        transform: true,
                        togglableRatio: true,
                     },
                  },
               },
            },
         },
      }),
   };
}

registry.category("website-plugins").add(
   AirproofImageShapesOptionPlugin.id,
   AirproofImageShapesOptionPlugin
);

ویژگی	توضیحات
selectLabel	نام shape که در فهرست نمایش داده می‌شود
transform	نمایش/پنهان کردن گزینهٔ transformation (آینهٔ عمودی و افقی، چرخش چپ و راست).
togglableRatio	نمایش/پنهان کردن گزینهٔ stretch.
animated	نشان می‌دهد که آیا shape شامل برخی انیمیشن‌هاست
imgSize	نسبت تصویر استفاده‌شده برای Devices را تنظیم کنید (مثال: `0.46:1`)

از آن در صفحات خود استفاده کنید¶

shapeهای تصویر سفارشی اکنون می‌توانند روی تصاویر اعمال شوند، مثلاً در صفحات ایستای شما:

<img
   src="/html_editor/image_shape/website_airproof.img_drone_robin/website_airproof/duo/01.svg?c2=%230B8EE6"
   class="img img-fluid mx-auto"
   alt="..."
   data-shape="website_airproof/duo/01"
   data-shape-colors=";#0B8EE6;;;"
   data-format-mimetype="image/webp"
   data-file-name="drone-robin.svg"
   loading="lazy" />