# Slick Image Gallery

**URL:** https://meta.discourse.org/t/slick-image-gallery/81952
**Category:** Theme component
**Tags:** broken
**Created:** [June 29, 2018, 6:15am UTC](https://meta.discourse.org/t/slick-image-gallery/81952 "2018-06-29T06:15:00Z")
**Posts on this page:** 20
**Page:** 1

<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: [June 29, 2018, 6:15am UTC](https://meta.discourse.org/t/slick-image-gallery/81952/1 "2018-06-29T06:15:00Z")

</div>

#### Responsive Carousel Galleries

**12KB** (Gzip)  
**2 http requests** on initial load  
IE 11+ & modern browsers

[Github repository link](https://github.com/hnb-ku/Discourse-Slick-image-gallery)

`https://github.com/hnb-ku/Discourse-Slick-image-gallery`

#### Desktop

* * *

 ![Capturea1](https://global.discourse-cdn.com/meta/original/3X/c/1/c1d7739fc086c7e58ce85914e565e422b23583b8.jpg) ![Capturea](https://global.discourse-cdn.com/meta/original/3X/6/d/6d9b12d83c53f22d3aa0256dd7214e056ec59e2f.jpg)

* * *

#### Video

[https://global.discourse-cdn.com/meta/original/3X/5/6/5677f8ecc7289d427e855d47df3579a656857c69.mp4](https://global.discourse-cdn.com/meta/original/3X/5/6/5677f8ecc7289d427e855d47df3579a656857c69.mp4)

#### Mobile

* * *

 ![Capturea2](https://global.discourse-cdn.com/meta/original/3X/a/b/ab3ce97626c60609383ac3b6f390d14a551cad4a.PNG) ![Capturea4](https://global.discourse-cdn.com/meta/original/3X/f/6/f652b2a6cddc511a23b019a927411bfe72df9d95.PNG) ![Capturea3](https://global.discourse-cdn.com/meta/original/3X/1/c/1cf4baae0f4b8b40b627c2950a88ab81a0bb09b1.jpg)

Built using [Ken Wheeler](https://github.com/desandro)’s [Slick](http://kenwheeler.github.io/slick/) library - [MIT license](https://github.com/kenwheeler/slick/blob/master/LICENSE)

_“Free as in Bacon”_

* * *

#### How do I install this?

You install this component just like any other theme. Follow the instructions in the official guide:

> [@Installing a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682):
>
> bookmark This is a guide for installing and managing themes and theme components in Discourse. person_raising_hand Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…

Once you’re done, simply add the component to your current theme. Done!

* * *

#### How do I use this?

This component adds a button to the composer.

 ![Untitled2](https://global.discourse-cdn.com/meta/original/3X/f/f/ffc880f90d312846b7b39dcbc8db938837b49039.jpg)

So all you have to do is:

1- Upload a bunch of images using the default Discourse upload button then highlight the code:

 ![Capturea6](https://global.discourse-cdn.com/meta/original/3X/7/f/7f3656eefd646556626dae9a2287c912eec5dedd.PNG)

2- Click the gallery button.

You will get a **static preview** of the the selected images in the preview pane:

 ![Capturea7](https://global.discourse-cdn.com/meta/original/3X/6/a/6a4d9eb73eb5ce1226fa730f249382ad8956a26b.jpg)

Done!

* * *

#### Anything else I need to know?

This component will inherit the current theme’s styles.

Here’s the theme component running on a different theme:

 ![Capturea5](https://global.discourse-cdn.com/meta/original/3X/0/f/0f83d188c71854931e89316de40d3ab1fa4c1cea.jpg)

#### Can I use both Slick and Tiles at the same time?

You bet! 😅

 ![Capture999](https://global.discourse-cdn.com/meta/original/3X/a/1/a1b14744165035f183b7473e81e094052628ac84.jpg)

This is possible by making both slick and tiles components of a theme.

Like this:

 ![Capture](https://global.discourse-cdn.com/meta/original/3X/d/6/d6b7f2957b6486135d00c0b2ff72180a9c019c40.PNG)

You can then make “my theme” in the example above the default theme or make it user-selectable and it would include both Slick and Tiles.

* * *

Bug reports / Suggestions / PRs welcome. 🍷

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [June 29, 2018, 6:56am UTC](https://meta.discourse.org/t/slick-image-gallery/81952/2 "2018-06-29T06:56:31Z")

</div>

Yes! Been waiting for this. Keep up the awesome work 👏

---

<div class="post-metadata">

### Author: ![BlackKnob](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/blackknob/32/93549_2.png) [@BlackKnob](https://meta.discourse.org/u/BlackKnob)
#### Post date: [June 30, 2018, 7:26am UTC](https://meta.discourse.org/t/slick-image-gallery/81952/3 "2018-06-30T07:26:17Z")

</div>

I can’t see the grey navigation dots under the gallery when using with Material Design Theme.

 ![04%20PM](https://global.discourse-cdn.com/meta/original/3X/3/6/3682b0c631312c8fcdda4400939ffebc40c54165.png)

---

<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: [June 30, 2018, 7:26am UTC](https://meta.discourse.org/t/slick-image-gallery/81952/4 "2018-06-30T07:26:17Z")

</div>

Good catch, thanks for reporting 🌻

It’s all fixed now:

 ![Capture](https://global.discourse-cdn.com/meta/original/3X/8/8/885bfc35adfd243a821fca7e360848ff8c9b1786.jpg)

Go ahead and update the theme it won’t be an issue anymore.

---

<div class="post-metadata">

### Author: ![vchrizz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vchrizz/32/90441_2.png) [@vchrizz](https://meta.discourse.org/u/vchrizz)
#### Post date: [June 30, 2018, 7:26am UTC](https://meta.discourse.org/t/slick-image-gallery/81952/5 "2018-06-30T07:26:17Z")

</div>

seems like slick does not work with recent 2.0.0.beta5  
after upgrade from 2.0.0.beta4 (where it worked nicely), now the page simply does not load and in browser console i see the following error twice.

```
_ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:29446 TypeError: Cannot set property 'slick_add_images_prompt' of undefined
at (index):104
at O (_application-4f2596d165aa73d5730c4d02b5334e59b8f55b495d4197974d87bd84efa1c94b.js:21941)
at Object.initialize (_application-4f2596d165aa73d5730c4d02b5334e59b8f55b495d4197974d87bd84efa1c94b.js:6960)
at _ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:16963
at e.each (_ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:15063)
at e.topsort (_ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:15030)
at e.topsort (_ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:14975)
at s._runInitializer (_ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:16978)
at s.runInstanceInitializers (_ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:16962)
at s._bootSync (_ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:15281)

```

---

<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: [June 30, 2018, 7:26am UTC](https://meta.discourse.org/t/slick-image-gallery/81952/6 "2018-06-30T07:26:17Z")

</div>

Crosspost

> [@Tiles Image Gallery](https://meta.discourse.org/t/tiles-gallery-component/81950/11):
>
> Hi @kaefert, @vchrizz and thank you for reporting sunflower My apologies for not getting to you earlier. the good news is that I have just tested on v2.0.0.beta5 +120 and both Slick and Tiles seem to be working. My guess is that subsequent commits to Discourse addressed the issue. Are you still facing the same problem? Even better news is that I tinkered a little bit with both Slick and Tiles and they now have much more targeted firing methods that will only fire when needed. …

---

<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: [June 30, 2018, 7:26am UTC](https://meta.discourse.org/t/slick-image-gallery/81952/7 "2018-06-30T07:26:17Z")

</div>

There was a small update today that fixes the translation error **_for good!_** If you’re on beta 7 and face any errors, please update the theme. 🌻

---

<div class="post-metadata">

### Author: ![Francois\_Douville](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/francois_douville/32/94221_2.png) [@Francois\_Douville](https://meta.discourse.org/u/Francois_Douville)
#### Post date: [June 30, 2018, 7:26am UTC](https://meta.discourse.org/t/slick-image-gallery/81952/8 "2018-06-30T07:26:17Z")

</div>

Great theme! How can I translate strings? (I am French)

Also, I did some tests and it’s not working…

 ![31344335_10155206836100706_8845500994541322240_n](https://global.discourse-cdn.com/meta/original/3X/4/5/4524d408c50e1541dcc7f346729564679799296b.png) ![31353698_10155206836085706_1479049121695268864_n](https://global.discourse-cdn.com/meta/original/3X/0/b/0be342406efc4027cb7643cbba1abb5e8f62bd10.png)

---

<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: [June 30, 2018, 7:26am UTC](https://meta.discourse.org/t/slick-image-gallery/81952/9 "2018-06-30T07:26:17Z")

</div>

I just tested and everything seems to be working ok? Are you seeing any errors in the console? What version of Discourse are you on?

 ![3](https://global.discourse-cdn.com/meta/original/3X/0/a/0adf9733db248a0e7cadac51924435e456be2012.jpg)

> [@Francois\_Douville](#):
>
> How can I translate strings? (I am french)

Like with Tiles, I also added a couple of settings that will allow you to change the strings:

 ![2](https://global.discourse-cdn.com/meta/original/3X/a/2/a2fb69d53ff19f5bd58d52c1ecd84375c6036f8e.PNG)

---

<div class="post-metadata">

### Author: ![Francois\_Douville](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/francois_douville/32/94221_2.png) [@Francois\_Douville](https://meta.discourse.org/u/Francois_Douville)
#### Post date: [June 30, 2018, 7:26am UTC](https://meta.discourse.org/t/slick-image-gallery/81952/10 "2018-06-30T07:26:17Z")

</div>

Thanks!

But I still have problem with the plugin. The theme is up to date.

 ![09](https://global.discourse-cdn.com/meta/original/3X/a/6/a690183dfdbe2120b32d428bbd575fd08dd78788.png) ![05](https://global.discourse-cdn.com/meta/original/3X/5/f/5f79f1d91f2690bbca2a689a6bf0632e1b99fec1.png)

---

<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: [June 30, 2018, 7:26am UTC](https://meta.discourse.org/t/slick-image-gallery/81952/11 "2018-06-30T07:26:17Z")

</div>

Can you please upload those images here so I can test? 🌻

---

<div class="post-metadata">

### Author: ![Francois\_Douville](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/francois_douville/32/94221_2.png) [@Francois\_Douville](https://meta.discourse.org/u/Francois_Douville)
#### Post date: [June 30, 2018, 7:26am UTC](https://meta.discourse.org/t/slick-image-gallery/81952/12 "2018-06-30T07:26:17Z")

</div>

No problem!

> **Images**
>
> ![poulailler%205](https://global.discourse-cdn.com/meta/original/3X/d/a/daf458ca23c32fae66c151da8ee1119ce2bb14ef.JPG) ![poulailler%204](https://global.discourse-cdn.com/meta/original/3X/2/1/211efb0b44d76bf8ea38f892643e72f06952a6af.JPG) ![Poulailler%203](https://global.discourse-cdn.com/meta/original/3X/a/6/a6359e54b3056adc479740831c2829519b2ff147.JPG) ![Poulailler%202](https://global.discourse-cdn.com/meta/original/3X/1/7/172ba6360d92bd2fd9a0d32146937f42663ef91d.JPG)

---

<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: [June 30, 2018, 7:26am UTC](https://meta.discourse.org/t/slick-image-gallery/81952/13 "2018-06-30T07:26:17Z")

</div>

cross post:

> [@Tiles Image Gallery](https://meta.discourse.org/t/tiles-image-gallery/81950/39):
>
> Thank you for uploading the images @Francois_Douvillesunflower The problem here is still the same. It’s a combination the size of the images you’re using and your Discourse settings. If an image is not big enough (height and/or width) to exceed the default settings in your Discourse install, no lightbox view will be created for it. The default settings look like this: What this means is - unless you change the default settings If an image has a width that exceeds 690px, a l…

---

<div class="post-metadata">

### Author: ![Francois\_Douville](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/francois_douville/32/94221_2.png) [@Francois\_Douville](https://meta.discourse.org/u/Francois_Douville)
#### Post date: [June 30, 2018, 7:26am UTC](https://meta.discourse.org/t/slick-image-gallery/81952/14 "2018-06-30T07:26:17Z")

</div>

Is it normal that the text is not displaying?

 ![44](https://global.discourse-cdn.com/meta/original/3X/d/2/d29269e4ab2d90ef879bdc349a15192ea4ae83dc.png) ![58](https://global.discourse-cdn.com/meta/original/3X/f/a/faae932eb5cb6a6ee350158c5fcd22c4bae63094.png)

---

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [June 30, 2018, 7:26am UTC](https://meta.discourse.org/t/slick-image-gallery/81952/15 "2018-06-30T07:26:17Z")

</div>

This isn’t working for me:

Discourse: [v2.0.0.beta10 +49](https://github.com/discourse/discourse/compare/9f422c93f67f156c3216a57cdf1afc0c5fc94e28...tests-passed)

---

<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: [June 30, 2018, 7:26am UTC](https://meta.discourse.org/t/slick-image-gallery/81952/16 "2018-06-30T07:26:17Z")

</div>

@Francois_Douville

No, it’s not normal. I think I know what the problem is, the theme might need to be translated. I will post an update on that soon.

@Vaping_Community

I just checked on `v2.0.0.beta10 +49` and everything seems to be working in order.

 ![Capture](https://global.discourse-cdn.com/meta/original/3X/0/d/0ddab8b2751a001160f50cd521976303c99f72ea.jpg)

Can you share more details about what’s happening on your install?

---

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [June 30, 2018, 7:26am UTC](https://meta.discourse.org/t/slick-image-gallery/81952/17 "2018-06-30T07:26:17Z")

</div>

For some reason it wasn’t working with larger images, had to reset some settings and refresh to get it to work but it is working now, great theme addon, thanks!

---

<div class="post-metadata">

### Author: ![Francois\_Douville](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/francois_douville/32/94221_2.png) [@Francois\_Douville](https://meta.discourse.org/u/Francois_Douville)
#### Post date: [June 30, 2018, 7:26am UTC](https://meta.discourse.org/t/slick-image-gallery/81952/18 "2018-06-30T07:26:17Z")

</div>

Is it possible to display another icon? My community thinks they have to display slick even if they have 1 image.

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [June 30, 2018, 7:26am UTC](https://meta.discourse.org/t/slick-image-gallery/81952/19 "2018-06-30T07:26:17Z")

</div>

If you have a font-awesome icon in mind, you can do something like so:

```plaintext
.SlickGallery .fa-picture-o:before {
    content: "\f152"; // font awesome code
}

```

---

<div class="post-metadata">

### Author: ![elGrande](https://avatars.discourse-cdn.com/v4/letter/e/ecc23a/32.png) [@elGrande](https://meta.discourse.org/u/elGrande)
#### Post date: [June 30, 2018, 7:26am UTC](https://meta.discourse.org/t/slick-image-gallery/81952/20 "2018-06-30T07:26:17Z")

</div>

**Later edit:** my mistake.

The right mode is like this:

```
<div data-theme-slick="1">

![Assassins_Creed_Odyssey|690x388](upload://5G3oHJo7Ndmg8bOcmAUqFCve1I.jpg)
![Assassins_Creed_Odyssey_3|690x388](upload://3Y29aUZR2NvZqzqT2z2M5WC6WlM.jpg)
![Assassins_Creed_Odyssey_2|690x388](upload://mJXUqsUu1KEYiTWeyPpSyRQ2eVc.jpg)
![Assassins_Creed_Odyssey_1|690x388](upload://fLeh0qfIhTuYCI4sSi6W1I8dQ2g.jpg)
![Assassins_Creed_Odyssey_4|690x388](upload://iFBHuU1xflxCZlJneTUKiMUjru2.jpg)

</div>

```

Not like this:

```
 <div data-theme-slick="1">
    ![Assassins_Creed_Odyssey|690x388](upload://5G3oHJo7Ndmg8bOcmAUqFCve1I.jpg)
    </div>

  <div data-theme-slick="1">
    ![Assassins_Creed_Odyssey_3|690x388](upload://3Y29aUZR2NvZqzqT2z2M5WC6WlM.jpg)
    </div>

 <div data-theme-slick="1">
   ![Assassins_Creed_Odyssey_2|690x388](upload://mJXUqsUu1KEYiTWeyPpSyRQ2eVc.jpg)
    </div>

```

How can I make the images look like here? Without the black background.

> **Summary**
>
> ![Capturea5](https://global.discourse-cdn.com/meta/original/3X/0/f/0f83d188c71854931e89316de40d3ab1fa4c1cea.jpg)
> 
> ![images-3](https://global.discourse-cdn.com/meta/original/3X/7/1/717dc07a9cac41ca86bf2190bef33892f22f7c3f.jpg)

[Next page](https://meta.discourse.org/t/slick-image-gallery/81952.md?page=2)
