Image Alignment

[itlo]

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.

[tobiaseigen]

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…

[awesomerobot (Kris)]

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.

[tophee (Christoph)]

@awesomerobot

img[data-theme-image=“left”] { float: left; margin-right: 1em; }

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

Attribute selectors - CSS | MDN

@awesomerobot

Might be a good case for a simple theme component.

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):

common/head_tag.html

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?

[Steven]

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

Formatting toolbar

Add some formatting options to your discourse posts : center a text or an image, align to the right, justify, colors, underline, etc. It’s easy to use and it will provide some options to embellish your posts.

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

[oreillyc (CJ O'Reilly)]

フォーマットツールバーは私には 完璧に機能しました！簡単でした。@Steven ありがとう。

Formatting toolbar

Add some formatting options to your discourse posts : center a text or an image, align to the right, justify, colors, underline, etc. It’s easy to use and it will provide some options to embellish your posts.

右寄せ bbcode

左側にコンテンツを追加できる floatl bbcode（とボタン）があります（この例の画像 のように）。また、右側にコンテンツを追加する [floatr][/floatr] bbcode もあります。bbcode は作成されましたが、ボタンは追加していません。必要ないと感じたためです。

[tshenry (Taylor)]

このトピックを整理し、最も関連性の高い情報を強調しました。

投稿での画像の配置を可能にする現在のオプションを、インストール・使用の容易さの順に以下にまとめます。

• https://meta.discourse.org/t/md-composer-extras/118912（テーマコンポーネント）
• https://meta.discourse.org/t/formatting-toolbar/40649（プラグイン）
• 独自ソリューションの構築：https://meta.discourse.org/t/image-alignment/15408/19。ツールバーボタンを追加したい場合は、https://meta.discourse.org/t/image-alignment/15408/20 に例があります。

[krauss (Peter Krauss)]

何かニュースはありますか？ 私はユーザーです、画像を右揃えにしてコンテンツを投稿するだけで十分です。

[jomaxro (Joshua Rosenfeld)]

What is the code for centering an uploaded image? - #14 by jomaxro をご覧ください。「center」の代わりに「right」を使用してください。

[mattdm (Matthew Miller)]

@jomaxro

画像を中央揃えにするコードは？ - #14 by jomaxro をご覧ください。center の代わりに right を使用してください。

これで画像は右揃えになりますが、浮動（フロート）はしないですよね？つまり、テキストが回り込まないということです。おそらく、それが求められている動作だと思われますが？

[jomaxro (Joshua Rosenfeld)]

@mattdm

画像を右揃えにすることはできますが、フローティングはしないんですよね？

その通りです。私がリンクしたトピックは画像を中央揃えにするためのもので、それ以上の機能はありません。float も必要であれば、Krisの提案に従う必要があります（設定には管理者による操作が必要です）か、Formatting toolbar などのプラグインをインストールしてください。

[tshenry (Taylor)]

MD Composer extras のコンポーネントでも、フローティングがサポートされている点に留意してください。これにより、コンポーザーにボタンが追加され、操作がよりスムーズになる可能性があります。