پرش به محتویات

Image

المان Image تصاویر را با منابع responsive، کپشن، lightbox، mask و گزینه‌های استایل‌دهی دیگر نمایش می‌دهد.

تنظیمات

پایه (Basic)

  • Image (image) — یک تصویر از کتابخانه رسانه انتخاب کنید یا از dynamic data استفاده کنید.

  • HTML tag (select) — تگ HTML برای قرار دادن تصویر. گزینه‌ها: figure، div، custom. پیش‌فرض: figure. هنگام استفاده از sources به‌طور خودکار روی picture تنظیم می‌شود.

  • Custom tag (text) — نام تگ HTML سفارشی بدون attribute تعیین کنید. فقط وقتی HTML tag روی «custom» تنظیم شده و از sources استفاده نمی‌شود در دسترس است.

  • Sources (repeater) — تصاویر مختلف را برای breakpoint‌های مختلف با استفاده از المان <picture> پیکربندی کنید. هر source شامل:

  • Breakpoint (select) — breakpoint هدف یا media query سفارشی.
  • Media query (text) — رشته media query سفارشی (فقط وقتی breakpoint «Custom» است).

  • Image (image) — تصویر نمایش داده‌شده برای این breakpoint.

  • Aspect ratio (text) — نسبت ابعاد تصویر را تنظیم کنید (مثلاً 16/9، 4/3، 1/1).

  • Object fit (select) — نحوه جاسازی تصویر در container. گزینه‌ها: fill، contain، cover، none، scale-down.

  • Object position (text) — موقعیت تصویر در container (مثلاً center center، top left).

Alt و کپشن

  • Custom alt text (text) — متن alt پیش‌فرض از کتابخانه رسانه را override کنید.

  • Caption type (select) — یک کپشن زیر تصویر نمایش دهید. گزینه‌ها: none، attachment (از کتابخانه رسانه)، custom. پیش‌فرض: attachment.

  • Custom caption (text) — متن کپشن سفارشی. فقط وقتی caption type روی «custom» تنظیم شده در دسترس است.

گزینه‌های نمایش (Display Options)

  • Loading (select) — رفتار بارگذاری تصویر. گزینه‌ها: eager، lazy. پیش‌فرض: lazy.

  • Show title (checkbox) — attribute title تصویر از کتابخانه رسانه را نمایش دهید.

  • Stretch (checkbox) — عرض تصویر را ۱۰۰% container کنید.

  • Image Overlay (color) — یک overlay رنگی روی تصویر اضافه کنید.

  • Link (select) — تصویر را قابل کلیک کنید. گزینه‌ها: lightbox، attachment (صفحه attachment)، media (فایل رسانه)، url (URL سفارشی). پیش‌فرض: هیچ‌کدام.

وقتی link روی «lightbox» تنظیم شده در دسترس است:

  • Image size (select) — اندازه تصویر برای نمایش در lightbox. پیش‌فرض: Full.

  • Width (number) — عرض سفارشی تصویر lightbox به پیکسل.

  • Height (number) — ارتفاع سفارشی تصویر lightbox به پیکسل.

  • Animation (select) — نوع انیمیشن lightbox. گزینه‌ها: zoom، fade، none. پیش‌فرض: zoom.

  • Caption (checkbox) — کپشن تصویر را در lightbox نمایش دهید.

  • ID (text) — چندین تصویر با همان ID lightbox را گروه‌بندی کنید تا یک گالری ایجاد شود.

  • Cropped (checkbox) — برای transition‌های روان‌تر در صورت crop شده بودن تصویر فعال کنید.

  • Padding (dimensions) — padding دور تصویر lightbox به پیکسل.

تنظیمات Attachment/Media

وقتی link روی «attachment» یا «media» تنظیم شده در دسترس است:

  • Open in new tab (checkbox) — لینک را در tab جدید مرورگر باز کنید.

تنظیمات URL

وقتی link روی «url» تنظیم شده در دسترس است:

  • URL (link) — URL و attribute‌های لینک سفارشی را پیکربندی کنید.

آیکون (Icon)

overlay آیکون اختیاری که هنگام وجود لینک در تصویر نمایش داده می‌شود:

  • Disable icon (checkbox) — آیکون را حتی اگر در theme styles پیکربندی شده باشد مخفی کنید.

  • Icon (icon) — آیکونی برای نمایش روی تصویر انتخاب کنید.

  • Icon background color (color) — رنگ پس‌زمینه آیکون.

  • Icon border (border) — استایل border برای آیکون.

  • Icon box shadow (box-shadow) — box shadow برای آیکون.

  • Icon typography (typography) — تنظیمات typography برای آیکون (اندازه، رنگ).

  • Icon height (number) — ارتفاع container آیکون.

  • Icon width (number) — عرض container آیکون.

  • Icon transition (text) — CSS transition برای آیکون.

ماسک (Mask)

یک mask روی تصویر برای اشکال خلاقانه و افکت‌ها اعمال کنید:

  • Mask (select) — از اشکال mask پیش‌تعریف‌شده انتخاب کنید یا از یک تصویر mask سفارشی استفاده کنید. گزینه‌ها شامل: Custom، Boom، Box، Bubbles، Circle dots، Circle line، Circle waves، Circle، Drop 2، Drop، Fire، Grid circles، Grid dots، Grid filled diagonal، Grid lines diagonal، Grid، Heart، Hexagon dent، Hexagon، Hourglass، Masonry، Ninja star، Octagon dent، Play، Plus، Round zig zag، Splash، Square rounded، Squares 3x3، Squares 4x4، Squares 4 diagonal rounded، Squares 4 diagonal، Squares diagonal، Squares merged، Tiles 2، Tiles، Waves.

  • Custom mask (image) — یک تصویر mask سفارشی آپلود یا انتخاب کنید. فقط وقتی mask روی «Custom» تنظیم شده در دسترس است.

  • Size (select) — نحوه جاسازی mask. گزینه‌ها: auto، cover، contain، custom. پیش‌فرض: contain.

  • Custom size (number) — اندازه mask سفارشی با واحد. فقط وقتی size روی «custom» تنظیم شده در دسترس است.

  • Position (select) — موقعیت mask. گزینه‌ها: center center، center left، center right، top center، top left، top right، bottom center، bottom left، bottom right. پیش‌فرض: center center.

  • Repeat (select) — نحوه تکرار mask. گزینه‌ها: no-repeat، repeat، repeat-x، repeat-y، round، space. پیش‌فرض: no-repeat.

مرجع توسعه‌دهنده

برای JSON schema کامل به Image Schema مراجعه کنید.