# 이미지 라이트박스가 기본적으로 제공되나요?

**URL:** https://meta.discourse.org/t/lightbox-for-images-comes-by-default/129618
**Category:** Support
**Created:** [9월 26, 2019, 9:14오후 UTC](https://meta.discourse.org/t/lightbox-for-images-comes-by-default/129618 "2019-09-26T21:14:16Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![seanmavley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/seanmavley/32/121505_2.png) [@seanmavley](https://meta.discourse.org/u/seanmavley)
#### Post date: [9월 26, 2019, 9:14오후 UTC](https://meta.discourse.org/t/lightbox-for-images-comes-by-default/129618/1 "2019-09-26T21:14:16Z")

</div>

죄송하지만 질문을 해야겠습니다.

Discourse 설치 환경에서 토픽에 이미지를 업로드하면, 이미지를 클릭하여 라이트박스를 열 수 없습니다.

이는 별도로 설치해야 하는 플러그인인가요, 아니면 Discourse에 기본적으로 포함된 기능인가요?

썸네일 생성은 정상적으로 작동합니다. 업로드 후 임베드 이미지 링크가 다음과 같은 형태이기 때문입니다:

```plaintext
![170A8281|690x460](upload://ymbIAVokPLvrmTr6ceQQ16AKUdX.jpeg)

```

`...|690x460]` 부분이 이를 확인시켜 줍니다.

하지만 업로드된 이미지는 4k x 4k 해상도를 훨씬 초과하는 크기입니다.

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [9월 27, 2019, 4:04오후 UTC](https://meta.discourse.org/t/lightbox-for-images-comes-by-default/129618/2 "2019-09-27T16:04:04Z")

</div>

이것은 개발용 설치인지, 운영용 설치인지요?

사이트를 설정할 때 [공식 설치 가이드](https://github.com/discourse/discourse/blob/master/docs/INSTALL-cloud.md)를 따랐나요? (운영용 설치인 경우)

`your.site.come/sidekiq/`에 접속하여 busy, enqued, scheduled 탭을 확인함으로써 sidekiq 큐에서 특이한 일이 일어나고 있지 않은지 확인해 주시겠어요?

---

<div class="post-metadata">

### Author: ![seanmavley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/seanmavley/32/121505_2.png) [@seanmavley](https://meta.discourse.org/u/seanmavley)
#### Post date: [9월 27, 2019, 4:12오후 UTC](https://meta.discourse.org/t/lightbox-for-images-comes-by-default/129618/3 "2019-09-27T16:12:28Z")

</div>

제 sidekiq 상태가 별로 좋아 보이지 않습니다

 ![Screenshot_20190927-160928_Chrome~2](https://global.discourse-cdn.com/meta/original/3X/6/f/6f34c7d1e89a835ba46b817d36edd297e4c5ad30.jpeg)

---

<div class="post-metadata">

### Author: ![seanmavley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/seanmavley/32/121505_2.png) [@seanmavley](https://meta.discourse.org/u/seanmavley)
#### Post date: [9월 27, 2019, 5:17오후 UTC](https://meta.discourse.org/t/lightbox-for-images-comes-by-default/129618/4 "2019-09-27T17:17:04Z")

</div>

> [@Johani](#):
>
> 사이트를 설정할 때 [공식 설치 가이드](https://github.com/discourse/discourse/blob/master/docs/INSTALL-cloud.md)를 따랐나요? (프로덕션 설치인 경우)

네, 공식 설치 가이드를 따랐습니다. 거기에는 sideqik에 대한 언급이 없는 것 같습니다.

다만, 현재 제 sideqik 대시보드는 정상적으로 보이는 것 같습니다.

> [@Johani](#):
>
> 이것은 개발용 설치인지 프로덕션용 설치인가요?

프로덕션용 설치입니다.

제가 놓치고 있는 것이 있을까요?

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [9월 27, 2019, 9:14오후 UTC](https://meta.discourse.org/t/lightbox-for-images-comes-by-default/129618/5 "2019-09-27T21:14:18Z")

</div>

> [@seanmavley](#):
>
> 공식 설치 가이드를 따랐습니다. 거기에는 sideqik에 대한 언급이 없는 것 같습니다.

거기에 Sidekiq에 대한 언급이 없는 것은 의도된 것입니다. 이 모든 것은 사용자의 개입 없이 백그라운드에서 마법처럼 작동하도록 설계되어 있습니다. 우리는 그것이 그렇게 작동하도록 보장합니다.

그것이 당신의 사이트에서 작동하지 않는다는 사실은 설정에 문제가 있음을 나타냅니다.

많은 맥락이 없으면 문제가 무엇인지 진단하기가 어렵습니다. 따라서 가능한 한 많은 정보를 제공해 주세요.

문제가 발생하는 사이트의 링크를 받을 수 있을까요?  
[안전 모드](https://meta.discourse.org/t/how-to-use-discourse-safe-mode/53504)를 시도해 볼 수 있을까요?  
Cloudflare을 사용 중인가요?  
라이트박스로 표시되어야 하는 이미지가 있는 페이지에서 브라우저 콘솔에 오류가 표시되나요?  
`your.site.com/logs`에서 이상한 내용이 보이나요?

---

<div class="post-metadata">

### Author: ![seanmavley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/seanmavley/32/121505_2.png) [@seanmavley](https://meta.discourse.org/u/seanmavley)
#### Post date: [9월 27, 2019, 9:28오후 UTC](https://meta.discourse.org/t/lightbox-for-images-comes-by-default/129618/6 "2019-09-27T21:28:59Z")

</div>

> [@Johani](#):
>
> 문제가 있는 사이트의 링크를 받을 수 있을까요?

[africa.packagetome.com](http://africa.packagetome.com) (최종 도메인은 아니고, 그냥 실험해 보기 위한 스테이징 환경입니다)

> [@Johani](#):
>
> [safe-mode](https://meta.discourse.org/t/how-to-use-discourse-safe-mode/53504)를 시도해 볼 수 있나요?

기본 테마를 사용하고 모든 플러그인을 비활성화한 상태에서도 안전 모드에서 라이트박스가 여전히 작동하지 않습니다.

> [@Johani](#):
>
> Cloudflare을 사용 중인가요?

아니요. Digitalocean의 10달러짜리 VPS에서 모든 것을 실행하고 있습니다.

> [@Johani](#):
>
> 라이트박스로 표시되어야 할 이미지가 있는 페이지에서 브라우저 콘솔에 오류가 보이나요?

라이트박스로 표시되어야 할 이미지가 있는 페이지에서 브라우저 콘솔에 오류가 없습니다.

> [@Johani](#):
>
> `your.site.com/logs`에서 특이한 점을 발견하나요?

정상적인 상태가 어떤 모습인지에 대한 기록이 현재 없기 때문에, 어떤 것이 특이한지 판단할 수 있는 방법이 없습니다.

정상적인 상태라면 로그에 아무것도 없어야 하나요?

현재 로그에 있는 내용은 다음과 같습니다.

 ![Screenshot%20from%202019-09-27%2021-25-43](https://global.discourse-cdn.com/meta/original/3X/a/2/a2a0ca57beb9de4e8dac6c9a202867920ad0143d.png)

더 자세히 살펴봐야 할 방향에 대한 힌트가 있을까요?

---

<div class="post-metadata">

### Author: ![seanmavley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/seanmavley/32/121505_2.png) [@seanmavley](https://meta.discourse.org/u/seanmavley)
#### Post date: [9월 27, 2019, 9:35오후 UTC](https://meta.discourse.org/t/lightbox-for-images-comes-by-default/129618/7 "2019-09-27T21:35:33Z")

</div>

그리고 추가로 말씀드리자면, 기본적으로 설치 후에도 이 설치 환경에서 라이트박스가 작동하지 않습니다.

[https://forum.devcongress.org](https://forum.devcongress.org/)

DigitalOcean에서 실행 중이며, 설치 가이드를 따랐고 CDN은 사용하지 않았습니다(모든 것이 VPS에서 로드됨).

> [@Johani](#):
>
> 거기에 Sidekiq에 대한 언급이 없는 것은 의도적인 것입니다. 모든 것이 사용자의 별도 조치 없이 배경에서 마법처럼 작동하도록 설계되었습니다.

마법은 훌륭하지만, 가이드에 해당 마법(자동화 과정)에 대한 섹션을 추가하고, 예상대로 작동하지 않을 경우 이를 우회하는 방법에 대해 언급하는 것이 도움이 될 때가 된 것 같습니다.

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [9월 27, 2019, 9:48오후 UTC](https://meta.discourse.org/t/lightbox-for-images-comes-by-default/129618/8 "2019-09-27T21:48:47Z")

</div>

추가 정보를 제공해 주셔서 감사합니다 👍

> [@seanmavley](#):
>
> 마법은 훌륭하지만, 가이드에 마법(자동 처리 기능)에 대한 섹션을 추가하고, 예상대로 작동하지 않을 경우 어떻게 우회할 수 있는지에 대한 설명을 넣는 것이 도움이 될 때라고 생각합니다.

그렇지는 않습니다. 대부분의 관리자는 _어떻게 작동하는지_보다 그것이 작동하는지 여부에만 관심이 있습니다. 그리고 다시 말하지만, 우리는 그것이 제대로 작동하는지에 대해 매우 신경 쓰고 있으며 작동하도록 보장합니다. 저는 방금 새로운 테스트 환경을 설정해 보았는데, 제 환경에서는 모든 것이 정상적으로 작동하는 것으로 보입니다. 개발자이시며 실제로 어떻게 작동하는지 깊이 파고 싶으시다면 [소스 코드](https://github.com/discourse/discourse)를 자유롭게 확인해 보시기 바랍니다.

> [@seanmavley](#):
>
> 그리고 언급할 점으로, 기본적으로 설치 후에도 이 설치 환경에서는 라이트박스(Lightbox)가 작동하지 않습니다.
> 
> [https://forum.devcongress.org](https://forum.devcongress.org/)

이해합니다. 하지만 해당 사이트를 둘러보았을 때, 이미지가 포함된 공개된 주제(topic)는 두 개뿐인 것 같습니다.

[https://forum.devcongress.org/t/created-to-initialize-tags/36](https://forum.devcongress.org/t/created-to-initialize-tags/36)

그리고

[https://forum.devcongress.org/t/anyone-still-experiencing-the-on-and-off-of-the-mtn-turbonet/49](https://forum.devcongress.org/t/anyone-still-experiencing-the-on-and-off-of-the-mtn-turbonet/49)

이 두 주제에 있는 이미지는 모두 너무 작아 라이트박스로 확대 표시할 수 있는 수준이 아닙니다. 이미지가 라이트박스로 표시되기 위한 최소 높이와 너비는 `max_image_width`와 `max_image_height`를 통해 제어할 수 있습니다.

이 값들보다 큰 치수의 이미지는 라이트박스로 표시됩니다. 따라서 필요에 따라 해당 값을 자유롭게 변경해 보시기 바랍니다.

하지만 더 큰 이미지를 추가한다고 해서 그곳에서 작동할 것이라고 말하려는 것은 아닙니다.

아직도 africa.packagetome.com의 문제를 확인하고 있습니다.

---

<div class="post-metadata">

### Author: ![seanmavley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/seanmavley/32/121505_2.png) [@seanmavley](https://meta.discourse.org/u/seanmavley)
#### Post date: [9월 27, 2019, 10:05오후 UTC](https://meta.discourse.org/t/lightbox-for-images-comes-by-default/129618/9 "2019-09-27T22:05:50Z")

</div>

> [@Johani](#):
>
> 그 두 주제에 있는 이미지들은 라이트박스(lightbox)로 표시하기에는 너무 작습니다.

맞습니다. 훨씬 더 큰 이미지를 업로드했는데, forum.devcongress.org의 라이트박스가 이제 제대로 작동합니다.

여기서 같은 이미지를 시도해 보았습니다: [https://africa.packagetome.com/t/test-photo-image/37](https://africa.packagetome.com/t/test-photo-image/37) . 사이드킥(Sidekiq) 작업이 시작되고 종료되는 과정을 확인했는데 문제는 없었지만, 라이트박스가 표시되지 않습니다.

또한 Firefox에서 보기를 시도해 보았습니다. 그래도 라이트박스가 나오지 않습니다.

> [@Johani](#):
>
> 개발자이시고 원리가 어떻게 작동하는지 정말 깊이 파고 싶으시다면, [소스 코드](https://github.com/discourse/discourse)를 자유롭게 살펴보세요.

네, 개발자입니다. 여기저기 둘러보면서 찾아볼 것입니다.

그리고 혹시 관련이 있을 수 있으니, 저는 2.4.0.beta4 ([02731ef33e](https://github.com/discourse/discourse/compare/02731ef33ef53acd3ad013b3ab29f6286eed8b9d...tests-passed))를 사용하고 있습니다.

---

<div class="post-metadata">

### Author: ![seanmavley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/seanmavley/32/121505_2.png) [@seanmavley](https://meta.discourse.org/u/seanmavley)
#### Post date: [9월 28, 2019, 12:40오전 UTC](https://meta.discourse.org/t/lightbox-for-images-comes-by-default/129618/10 "2019-09-28T00:40:40Z")

</div>

너무 답답해서,

- 새 드롭레트를 하나 만들었고,
- africa.khophi.com에 연결했으며,
- 이 링크([discourse/docs/INSTALL-cloud.md at main · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/master/docs/INSTALL-cloud.md))를 사용해 Discourse를 설치했습니다.
- 관리자 페이지도 열어보지 않았습니다. 바로 주제 생성으로 넘어갔습니다.

첫 번째 게시글은 이겁니다: [https://africa.khophi.com/t/testing-photo-lightbox/11](https://africa.khophi.com/t/testing-photo-lightbox/11)

이미지 크기는 5471 x 2878로, 라이트박스를 트리거하는 크기보다 훨씬 큽니다.

그런데도 라이트박스가 작동하지 않습니다. 이번엔 마법이 우리를(혹은 저를) 배신하고 있습니다. 그리고 이건 마법이니까 디버깅을 어디서부터 시작해야 할지조차 모르겠습니다. 콘솔에 에러가 없고, 로그에도 이 에러를 제외하고는 아무 에러가 없습니다:

```plaintext
TypeError: Cannot read property 'create' of undefined
    at https://africa.khophi.com/assets/vendor-fae393575cd14697b31e9fdbeb8c016d165a8a3af765ec8ca719a454585aedf4.js:5:2332
    at https://africa.khophi.com/assets/vendor-fae393575cd14697b31e9fdbeb8c016d165a8a3af765ec8ca719a454585aedf4.js:5:3286

```

@Johani 본인 환경에서는 실행했을 때 라이트박스가 작동했다니 흥미롭네요. 저는 설치 가이드를 문장 하나도 틀리지 않고, 완전히 새로운 드롭레트에서 그대로 따르고 있습니다.

필요하다면 나중에 설정 과정을 전체 화면 녹화해서 올리겠습니다. 여러분이 제가 어디에서든 ‘마법 반대’ 같은 짓을 하고 있지 않다는 걸 확인하실 수 있도록요. 박스에서 바로 꺼내 쓴 라이트박스(의도한 말장난입니다)가 작동하지 않는 것 같습니다. 적어도 제 환경에서는요.

지금까지 생각할 수 있는 모든 트러블슈팅을 해봤습니다. 빈 상태로 설치했는데도 여전히 라이트박스가 작동하지 않습니다.

아니면, 라이트박스가 작동하지 않는 새로운 Discourse 인스턴스를 설치하는 과정을 화면 녹화해서 올리겠습니다. 뭔가 잘못된 것 같고, 문서에 언급되지 않은 부분이 있는 것 같은 기분이 들어서요.

어쨌든, 제가 더 살펴볼 수 있는 트러블슈팅 팁이 있을까요?

---

<div class="post-metadata">

### Author: ![seanmavley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/seanmavley/32/121505_2.png) [@seanmavley](https://meta.discourse.org/u/seanmavley)
#### Post date: [10월 14, 2019, 2:01오후 UTC](https://meta.discourse.org/t/lightbox-for-images-comes-by-default/129618/11 "2019-10-14T14:01:53Z")

</div>

그래서 선택지가 거의 바닥나고, 더 찾아봐야 할 것도 없는 것 같아요.

이런 문제 겪는 사람이 저뿐인가요?

---

<div class="post-metadata">

### Author: ![mattonmg](https://avatars.discourse-cdn.com/v4/letter/m/8edcca/32.png) [@mattonmg](https://meta.discourse.org/u/mattonmg)
#### Post date: [11월 6, 2019, 8:57오전 UTC](https://meta.discourse.org/t/lightbox-for-images-comes-by-default/129618/12 "2019-11-06T08:57:24Z")

</div>

2.4.0.beta6과 Digital Ocean에서도 정확히 같은 문제가 있습니다.

---

<div class="post-metadata">

### Author: ![alchayward](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alchayward/32/220828_2.png) [@alchayward](https://meta.discourse.org/u/alchayward)
#### Post date: [5월 24, 2021, 5:04오후 UTC](https://meta.discourse.org/t/lightbox-for-images-comes-by-default/129618/13 "2021-05-24T17:04:00Z")

</div>

저도 같은 문제입니다. Digital Ocean도 마찬가지입니다.

---

<div class="post-metadata">

### Author: ![daemon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/daemon/32/256632_2.png) [@daemon](https://meta.discourse.org/u/daemon)
#### Post date: [5월 24, 2021, 5:19오후 UTC](https://meta.discourse.org/t/lightbox-for-images-comes-by-default/129618/14 "2021-05-24T17:19:07Z")

</div>

나도 같은 문제가 있습니다  
[https://meta.discourse.org/t/lightbox-not-working/190660](https://meta.discourse.org/t/lightbox-not-working/190660)
