انتقل إلى المحتوى الرئيسي

قوالب المعاينة

تسمح لك قوالب المعاينة بتخصيص معلمات الصور المستخدمة في السمات. عند تطبيق قالب على سمة من نوع "صورة" أو "مجموعة صور"، ستحصل على صور مطابقة للمعيار المحدد في قالب المعاينة. هذا مفيد إذا كان تصميم مشروعك حساسًا لحجم الصور. من خلال تخصيص قالب المعاينة، يمكنك تغيير معلمات الصور التي سيراه المستخدم النهائي.

للبدء في العمل مع قوالب المعاينة، افتح قسم "الإعدادات"، ثم انتقل إلى قسم "قوالب المعاينة". في هذا القسم، يوجد قائمة بالقوالب التي تم إنشاؤها بالفعل، بالإضافة إلى نموذج لإنشاء قوالب جديدة.

الإنشاء

في نموذج الإنشاء، حدد:

  • الاسم - سلسلة غير فريدة.
  • العلامة - سلسلة فريدة.

بعد ملء المعلومات، اضغط على زر "إنشاء".

الإعداد

اختر من القائمة العامة لقوالب المعاينة القالب الذي تريد تخصيصه واضغط على أيقونة الترس Optimize images للدخول إلى وضع التحرير. لإنشاء معلمات المعاينة، اضغط على زر "إضافة". يمكنك تخصيص التنسيق للصورة العمودية والأفقية والمربعة.

في النماذج المناسبة، املأ:

  • العرض والارتفاع (جانب المربع) - الأبعاد بالبكسل التي ستناسب الصورة.
  • نوع المحاذاة - الخط الذي سيصبح المحور المركزي عند ضغط الصورة.

القالب الافتراضي

بعد إنشاء عدة مجموعات في قالب واحد، يمكنك تبديل القالب الافتراضي. يستخدم لعرض المعاينة في نظام إدارة المحتوى (CMS).

الحذف

اختر من القائمة العامة لقوالب المعاينة القالب الذي تريد حذفه واضغط على أيقونة الحذف Edit للدخول إلى وضع التحرير. أكد الإجراء في نافذة الحوار.

LQTP

يمثل كل قالب معاينة مصفوفة من عنصرين:

  • الصورة المصغرة (base64 WebP)

التنسيق: WebP (محسن للتحميل السريع). الحجم: لا يزيد عن بضع مئات من البايتات. يتم تضمينه مباشرة في الكائن على شكل base64-URI، مما يسرع العرض بينما لا تزال الصورة الكاملة قيد التحميل.

  • المعاينة المولدة الصورة الرئيسية للمعاينة، التي تحل محل الصورة المصغرة بعد التحميل الكامل.

المزايا:

  • عرض فوري للصورة المصغرة (بدون طلبات HTTP إضافية).
  • انتقال سلس إلى المعاينة الكاملة بعد التحميل.
  • توفير البيانات من خلال استخدام WebP المضغوط.

مثال على الهيكل:

{
"preview_template": [
"data:image/webp;base64,UklGRl...", // الصورة المصغرة (base64 WebP)
"https://example.com/full-preview.jpg" // المعاينة الكاملة
]
}

تحسن هذه الطريقة تجربة المستخدم، خاصة عند الاتصال بالإنترنت البطيء.

يمكنك معرفة المزيد عن LQTP هنا. كما يمكنك مشاهدة الفيديو