이미지를 항상 별도 단락으로 삽입하는 설정

우리 커뮤니티에서는 사용자가 대부분 이미지를 새로운 줄에 삽입할 의도를 가지고 있습니다.

하지만 마크다운 이미지 코드를 이해하지 못해 항상 혼란을 겪습니다. 컴퓨터 사용 수준이 매우 낮은 사용자들입니다.

그 결과, 이미지를 삽입한 후 같은 줄에 바로 옆에 텍스트를 입력하거나, 텍스트를 입력한 직후 바로 이미지를 삽입하는 경우가 많습니다.

이렇게 하면 보기 흉해 보이며, 고급 사용자에게는 더 혼란을 줄지라도 대부분의 경우를 자동으로 해결할 방법을 찾고 있습니다.

다음 두 가지 설정 중 하나, 또는 둘 다 적용할 수 있을까요?

  1. 항상 이미지를 새, 독립된 단락에 삽입합니다.
  2. 방금 삽입된 이미지 코드 뒤에 항상 줄바꿈(단락을 만들기 위해 두 번의 줄바꿈)을 삽입합니다.

이렇게 하면 의미가 있을까요?
아니면 이 문제를 해결하는 더 나은 아이디어가 있을까요?

11개의 좋아요

많은 Discourse 사이트에서 @eviltrout 님이 언급한 것과 같은 혼란을 목격했습니다.

7개의 좋아요

이게 설정 항목이어야 하는지 의문이 듭니다. 새 단락 없이 이미지를 붙여넣고 싶은 경우가 얼마나 자주 발생합니까? 아마 동작 방식을 항상 이렇게 처리하도록 변경하는 것이 더 나을 수도 있습니다.

8개의 좋아요

네, 그걸 지지합니다. @sam이 동의한다면 기본값을 그렇게 변경합시다.

7개의 좋아요

가끔 이미지를 오른쪽이나 왼쪽으로 정렬하거나, 여러 이미지를 삽입한 뒤 크기를 50%로 줄여 예쁜 사진 갤러리처럼 보이게 하고 싶을 때가 있습니다. 이런 경우에는 각 이미지를 별도의 단락에 두지 않는 것이 좋습니다.

얼마나 많은 사람이 이렇게 하거나 이에 관심을 갖는지, 그리고 현재 작동 방식에 혼란을 겪는 것으로 알려진 많은 사람들과 비교했을 때 어느 정도인지 확실하지 않습니다. 마크다운은 여전히 많은 사람들에게 혼란스럽습니다.

1개의 좋아요

희귀한 사용 사례입니다. 이 경우보다는 일반적인 사용 사례를 최적화해야 합니다.

10개의 좋아요

추가로, 여러 이미지를 한 번에 업로드할 때 (적어도 iOS에서는) 이미지 사이에 줄바꿈 없이 공백만 삽입되어, 매번 돌아가서 줄바꿈을 추가해야 합니다.

3개의 좋아요

그리고 한동안 우리는 심지어 공백조차 추가하지 않았어요!! :scream:

7개의 좋아요

사용자들이 여러 장의 이미지를 한 번에 업로드한 후, 이미지 아래에 캡션을 추가하려 하거나 실수로 시작 부분의 !를 삭제하면서 게시물을 망치는 경우가 많다는 것을 자주 확인합니다. 각 업로드 후 두 줄의 공백을 추가하는 기능이 매우 유용할 것입니다. 이 부분에 진전이 있나요?

4개의 좋아요

네, 이 부분을 다시 다뤄야 할 것 같습니다. 릴리스에 슬쩍 넣을 수 있는 간단한 작업일 수도 있겠네요. @andrei ?

6개의 좋아요

이것은 설정이 아니라 기본 동작으로 구현되어 있습니다. 디바이스에서 이미지를 업로드할 때:

  • 커서가 비어 있지 않은 줄에 있는 경우 이미지 앞에 줄바꿈을 추가합니다.
  • 이미지 뒤에는 항상 줄바꿈을 추가합니다.
  • 여러 이미지를 업로드할 경우 이미지 사이에 줄바꿈을 추가합니다.

중요한 세부 사항은 줄바꿈을 두 개가 아닌 하나만 추가한다는 것입니다.

이제 병합되었습니다:

9개의 좋아요

좋은 개선입니다!

간단한 (테스트되지 않은) 생각인데, 그리드에 이미지를 표시하려는 테마 컴포넌트에 문제가 발생합니까? 예를 들어 Tiles Image Gallery나 Masonry Image Gallery 같은 경우요?

6개의 좋아요

Masonry Image Gallery의 경우 이는 문제가 되지 않습니다. 줄바꿈과 단락을 처리하도록 코드가 작성되어 있습니다.

훌륭한 병합입니다!

4개의 좋아요

이 부분이 궁금합니다. UX 관점에서는 업로드된 이미지 사이에 여백이 있는 것이 더 합리적이라고 생각합니다.

여백 없이 업로드된 경우:



여백을 추가한 경우:

4개의 좋아요

지금 상태로 괜찮다고 생각해요. 아주 사소한 부분이라 나중에 다시 검토해도 될 것 같아요.

3개의 좋아요

불행히도 이로 인해 Tiles Image Gallery에서 문제가 발생합니다. 확인해 보니, 이 플러그인은 줄바꿈이 아닌 공백으로 구분된 이미지만 처리할 수 있습니다.

다음 주에 이 문제를 살펴볼 수 있을 것 같습니다.

3개의 좋아요

네, 저는 이미지 사이에 빈 줄을 넣지 않고 여러 이미지를 업로드해 본 적이 없어요. 항상 제가 직접 빈 줄을 추가합니다.

1개의 좋아요

새로운 한 줄만 추가하면 좋습니다. :+1: CSS로 쉽게 조정할 수 있습니다.

.cooked img {
    margin-bottom: 3px;
}
5개의 좋아요

그리고 미리보기(Preview)를 조정하려면 다음과 같은 작업을 수행해야 한다는 것도 잊지 마세요. :slight_smile:

.d-editor-preview img {
    margin-bottom: 3px;
}
3개의 좋아요

Tiles Image Gallery에 대한 수정 사항입니다.

4개의 좋아요