يُدرج مكون السمة هذا أزرارًا في شريط أدوات منشئ المشاركات لمحاذاة الصور التي تم تحميلها مع النص إلى اليسار أو اليمين، أو في وسط المشاركة، أو لمحاذاة صور متعددة في شبكة، باستخدام علامات الشبكة المنفذة حديثًا. ستقوم الشبكة تلقائيًا بتغيير حجم الصور لتناسب اعتمادًا على عددها وأبعاد كل منها، كما ستربط بالنسخ الأكبر التي تم تحميلها. يمكن استخدام الأزرار / وظائف المحاذاة عدة مرات في مشاركة واحدة لإنشاء مجموعة متنوعة من التخطيطات. يعمل لكل من العرض المكتبي والجوال.
للاستخدام، ما عليك سوى النقر فوق زر محاذاة الصورة الذي تحتاجه، ثم تحميل الصور في المكان المخصص بين العلامات الناتجة (يُشار إليها بنص نائب يمكن تحريره في إعدادات المكون).
لاحظ أن جزء الشبكة من هذا المكون مخصص لمحاذاة الصور التي تم تحميلها، وليس روابط الصور (ستعمل خيارات المحاذاة الأخرى لروابط الصور). لقد استعرت بعض إطار عمل الكود الأساسي من مكون MD Composer Extras المفيد من @Steven.
قيد التنفيذ: إضافة محددات أيقونات مناسبة لكل زر.
هل تقصد لوحة الإنشاء / المحرر مع شريط الأدوات؟ سيكون هذا هو لقطة الشاشة الأولى مع مثال الشبكة. سأضيف بعض لقطات الشاشة للمحرر مع رموز المحاذاة الأخرى حول الصور.
فقط قم بإدراج بعض علامات <br><br> HTML بين كتلة النص الأولى وعلامة <div-data-theme...> الثانية حتى يتم تباعدها بشكل صحيح. سأحاول برمجة عودة صعبة أو شيء من هذا القبيل عندما يكون لدي بعض الوقت.
نعم، أنا لا أحب هذه الطريقة أيضًا. كنت أفكر في محاولة حل خاصية المسافات البيضاء. في النهاية، تعمل بشكل أفضل إذا كانت الصور المحاذاة مشاركات منفصلة. للأسف، الصور في الجداول لا تعمل بشكل جيد أيضًا.
لم أجرب حلول خاصية flex align ولكن لم أتمكن من التوصل إلى شيء قابل للتطبيق باستمرار. لقد وجدت حلاً بديلاً قابلاً للاستخدام. إذا جعلت كل قسم من أقسام الصور والنصوص اقتباسًا، فسيؤدي ذلك إلى فصلها (ولكنه يتضمن تنسيق الاقتباس للنص):
في النهاية، تعمل بشكل أفضل إذا كانت الصور المحاذاة مشاركات منفصلة. للأسف، الصور في الجداول لا تعمل بشكل جيد أيضًا.
.
