Slick Image Gallery

[Johani (Joe)]

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

Desktop

---

---

Video

Mobile

---

Built using Ken Wheeler’s Slick library - MIT 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:

Install a theme or theme component

Importing new themes and theme components head to Admin → Customize → Themes and press the Install button. [image] [image] From the Install dialog, you can … choose popular Discourse themes and theme components install from a Git repository URL link install from your local device (rare) If you are installing a complete theme, you’re done! If you install a theme component , you will need to add that theme component to your active themes. Keep reading. Add theme components to a …

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.

So all you have to do is:

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

2- Click the gallery button.

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

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:

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

You bet!

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

Like this:

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.

[tshenry (Taylor)]

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

[BlackKnob]

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

[Johani (Joe)]

Good catch, thanks for reporting

It’s all fixed now:

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

[vchrizz (Christoph Loesch)]

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)

[Johani (Joe)]

Crosspost

Tiles Image Gallery

Hi @kaefert, @vchrizz and thank you for reporting 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. [Capture] 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. …

[Johani (Joe)]

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.

[Francois_Douville (François Douville)]

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

Also I did some test and it’s not working…

[Johani (Joe)]

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?

@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:

[Francois_Douville (François Douville)]

Thanks!

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

[Johani (Joe)]

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

[Francois_Douville (François Douville)]

No problem!

Images

[Johani (Joe)]

cross post:

Tiles Image Gallery

Thank you for uploading the images @Francois_Douville 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: [Capture] What this means is - unless you change the default settings If an image has a width that exceeds 690px, a l…

[Francois_Douville (François Douville)]

Is it normal that the text is not displaying?

[Vaping_Community]

This isn’t working for me:

Discourse: v2.0.0.beta10 +49

[Johani (Joe)]

@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.

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

[Vaping_Community]

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!

[Francois_Douville (François Douville)]

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

[tshenry (Taylor)]

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

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

[elGrande]

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