이미지 정렬 및 그리드

[Lilly (Lillian)]

	요약	작성 도구 모음에 이미지 그리드 및 정렬 버튼 추가
	저장소	https://github.com/Lillinator/image-alignment
	설치 가이드	테마 또는 테마 컴포넌트 설치 방법
	디스코urse 테마 초보?	디스코urse 테마 사용 입문 가이드

이 테마 컴포넌트 설치

이 테마 컴포넌트는 업로드된 이미지를 텍스트의 왼쪽 또는 오른쪽으로 정렬하거나, 게시물의 중앙에 배치하거나, 새로 구현된 그리드 태그를 사용하여 여러 이미지를 그리드로 정렬하기 위한 버튼을 게시물 작성 도구 모음에 삽입합니다. 그리드는 이미지 개수와 각 이미지의 차원에 따라 자동으로 크기를 조정하여 적합하게 표시하며, 더 큰 업로드된 버전으로 링크도 생성합니다. 버튼/정렬 기능은 하나의 게시물에서 여러 번 사용하여 다양한 레이아웃을 만들 수 있습니다. 데스크톱 및 모바일 뷰 모두에서 작동합니다.

사용하려면 필요한 이미지 정렬 버튼을 클릭한 다음, 생성된 태그 사이의 지정된 위치에 이미지를 업로드하면 됩니다 (컴포넌트 설정에서 편집할 수 있는 플레이스홀더 텍스트로 표시됨).

이 컴포넌트의 그리드 부분은 이미지 링크가 아닌 업로드된 이미지를 정렬하는 용도임을 유의하세요 (다른 정렬 옵션은 링크된 이미지에서도 작동합니다).

---

스크린샷

작성 도구 모음 그리드 버튼 (그리드 코드 예시 포함)

이미지 그리드 예시

작성 도구 모음 오른쪽 정렬 버튼 (오른쪽 정렬 코드 예시 포함)

텍스트 오른쪽에 이미지 정렬

작성 도구 모음 왼쪽 정렬 버튼 (왼쪽 정렬 코드 예시 포함)

텍스트 왼쪽에 이미지 정렬

작성 도구 모음 중앙 정렬 버튼 (중앙 정렬 코드 예시 포함)

중앙에 정렬된 이미지 (텍스트 포함)

[Lilly (Lillian)]

just added button for centering images.

[piffy]

Great tool! Can you show what it looks like in the editor?

[Lilly (Lillian)]

thank you @piffy!

@piffy

Can you show what it looks like in the editor?

do you mean the composer / editor with the toolbar? that would be the first screenshot with the grid example. i’ll add some screenshots of the editor with the other alignment codes around images.

[thoka (Thomas Kalka)]

Thank you for this solution for Image Alignment

[Heliosurge (Dan DeMontmorency)]

@Lilly

composer toolbar right align button (with right align code example)

Awesome component! Was just going to ask this kind of question!

You are a rockstar making valuable add ons!

[Lilly (Lillian)]

@Heliosurge

You are a rockstar making valuable add ons!

why thank you Dan I appreciate the compliment and am happy you find them useful

[Heliosurge (Dan DeMontmorency)]

Your quite welcome. Gow do you get the Align left for example showa bolded text in your ss. I tried markdown and it is showing the markdown code.

I see it works with ### but standard bold with

**Text**

doesn’t seem to

[Lilly (Lillian)]

I’m not sure I understand what you mean @Heliosurge ?

[Heliosurge (Dan DeMontmorency)]

My apologies when I tried it earlier it didn’t work. Not sire what changed. This is quite awesome thanks.

[Heliosurge (Dan DeMontmorency)]

Okay if your using more than 1 image I am getting this.

From this code. How do I make info sticky to each pic. Shawn info should be beside 2nd pic

How can I fix?

[Lilly (Lillian)]

just insert some <br><br> html tags in between the first text block and the second <div-data-theme…> tag until it spaces properly. I will try to program a hard return or something in there when I get some time.

[Heliosurge (Dan DeMontmorency)]

좋아요, 텍스트가 적절한 이미지와 정렬될 때까지
태그를 추가해 주세요

도와주셔서 다시 한번 감사드립니다. 멋진 Customization > Theme component 입니다!

[Canapin (Coin-coin le Canapin)]

I think this is not a reliable method as the content’s height will differ from one window’s size to another.

Clearing floats when there are arbitrary contents next to them is tricky. I’m not sure there’s an obvious solution here…^[1]

It was also an issue with the Wordpress editor for ages.

People tend to rely on hacky methods using elements whose only purpose is having a clear: both; to reset previous floats.

---

1. until don shows up ↩︎

[Lilly (Lillian)]

@Canapin

I think this is not a reliable method as the content’s height will differ from one window’s size to another.

Clearing floats when there are arbitrary contents next to them is tricky. I’m not sure there’s an obvious solution here…^[1]

yea I don’t like that method either. I was thinking of perhaps trying a white space property solution. ultimately, it works best if the aligned images are separate posts. Unfortunately, images in tables don’t work great either.

---

1. until don shows up ↩︎

[Canapin (Coin-coin le Canapin)]

Maybe you can explore other solutions than floats.

I tried to trade the float for flex… Without going in-depth.

[data-theme-image=left] {
    display: flex;
    float: none;
}

[data-theme-image=right] {
    display: flex;
    float: none;
    justify-content: flex-end;
}

[data-theme-image=left] {
    display: flex;
    float: none;
}

[data-theme-image=right] {
    display: flex;
    float: none;
    flex-direction: row-reverse;
}

Or maybe look at the grid layout? I don’t know anything about it, though. My CSS knowledge is years old.

[Lilly (Lillian)]

@Canapin

Or maybe look at the grid layout? I don’t know anything about it, though. My CSS knowledge is years old.

hah the grid option is part of this theme component

I also definitely think mine is older .

what are those? cookies? I can’t tell if they are potatoes or dumplings or biscuits of some sort.

[Canapin (Coin-coin le Canapin)]

I made daifuku mochi yesterday, filled in with homemade anko.

[Lilly (Lillian)]

Tried those flex align property solutions but couldn’t come up with something consistently workable. I did find a usable workaround though. If you make each image-text section a block quote, it separates them (but includes the quote formatting for the text):

editor / previewer:

result:

[Canapin (Coin-coin le Canapin)]

This is because <blockquote> contains a clear: both; in Discourse.