Lilly
7월 13, 2023, 5:10오후
1
이 테마 컴포넌트는 업로드된 이미지를 텍스트의 왼쪽 또는 오른쪽으로 정렬하거나, 게시물의 중앙에 배치하거나, 새로 구현된 그리드 태그를 사용하여 여러 이미지를 그리드로 정렬하기 위한 버튼을 게시물 작성 도구 모음에 삽입합니다. 그리드는 이미지 개수와 각 이미지의 차원에 따라 자동으로 크기를 조정하여 적합하게 표시하며, 더 큰 업로드된 버전으로 링크도 생성합니다. 버튼/정렬 기능은 하나의 게시물에서 여러 번 사용하여 다양한 레이아웃을 만들 수 있습니다. 데스크톱 및 모바일 뷰 모두에서 작동합니다.
사용하려면 필요한 이미지 정렬 버튼을 클릭한 다음, 생성된 태그 사이의 지정된 위치에 이미지를 업로드하면 됩니다 (컴포넌트 설정에서 편집할 수 있는 플레이스홀더 텍스트로 표시됨).
이 컴포넌트의 그리드 부분은 이미지 링크가 아닌 업로드된 이미지를 정렬하는 용도임을 유의하세요 (다른 정렬 옵션은 링크된 이미지에서도 작동합니다).
작성 도구 모음 그리드 버튼 (그리드 코드 예시 포함)
이미지 그리드 예시
작성 도구 모음 오른쪽 정렬 버튼 (오른쪽 정렬 코드 예시 포함)
텍스트 오른쪽에 이미지 정렬
작성 도구 모음 왼쪽 정렬 버튼 (왼쪽 정렬 코드 예시 포함)
텍스트 왼쪽에 이미지 정렬
작성 도구 모음 중앙 정렬 버튼 (중앙 정렬 코드 예시 포함)
중앙에 정렬된 이미지 (텍스트 포함)
27개의 좋아요
piffy
7월 13, 2023, 8:20오후
3
훌륭한 도구네요! 에디터에서 어떻게 보이는지 보여줄 수 있나요?
3개의 좋아요
Lilly
7월 13, 2023, 8:51오후
4
감사합니다 @piffy !
도구 막대가 있는 컴포저/에디터를 말씀하시는 건가요? 그건 그리드 예제가 들어간 첫 번째 스크린샷입니다. 이미지 주변의 다른 정렬 코드가 포함된 에디터 스크린샷을 몇 장 더 추가하겠습니다.
3개의 좋아요
thoka
7월 14, 2023, 5:43오전
5
Image Alignment 에 대한 이 해결책에 감사합니다
3개의 좋아요
Heliosurge
9월 13, 2023, 7:47오후
6
멋진 컴포넌트네요! 방금 이 질문을 하려던 참이었어요!
소중한 애드온을 만들어 주셔서 정말 감사합니다. 정말 대단하세요!
2개의 좋아요
Lilly
9월 13, 2023, 7:58오후
7
아, 감사합니다, 댄. 칭찬해 주셔서 정말 기쁘고, 유용하게 사용해 주셔서 감사해요
2개의 좋아요
Heliosurge
9월 14, 2023, 1:12오전
8
아니에요, 도와드릴 수 있어서 기쁩니다. 예를 들어 스크린샷에서 볼드 텍스트를 왼쪽 정렬로 표시하는 방법을 어떻게 찾으신 건지 궁금합니다. 마크다운을 시도해 보았지만 마크다운 코드가 그대로 표시되고 있습니다.
**Text**은 작동하지 않는 것 같습니다.
Lilly
9월 14, 2023, 1:42오전
9
무엇을 말씀하시는 건지 잘 모르겠네요 @Heliosurge ?
3개의 좋아요
Heliosurge
9월 14, 2023, 3:18오전
10
방금 전에 시도했을 때 작동하지 않아서 죄송합니다. 뭐가 바뀌었는지 정확히 모르겠네요. 정말 멋지네요, 감사합니다.
2개의 좋아요
Heliosurge
9월 14, 2023, 4:34오전
11
이미지를 1개 이상 사용하는 경우 이런 문제가 발생합니다.
이 코드에서 발생합니다. 각 이미지마다 정보가 고정되게 하는 방법은 무엇인가요? Shawn의 정보는 두 번째 이미지 옆에 위치해야 합니다.
어떻게 수정할 수 있을까요?
2개의 좋아요
Lilly
9월 14, 2023, 4:49오전
12
첫 번째 텍스트 블록과 두 번째 <div-data-theme…> 태그 사이에
2개의 좋아요
Heliosurge
9월 14, 2023, 5:22오전
13
좋아요, 텍스트가 적절한 이미지와 정렬될 때까지
도와주셔서 다시 한번 감사드립니다. 멋진 Customization > Theme component
3개의 좋아요
Canapin
9월 14, 2023, 7:04오전
14
컨텐츠의 높이가 창 크기에 따라 달라지기 때문에 이 방법은 신뢰할 수 없다고 생각합니다.
임의의 콘텐츠 옆에 플로트(float)가 있을 때 이를 정리하는 것은 까다롭습니다. 여기서 명확한 해결책이 있는지 확신이 서지 않습니다…
이 문제는 WordPress 에디터에서도 오랫동안 문제였습니다.
사람들은 이전에 설정된 플로트를 초기화하기 위해 clear: both; 속성만 가진 요소를 사용하는 해킹적인 방법을 주로 사용합니다.
2개의 좋아요
Lilly
9월 14, 2023, 7:07오전
15
네, 저도 그 방법은 마음에 들지 않습니다. white-space 속성으로 해결해 보는 것도 생각해 봤습니다.
Canapin
9월 14, 2023, 7:15오전
16
float 대신 다른 솔루션을 탐색해 볼 수 있을지도 모릅니다.
float을 flex로 바꿔보았습니다…
[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;
}
혹은 grid 레이아웃을 살펴보는 건 어떨까요? 다만 그 부분은 잘 모르겠습니다. 제 CSS 지식은 몇 년 전 것이니까요.
Lilly
9월 14, 2023, 7:17오전
17
하하, 그리드 옵션은 이 테마 컴포넌트의 일부예요
제것도 확실히 오래된 것 같아요
그건 뭐예요? 쿠키? 감자인지, 만두인지, 아니면 어떤 종류의 비스킷인지 구별이 안 되네요.
2개의 좋아요
Canapin
9월 14, 2023, 7:24오전
18
어제 직접 만든 앙 을 채운 다이후쿠 모찌 를 만들었습니다.
2개의 좋아요
Lilly
9월 14, 2023, 3:23오후
19
flex align 속성 관련 해결책을 시도해 보았지만, 일관되게 작동하는 방법을 찾지 못했습니다. 그래도 쓸 만한 우회 방법은 찾았습니다. 각 이미지-텍스트 섹션을 인용 블록(block quote)으로 만들면 섹션들이 분리됩니다(다만 텍스트에 인용 서식이 적용됩니다):
에디터 / 미리보기:
결과:
3개의 좋아요
Canapin
9월 15, 2023, 2:46오후
20
이는 Discourse에서 <blockquote>에 clear: both;가 포함되어 있기 때문입니다.
3개의 좋아요
결국 정렬된 이미지가 개별 게시물인 경우 가장 잘 작동합니다. 불행히도 테이블 안의 이미지도 잘 작동하지 않습니다.
.
