シックな画像ギャラリー

Johani · 2018 年 6 月 29 日午前 6:15

レスポンシブカルーセルギャラリー

12KB (Gzip)
初回読み込み時に 2 回の HTTP リクエスト
IE 11+ およびモダンブラウザ

Github リポジトリリンク

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

デスクトップ

ビデオ

モバイル

Ken Wheeler の Slick ライブラリを使用して構築されています - MIT ライセンス

「ベーコンのように自由」

インストール方法は？

このコンポーネントは、他のテーマと同様にインストールします。公式ガイドの手順に従ってください。

完了したら、現在のテーマにコンポーネントを追加するだけです。完了！

使い方は？

このコンポーネントは、コンポーザーにボタンを追加します。

したがって、必要な作業は以下の通りです。

デフォルトの Discourse アップロードボタンを使用して複数の画像をアップロードし、コードをハイライトします。

ギャラリーボタンをクリックします。

プレビューペインに選択された画像の静的プレビューが表示されます。

完了！

その他、知っておくべきことはありますか？

このコンポーネントは、現在のテーマのスタイルを継承します。

異なるテーマで実行されているテーマコンポーネントの例：

Slick と Tiles を同時に使用できますか？

もちろん！

これは、Slick と Tiles の両方をテーマのコンポーネントにすることで実現できます。

例：

上記の例の「my theme」をデフォルトテーマにするか、ユーザーが選択可能にすることで、Slick と Tiles の両方を含めることができます。

バグ報告、提案、PR を歓迎します。

tshenry · 2018 年 6 月 29 日午前 6:56

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

BlackKnob · 2018 年 6 月 30 日午前 7:26

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

Johani · 2018 年 6 月 30 日午前 7:26

Good catch, thanks for reporting

It’s all fixed now:

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

vchrizz · 2018 年 6 月 30 日午前 7:26

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 · 2018 年 6 月 30 日午前 7:26

Crosspost

Johani · 2018 年 6 月 30 日午前 7:26

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 · 2018 年 6 月 30 日午前 7:26

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

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

Johani · 2018 年 6 月 30 日午前 7:26

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 · 2018 年 6 月 30 日午前 7:26

Thanks!

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

Johani · 2018 年 6 月 30 日午前 7:26

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

Francois_Douville · 2018 年 6 月 30 日午前 7:26

No problem!

Images

poulailler%205 poulailler%204

Johani · 2018 年 6 月 30 日午前 7:26

cross post:

Francois_Douville · 2018 年 6 月 30 日午前 7:26

Is it normal that the text is not displaying?

Vaping_Community · 2018 年 6 月 30 日午前 7:26

This isn’t working for me:

Discourse: v2.0.0.beta10 +49

Johani · 2018 年 6 月 30 日午前 7:26

@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 · 2018 年 6 月 30 日午前 7:26

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 · 2018 年 6 月 30 日午前 7:26

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

tshenry · 2018 年 6 月 30 日午前 7:26

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 · 2018 年 6 月 30 日午前 7:26

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

トピック		返信	表示
Masonry Image Gallery Theme component	60	7405	2024 年 3 月 20 日
Image comparison slider Theme component	30	3434	2025 年 12 月 12 日
Topic List Previews (TLP) Theme component	714	28936	2026 年 4 月 2 日
Topic List Thumbnails Theme component official , topic-list-thumbnails	165	33499	2026 年 2 月 26 日
Introducing image grids in posts Announcements new-feature	43	7360	2026 年 1 月 10 日