# Slick Image Gallery
**URL:** https://meta.discourse.org/t/slick-image-gallery/81952
**Category:** Theme component
**Tags:** broken
**Created:** [6월 29, 2018, 6:15오전 UTC](https://meta.discourse.org/t/slick-image-gallery/81952 "2018-06-29T06:15:00Z")
**Posts on this page:** 20
**Page:** 2
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [6월 30, 2018, 7:26오전 UTC](https://meta.discourse.org/t/slick-image-gallery/81952/21 "2018-06-30T07:26:17Z")
This has to do with the aspect ratio of your images. Slick always maintains the original aspect ratio of the image.
The height of each gallery is determined by the height of the tallest image in it. The width of the gallery is always the full width of the post.
The images you add are slotted in and centred both vertically and horizontally in the gallery. This prevents the page content from moving around when you navigate between images of different heights and keeps the navigation buttons fixed in one place.
You can control the color of the background with:
```plaintext
.slick-track {
background: black;
}
```
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [6월 30, 2018, 7:26오전 UTC](https://meta.discourse.org/t/slick-image-gallery/81952/22 "2018-06-30T07:26:17Z")
> [@Francois\_Douville](#):
>
> Is it possible to display another icon? My community thinks they have to display slick even if they have 1 image.
> [@Francois\_Douville](#):
>
> Is it normal that the text is not displaying?
>
> [
> Capture d’écran 2018-05-19 à 09.16.44.png718x202 19.1 KB
> ](https://global.discourse-cdn.com/meta/original/3X/d/2/d29269e4ab2d90ef879bdc349a15192ea4ae83dc.png)
>
> [](https://global.discourse-cdn.com/meta/original/3X/f/a/faae932eb5cb6a6ee350158c5fcd22c4bae63094.png)
Crosspost
> [@Tiles Image Gallery](https://meta.discourse.org/t/tiles-image-gallery/81950/50):
>
> Yes, but that’s not how it’s supposed to work. If you upload a group of images together, then there’s no line-breaks between them. I will definitely look into ways to prevent this from happening, but the best thing I can recommend now is to create a tutorial topic on your site if your users are having such a big problem with it. I pushed updates to Tiles / Slick, so, please update the themes. The update ensures that they work with the image [LazyLoad theme](https://meta.discourse.org/t/lazyload-images/90472) which I recommend you use if your post…
* * *
I took a look at the translation issue @Francois_Douville I have a temporary workaround for now. You need to make a small edit to the theme. Go to the `` section and look for this:
You need to change `en` to `fr`
So
```plaintext
I18n.translations.en.js.composer.tiles_add_images_prompt = settings.Tiles_add_images_prompt;
I18n.translations.en.js.tiles_gallery_button = settings.Tiles_button_text;
```
becomes:
```plaintext
I18n.translations.fr.js.composer.tiles_add_images_prompt = settings.Tiles_add_images_prompt;
I18n.translations.fr.js.tiles_gallery_button = settings.Tiles_button_text;
```
That’s all you need to change.
Because this is a local edit, you need to reapply it after every theme update, but it’s not a big problem because you only need to change two letters.
I will keep looking for a better way to integrate translations into themes and will keep you posted.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [6월 30, 2018, 7:26오전 UTC](https://meta.discourse.org/t/slick-image-gallery/81952/23 "2018-06-30T07:26:17Z")
Tiles / Slick got a tiny update today that deals with the translation issue. They will now use the awesome locale check described in @simon’s great post [here](https://meta.discourse.org/t/what-should-i18n-be-replaced-with-in-new-versions/90944/2) 🙌
The locale for the translated strings will automatically be set and you will not need to mess around with the theme code after this update.
---
### Author:  [@jamesmarkcook](https://meta.discourse.org/u/jamesmarkcook)
#### Post date: [10월 25, 2018, 10:58오후 UTC](https://meta.discourse.org/t/slick-image-gallery/81952/24 "2018-10-25T22:58:00Z")
This is refusing to work on [v2.2.0.beta3 +130](https://github.com/discourse/discourse/compare/56e0f47bcd183f9d8e5cde853bcb9f8fe38eebf7...tests-passed)
My images are larger than the maximum allowed dimensions, I get the gallery preview but in the actual post the gallery isn’t displayed, just normal images. Could you confirm that this works on the version I have installed? Thanks
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [10월 26, 2018, 2:24오전 UTC](https://meta.discourse.org/t/slick-image-gallery/81952/25 "2018-10-26T02:24:58Z")
Sure, I checked and everything seems to be OK on `v2.2.0.beta3 +136`
[https://global.discourse-cdn.com/meta/original/3X/d/5/d5d8e2578f1d2834fd6df6354b59a721a6aea90e.mp4](https://global.discourse-cdn.com/meta/original/3X/d/5/d5d8e2578f1d2834fd6df6354b59a721a6aea90e.mp4)
> [@jamesmarkcook](#):
>
> just normal images
Do you mean lighboxes or just images? Slick only targets lighboxes so that would explain why it’s not working for you. If that’s the case, It sounds like sidekiq is paused / not running on your site. Try checking
`your.domain.com/sidekiq`
---
### Author:  [@jamesmarkcook](https://meta.discourse.org/u/jamesmarkcook)
#### Post date: [10월 26, 2018, 8:04오전 UTC](https://meta.discourse.org/t/slick-image-gallery/81952/26 "2018-10-26T08:04:34Z")
Thanks for the reply. There was an unknown issue on my site that was causing lightboxes to take a few minutes to generate, and it was this that was causing this plugin not to work. All seems to be working now 👍
---
### Author:  [@cwmke](https://meta.discourse.org/u/cwmke)
#### Post date: [11월 9, 2018, 5:14오후 UTC](https://meta.discourse.org/t/slick-image-gallery/81952/27 "2018-11-09T17:14:40Z")
@Johani I’m wondering why this component calls slick.min.js from cloudflare instead of being packaged with the component?
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [11월 10, 2018, 7:12오전 UTC](https://meta.discourse.org/t/slick-image-gallery/81952/28 "2018-11-10T07:12:50Z")
> [@cwmke](#):
>
> I’m wondering why this component calls slick.min.js from cloudflare instead of being packaged with the component?
At the time, the Discourse theme system was a bit different.
Scripts added to a theme / component used to be loaded inline in the `` of the document. It made a lot more sense to load it from a CDN.
Discourse themes now handle scripts much better thanks to @xrav3nz’s work ❤ 🙌
[https://github.com/discourse/discourse/commit/6acdea37c4e77723c774152e9076dfedda99493a](https://github.com/discourse/discourse/commit/6acdea37c4e77723c774152e9076dfedda99493a)
scripts are now pulled into an external `theme.js` file.
So, it now makes sense to bundle slick into the theme instead of loading it from a CDN.
I just pushed a small update for that 👍
---
### Author:  [@cwmke](https://meta.discourse.org/u/cwmke)
#### Post date: [11월 10, 2018, 2:51오후 UTC](https://meta.discourse.org/t/slick-image-gallery/81952/29 "2018-11-10T14:51:43Z")
Thanks for the explanation and the quick fix!
---
### Author:  [@Globulle](https://meta.discourse.org/u/Globulle)
#### Post date: [12월 21, 2018, 6:02오후 UTC](https://meta.discourse.org/t/slick-image-gallery/81952/30 "2018-12-21T18:02:52Z")
Hi,
For an obscure reason I cannot achieve the expected slideshow. My code is :
```
```
I obtain :
- the 1st two images outside the slideshow
- the 3rd, 6th and 7th images are in a slideshow without the 4th and 5th (don’t show up at all)
I assume this is linked to the different sizes of images… so is there a workaround other than changing the size of the source pictures? It seems that changing the size parameter in the code does not improve things.
Any help would be appreciated! 🙂
EDIT : now I’ve tried with all images reduced to the same size : they are all displayed one below the other, and no slideshow at all… ☹
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [12월 21, 2018, 6:48오후 UTC](https://meta.discourse.org/t/slick-image-gallery/81952/31 "2018-12-21T18:48:29Z")
Thank you for the detailed feedback 👍
The issue you’re seeing occurs because you’re using small images. The images you’re using are not large enough for Discourse to generate lightboxes.
There are two relevant settings for this
`max_image_height` which defaults to 500px
`max_image_width` which defaults to 690px.
Discourse looks at images uploaded in posts and if they exceed the demisions set in either of those settings, it creates lightboxes for them.
Now, you’re free to change those the values of those settings on your site to force Discourse to generate lightboxes for smaller image; however, I would not recommend doing that.
That setting is also linked to the max deminsions an image can be displayed at, so if you change max-width to say… 500px, then the maximum width any image will display at in a post will also be 500px - the same applies to changing the max-height setting.
What I would recommend is to use larger images that exceed either the max-height setting or the max-width setting. The component would then work with those images without any issues.
Let me know if the problem persists.
---
### Author:  [@elGrande](https://meta.discourse.org/u/elGrande)
#### Post date: [1월 18, 2019, 8:20오후 UTC](https://meta.discourse.org/t/slick-image-gallery/81952/32 "2019-01-18T20:20:10Z")
After the last update now the arrows are missing:
Desktop:
Mobile:
---
### Author:  [@ckshen](https://meta.discourse.org/u/ckshen)
#### Post date: [5월 12, 2019, 5:17오전 UTC](https://meta.discourse.org/t/slick-image-gallery/81952/33 "2019-05-12T05:17:46Z")
Am I the only one who see two of the same icons for the Slick Image Gallery? It didn’t use to be like that.
When I removed the component from my theme, both icons disappeared. When I added the component back, they both reappeared. Both buttons serve the same function.
---
### Author:  [@Chaboi\_3000](https://meta.discourse.org/u/Chaboi_3000)
#### Post date: [5월 12, 2019, 5:35오전 UTC](https://meta.discourse.org/t/slick-image-gallery/81952/34 "2019-05-12T05:35:06Z")
I can’t reproduce this using **only** the theme component.
---
### Author:  [@internet\_cookie](https://meta.discourse.org/u/internet_cookie)
#### Post date: [5월 19, 2020, 5:44오후 UTC](https://meta.discourse.org/t/slick-image-gallery/81952/35 "2020-05-19T17:44:23Z")
콘솔에서 이 오류가 발생합니다:
```plaintext
`decorateCooked`는 메모리 누수를 방지하기 위해 `id` 옵션이 필요합니다
```
---
### Author:  [@mentalstring](https://meta.discourse.org/u/mentalstring)
#### Post date: [9월 16, 2020, 7:56오전 UTC](https://meta.discourse.org/t/slick-image-gallery/81952/36 "2020-09-16T07:56:12Z")
저희는 Slick과 Tile 이미지 갤러리를 모두 사용하고 있습니다(둘 다 훌륭합니다!). 한 사용자는 모바일 버전에서 Discourse 아이콘이 화면 밖으로 밀려나는 문제를 발견했습니다(예: 투표용 기어 아이콘 등):
이것은 composer 아이콘을 사용하는 Discourse 설치 환경에서 활성화된 다른 요소에 따라 발생하는 경계 사례(edge case)일 수 있다고 생각합니다. 어쨌든, 모바일에서 이미지 업로드 버튼은 실제로 오른쪽 하단에 위치해 있으며, 더 많은 아이콘을 배치할 여유 공간이 있는 영역입니다. 갤러리 아이콘도 그쪽으로 이동시키는 것이 합리적일까요? 그렇게 하면 상단 아이콘이 비좁게 배치되는 문제를 해결할 수 있을 뿐만 아니라, 논리적으로도 더 일관성이 생길 것입니다(모든 이미지 관련 아이콘을 한곳에 모으는 것).
---
### Author:  [@lyseoy](https://meta.discourse.org/u/lyseoy)
#### Post date: [9월 28, 2020, 4:00오전 UTC](https://meta.discourse.org/t/slick-image-gallery/81952/37 "2020-09-28T04:00:24Z")
배경색은 어디에서/어떻게 변경하나요?
아래 방법은 작동하지 않았습니다:
---
### Author:  [@serialcode](https://meta.discourse.org/u/serialcode)
#### Post date: [11월 26, 2021, 5:13오후 UTC](https://meta.discourse.org/t/slick-image-gallery/81952/38 "2021-11-26T17:13:31Z")
저도 같은 문제예요!!!
---
### Author:  [@Caswal\_Parker](https://meta.discourse.org/u/Caswal_Parker)
#### Post date: [4월 13, 2022, 3:48오전 UTC](https://meta.discourse.org/t/slick-image-gallery/81952/39 "2022-04-13T03:48:29Z")
이것을 설치했는데:
하지만 작성자 바(composer bar)에 나타나지 않아요?
---
### Author:  [@Caswal\_Parker](https://meta.discourse.org/u/Caswal_Parker)
#### Post date: [5월 13, 2022, 8:53오전 UTC](https://meta.discourse.org/t/slick-image-gallery/81952/40 "2022-05-13T08:53:50Z")
최근 업데이트로 인해 발생한 문제인데, 2.9.0 베타 4로 업데이트하면 해결된 것 같나요?
[이전 페이지](https://meta.discourse.org/t/slick-image-gallery/81952.md?page=1)
[다음 페이지](https://meta.discourse.org/t/slick-image-gallery/81952.md?page=3)