Slick Image Gallery

Johani · June 29, 2018, 6:15am

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:

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 · June 29, 2018, 6:56am

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

BlackKnob · June 30, 2018, 7:26am

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

Johani · June 30, 2018, 7:26am

Good catch, thanks for reporting

It’s all fixed now:

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

vchrizz · June 30, 2018, 7:26am

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 · June 30, 2018, 7:26am

Crosspost

Johani · June 30, 2018, 7:26am

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 · June 30, 2018, 7:26am

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

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

Johani · June 30, 2018, 7:26am

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?

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

Francois_Douville · June 30, 2018, 7:26am

Thanks!

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

Johani · June 30, 2018, 7:26am

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

Francois_Douville · June 30, 2018, 7:26am

No problem!

Images

poulailler%205 poulailler%204

Johani · June 30, 2018, 7:26am

cross post:

Francois_Douville · June 30, 2018, 7:26am

Is it normal that the text is not displaying?

Vaping_Community · June 30, 2018, 7:26am

This isn’t working for me:

Discourse: v2.0.0.beta10 +49

Johani · June 30, 2018, 7:26am

@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 · June 30, 2018, 7:26am

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 · June 30, 2018, 7:26am

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

tshenry · June 30, 2018, 7:26am

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 · June 30, 2018, 7:26am

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