이모지 관련 다양한 토론

사용자 정의 이모지/스마일리가 채팅 메시지와 채팅 내 사용자 상태에 20x20 크기로 표시되는 것을 확인했습니다. 저는 다음과 같이 해결했습니다:

div.chat-message-text img.emoji[src*="uploads"] { /* 채팅 메시지 */
    width: auto;
    height: auto;
}

span.user-status-message img.emoji[src*="uploads"] { /* 채팅 내 사용자 상태 */
    width: auto;
    height: auto;
}

여러분도 이렇게 하시나요? 그렇다면 위 위키 게시물에 이 내용을 추가하는 것이 유용할 수 있습니다. 그렇지 않다면, 제 CSS 코드를 최적화하는 데 기꺼이 협력하겠습니다. :wink:

새 이모지를 사용자 지정했지만, 다른 이모지들 사이에서 찾을 수 없습니다.

이모지 선택기를 맨 아래까지 스크롤해 보셨나요? 바로 그곳에 사용자 지정 이모지 그룹이 있습니다.

이들이 변경되었습니다:

커스텀 이모지 일괄 업로드를 위해 여러 가지 옵션을 시도해 봤지만 아직 해결책을 찾지 못해, 앞으로 어떤 방식이 가장 좋을지 여쭙고자 합니다.

모든 Discourse 인스턴스에 업로드하고 싶은 소수의 커스텀 이모지 컬렉션을 가지고 있습니다. 그중 일부는 FontAwesome 아이콘으로, Discourse UI 아이콘을 사용자에게 설명할 수 있도록 컴포저 게시글에서 :icon-name: 형태로 사용할 수 있기를 바랍니다. 다른 일부는 약크셔셔(Yorkshire) 깃발처럼 단순히 재미를 위해 사용하는 것입니다. 이 파일들은 폴더로 정리되어 있으며, GitHub 저장소에 온라인으로 올려두는 것도 쉽게 가능할 것입니다.

현재 개별 커스텀 이모지 업로드처럼, 커스텀 이모지 전체 폴더를 한 번에 커스텀 이모지 UI에 업로드할 수 있으면 좋겠습니다. 현재 업로드 제한은 simultaneous_uploads(‘컴포저에 드래그 앤 드롭할 수 있는 최대 파일 수’) 사이트 설정을 따르며, 이 값은 최대 20으로 제한되어 있습니다. (20 이상으로 일시적으로라도 증가시키려 하면 "simultaneous_uploads: Value must be between 0 and 20."라는 오류가 발생합니다.)

외부 이모지 세트의 URL을 설정할 수 있는 다른 이모지 설정인 external-emoji-url에도 관심을 가지고 조사해 봤지만, 안타깝게도 이 설정은 모든 ‘표준’ 이모지를 대체하게 되어 있어, 표준 이모지를 유지하고 싶은 저에게는 적합하지 않습니다.

실제로 필요한 것은 현재 개별 커스텀 이모지 업로드가 작동하는 방식처럼 커스텀 이모지 폴더 업로드가 작동하는 것입니다. 아니면 업로드 허용 수에 제한이 없도록 하는 방법도 좋습니다. (예를 들어 업로드 작업을 SideKiq로 보내 비동기 처리하고, 완료되면 관리자 PM을 보내는 방식처럼 일괄 초대 시와 유사하게 처리하는 것)

이를 위해 Discourse REST API 사용을 조사해 봤지만, 커스텀 이모지는 REST API를 통해 노출되지 않습니다. 업로드는 API에 노출되어 있으며, custom_emoji 타입을 사용하여 업로드하는 방식을 작동시켰지만, 이 경우에도 목록에 표시되지 않았습니다.

커뮤니티에서 앞으로 나아갈 가장 좋은 방법에 대해 어떻게 생각하시는지 궁금합니다:

  • 커스텀 이모지 일괄 생성을 자동화하는 Rake 태스크?
  • Rails 콘솔에서 수행?
  • 관리자 UI 업로드 제한을 변경하여 한 번에 수백 개의 업로드를 허용?
  • 관리자 UI에 ‘폴더 업로드’ 기능 추가?
  • 커스텀 이모지를 Theme Component로 배포하여 GitHub URL에서 추가할 수 있도록 하기? (이 방식의 단순함이 좋습니다)
  • 여러 외부 이모지 URL을 허용하여 이모지 세트와 커스텀 이모지(예: GitHub Pages 저장소에서 서빙)를 동시에 사용할 수 있도록 하기
  • URL로 접근할 수 있는 단일 ‘이모지 및 커스텀 이모지’ 저장소를 직접 구성하기?

