Image Alignment

Any plan to add a feature for Image Alignment and Wrapping Text Around Images? More formmating options for photos (uploaded or linked) would be very useful. Cheers.

11 إعجابًا

This question comes up all the time in my community. We’d love to be able to include a small image or two in our posts without interrupting the flow of text.

Here’s a typical example…

إعجابَين (2)

You don’t need a plugin to whitelist classes anymore, you can just use data-theme-* attributes directly in your post’s markup.

You’d do something like

<div data-theme-image="left">
  <img src="https://example.com/example.jpg" >
</div>

and then in your site customizations you’d have add corresponding CSS

[data-theme-image="left"] {
    float: left;
    img {
      margin: 1.3em 1em 0 0;
    }
}

Might be a good case for a simple theme component.

17 إعجابًا

I had to look this one up. In case anyone else is wondering how this works, here you go:

So let’s see if I understand how this would work. One way would be to add a toolbar button that would add a div with the data-theme-image attribute, just like here (where a different attribute is added):

Right?

Now, if I think that adding a toolbar button each for aligning images, say, left right centre (or even adding a toolbar button at all) and I instead want to manually add a [floatl] tag which would then be converted into html, then I would need a plugin, right?

إعجاب واحد (1)

I’ve done a plugin with some formatting options, center, align right, float element, color. You can activate/deactivate any option

It’s using bbcodes tho, it may not be as clean as other options

6 إعجابات

أدوات تنسيق شريط الأدوات نجحت في الأمر بالنسبة لي بسهولة تامة! شكرًا لك @Steven

طفو يمين bbcode

لدينا كود bbcode floatl (وزر) يسمح لك بإضافة محتوى على يسار النص (مثل الصورة في هذا المثال). يوجد أيضًا كود [floatr][/floatr] يضيف محتوى على اليمين. تم إنشاء كود bbcode ولكنني لم أضيف زرًا، فلا أرى ذلك ضروريًا.

لقد قمت بتنظيف هذا الموضوع قليلاً بحيث يتم تسليط الضوء على المعلومات الأكثر صلة.

فيما يلي ملخص للخيارات الحالية للسماح بمحاذاة الصور في المنشورات، مرتبة حسب سهولة التثبيت/الاستخدام:

إعجابَين (2)

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

إعجاب واحد (1)

راجع What is the code for centering an uploaded image? - #14 by jomaxro. بدلاً من center، استخدم right.

إعجابَين (2)

هذا يمكن أن يصفّف الصورة على اليمين، لكنه لن يجعلها عائمة، أليس كذلك؟ أي، لن يكون هناك نص ملفوف حولها، وهو ما يُرجّح أنه المطلوب؟

هذا صحيح. الموضوع الذي ربطتُ إليه كان يهدف إلى توسيط صورة، وهذا كل ما يفعله. إذا كنت تريد أيضًا float، فستحتاج إلى اتباع اقتراح كريس (والذي يتطلب اتخاذ إجراء من قبل مسؤول لإعداده) أو تثبيت إضافة مثل شريط أدوات التنسيق.

إعجاب واحد (1)

ملاحظة: يدعم هذا المكون أيضًا خاصية الطفو مع مكون MD Composer extras. سيتم إضافة زر إلى المحرر قد يجعل الأمور أكثر سلاسة.

4 إعجابات