精彩图片画廊

[Johani (Joe)]

响应式轮播图库

12KB（Gzip 压缩）
初始加载时发出 2 个 HTTP 请求
支持 IE 11+ 及现代浏览器

Github 仓库链接

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

桌面端

---

---

视频

移动端

---

使用 Ken Wheeler 的 Slick 库构建 - MIT 许可证

“像培根一样免费”

---

如何安装此组件？

您只需像安装其他主题组件一样安装此组件。请按照官方指南中的说明操作：

Installing a theme or theme component

This is a guide for installing and managing themes and theme components in Discourse. 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…

完成后，只需将该组件添加到您当前的主题中即可。完成！

---

如何使用此组件？

该组件会在编辑器中添加一个按钮。

因此，您只需：

1. 使用默认的 Discourse 上传按钮上传一批图片，然后选中相关代码：

2. 点击图库按钮。

您将在预览窗格中看到所选图片的静态预览：

完成！

---

还有其他需要注意的吗？

该组件将继承当前主题的样式。

以下是该主题组件在不同主题下的运行效果：

我可以同时使用 Slick 和 Tiles 吗？

当然可以！

只需将 Slick 和 Tiles 都作为主题组件即可实现。

例如：

然后，您可以将示例中的“我的主题”设为默认主题，或设为用户可选主题，这样它就会同时包含 Slick 和 Tiles。

---

欢迎提交错误报告、建议或拉取请求。

[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 tests 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