Image Alignment

贡献 功能
1

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 个赞
CommonMark testing started here!
Image Alignment and Grid
18

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…

47%20PM
Screen Shot 2018-06-08 at 1.07.47 PM.png1050×538 85.8 KB

2 个赞
19

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;
    }
}

38%20AM
Screen Shot 2018-06-09 at 1.35.38 AM.png1228×362 33.4 KB

Might be a good case for a simple theme component.

17 个赞
System user replaces wrong URL when it downloads local copy of image
20

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 个赞
23

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 个赞
31

格式工具栏 解决了问题，对我来说简直易如反掌！感谢 @Steven

右浮动 bbcode

我们有一个 floatl bbcode（以及对应的按钮），允许你在文本左侧添加内容（例如 此示例中的图片）。此外还有一个 [floatr][/floatr] bbcode，用于在右侧添加内容。该 bbcode 已创建，但我尚未添加对应按钮，因为觉得并非必要。

33

我已对该主题进行了一些整理，以便突出显示最相关的信息。

以下是目前允许在帖子中设置图片对齐方式的选项汇总，按安装/使用便捷程度排序：

2 个赞
34

有些新闻吗？我是一个用户，我只需要发布一张右对齐的图片内容。

1 个赞
35

请参阅 https://meta.discourse.org/t/what-is-the-code-for-centering-an-uploaded-image/77446/14。请使用 right 而不是 center。

2 个赞
36

这可以将图像右对齐，但不会使其浮动，对吧？也就是说，不会有文字环绕，而这_可能_才是想要的效果？

37

没错。我链接的主题旨在居中显示图片，它仅能做到这一点。如果您还需要 float 功能，请遵循 Kris 的建议（这需要管理员采取行动进行设置）或安装如 Formatting toolbar 之类的插件。

1 个赞
38

请注意，MD Composer extras 组件也支持浮动功能。它将在编辑器中添加一个按钮，可能会使操作更加顺畅。

4 个赞