Image Alignment

Contribute Feature

AI-generated summary

The discussion revolves around adding image alignment and wrapping text around images in Discourse posts. itlo and tobiaseigen express the need for this feature, which is a common request in their communities.

awesomerobot provides a workaround using data-theme-* attributes and custom CSS to achieve image alignment. tophee builds upon this idea and suggests creating a simple theme component.

Alternatively, Steven mentions a plugin he created that offers formatting options, including center, align right, and float elements. oreillyc finds this plugin helpful.

tshenry summarizes the current options for image alignment:

  1. A theme component: https://meta.discourse.org/t/md-composer-extras/118912
  2. A plugin: https://meta.discourse.org/t/formatting-toolbar/40649
  3. Building a custom solution: https://meta.discourse.org/t/image-alignment/15408/19

jomaxro and mattdm discuss using code to align images, but note that this method does not support floating or wrapping text. tshenry mentions that the md-composer-extras component also supports floating and adds a button to the composer for easier use.

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
47%20PM1050×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
38%20AM1228×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 님 감사합니다.

Float right 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를 참조하세요. center 대신 right를 사용하세요.

2개의 좋아요
36

그렇게 하면 이미지를 오른쪽으로 정렬할 수는 있지만, 플로팅(float)은 되지 않죠? 즉, 원하는 대로 텍스트가 이미지를 감싸도록(wrapped text) 만들 수는 없다는 뜻입니다.

37

맞습니다. 제가 링크한 토픽은 이미지를 중앙에 정렬하는 것이었고, 그것이 전부였습니다. float 기능도 필요하시다면 Kris의 제안을 따르셔야 합니다(설치를 위해 관리자의 조치가 필요합니다) 또는 Formatting toolbar와 같은 플러그인을 설치하셔야 합니다.

1개의 좋아요
38

MD Composer extras 컴포넌트에서도 플로팅 기능이 지원된다는 점만 참고해 주세요. 이 컴포넌트를 사용하면 작성기에 버튼이 추가되어 작업이 좀 더 원활해질 수 있습니다.

4개의 좋아요