또는 - Discourse UI에서 사용하는 모든 FontAwesome 아이콘을 :icon-name: 문법으로 컴포저에서 사용할 수 있게 하는 다른 방법이 있을까요? 제가 하려는 것의 대부분은 이 부분과 관련이 있습니다. UI 아이콘을 컴포저에서 사용할 수 있도록 하는 사이트 설정만 있다면 90%는 해결될 것입니다.

비슷한 용도로 Discourse Icon 테마 컴포넌트를 사용해 보았습니다. 도움이 될까요?

토픽의 예시:

This is the [wrap=icon id=far-square][/wrap] icon and the [wrap=icon id=pencil][/wrap] icon.

This is the icon and the icon.

JammyDodger님, 도움 주셔서 감사합니다. UX 측면에서 [wrap=icon id=icon-name][/wrap] 문법이 :icon-name:보다 덜 직관적이지만, 고려해 볼 만한 옵션임이 분명합니다.

Discourse 아이콘 방식의 단점은, 사용하려는 모든 아이콘 목록을 svg icon subset 사이트 설정에 수동으로 추가해야 한다는 점입니다. 하지만 텍스트 파일의 목록에서 복사하여 붙여넣기만 하면 한 번에 처리할 수 있으므로, 그 정도는 괜찮습니다.

설명에 따르면, 그렇게 많이 추가해야 할 것으로 예상되지 않습니다. 해당 설정은 더 많은 아이콘을 추가하는 용도입니다. 포럼에서 사용되는 모든 아이콘은 이미 사용 가능합니다.

어디서 사용할 수 있나요? 사용 가능하다는 것은 반갑습니다. 하지만 :아이콘-이름: 형식의 구문으로 접근하는 것 같습니다.

예를 들어, 게시글에 시간대 인식 datetime을 추가하려면 Composer 도구 모음의 :calendar-days: 버튼을 사용한다고 사람들에게 쉽게 설명하고 싶습니다. 하지만 포함된 이모지/아이콘을 검색해 보면 가장 가까운 것이 :spiral_calendar:뿐입니다.

이들은 svg icon subset에 추가하지 않고도 wrap 문법과 Discourse 아이콘을 함께 사용합니다.

해답은 모든 아이콘을 추가해야 한다는 것이 단점이라는您的评论을 언급했습니다.


아마도 #watched-words를 사용하여 :calendar-days:를 [wrap=icon id=calendar-days][/wrap]로 대체하는 방식이 작동할 수 있을 것입니다. :thinking:

아, 알겠습니다. 오해해서 죄송합니다. 정말 훌륭하네요. 그러면 어디서든 wrap 문법을 사용하여 를 사용할 수 있다는 뜻이군요! 매일이 Discourse 학습의 날입니다!

유일하게 부족한 부분은 제가 필요한 아이콘의 Discourse 이름을 쉽게 검색할 수 없다는 점인데, 브라우저 인스펙터를 사용하여 d-icon- 이름을 찾아서 그에 맞게 조정할 수 있거나, FontAwesome 웹사이트를 활용할 수 있을 것 같습니다.

@Moin 감사합니다

마지막으로 Discourse를 업데이트한 지(며칠 전) 이후로 뭔가 바뀌었습니다.

이전에는

image

이랬는데, 지금은

image

이렇게 보입니다.

CSS를 확인해 보면 element.style(즉, 이 이모지를 위한 HTML 내부 스타일)에 aspect-ratio: 20 / 20;가 있고, 이걸 비활성화하면 이모지가 정상적으로 보입니다.

어떻게 해야 하나요?

(참고로, "Choker"는 아무 말도 하지 않습니다. 스쿠버 다이빙과 관련이 있고 다른 것들과는 무관하며 :stuck_out_tongue: 게시글에서 텍스트 크기를 확인하기 위해 그냥 넣어 둔 것입니다.)

테마에 이 CSS 줄을 추가할 수 있습니다.

.emoji-custom {
    aspect-ratio: unset !important;
}

이렇게 하면 aspect-ratio: 20/20을 오버라이드하게 됩니다.

네, 감사합니다. 잘 작동했습니다! :+1:

질문이 하나 있습니다:

최근 릴리스에서 가로세로 비율(aspect ratio)을 설정하는 목적은 무엇인가요?

그리고 왜 이 CSS, 그리고 위에서 언급한 코드가 Discourse 코어에 포함되지 않나요? 다른 것을 깨뜨리는 건가요, 아니면 커스텀 이모지/스마일리를 사용하는 사람이 너무 적은 건가요?

솔직히 모르겠어요. 이 토론과 관련이 있는 것 같습니다.