シックな画像ギャラリー

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

This has to do with the aspect ratio of your images. Slick always maintains the original aspect ratio of the image.

The height of each gallery is determined by the height of the tallest image in it. The width of the gallery is always the full width of the post.

The images you add are slotted in and centred both vertically and horizontally in the gallery. This prevents the page content from moving around when you navigate between images of different heights and keeps the navigation buttons fixed in one place.

You can control the color of the background with:

.slick-track {
    background: black;
}

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

Crosspost

I took a look at the translation issue @Francois_Douville I have a temporary workaround for now. You need to make a small edit to the theme. Go to the </head> section and look for this:

You need to change en to fr

So

  I18n.translations.en.js.composer.tiles_add_images_prompt = settings.Tiles_add_images_prompt;
  I18n.translations.en.js.tiles_gallery_button = settings.Tiles_button_text;

becomes:

  I18n.translations.fr.js.composer.tiles_add_images_prompt = settings.Tiles_add_images_prompt;
  I18n.translations.fr.js.tiles_gallery_button = settings.Tiles_button_text;

That’s all you need to change.

Because this is a local edit, you need to reapply it after every theme update, but it’s not a big problem because you only need to change two letters.

I will keep looking for a better way to integrate translations into themes and will keep you posted.

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

Tiles / Slick got a tiny update today that deals with the translation issue. They will now use the awesome locale check described in @simon’s great post here

The locale for the translated strings will automatically be set and you will not need to mess around with the theme code after this update.

jamesmarkcook · 2018 年 10 月 25 日午後 10:58

This is refusing to work on v2.2.0.beta3 +130

My images are larger than the maximum allowed dimensions, I get the gallery preview but in the actual post the gallery isn’t displayed, just normal images. Could you confirm that this works on the version I have installed? Thanks

Johani · 2018 年 10 月 26 日午前 2:24

Sure, I checked and everything seems to be OK on v2.2.0.beta3 +136

Do you mean lighboxes or just images? Slick only targets lighboxes so that would explain why it’s not working for you. If that’s the case, It sounds like sidekiq is paused / not running on your site. Try checking

your.domain.com/sidekiq

jamesmarkcook · 2018 年 10 月 26 日午前 8:04

Thanks for the reply. There was an unknown issue on my site that was causing lightboxes to take a few minutes to generate, and it was this that was causing this plugin not to work. All seems to be working now

cwmke · 2018 年 11 月 9 日午後 5:14

@Johani I’m wondering why this component calls slick.min.js from cloudflare instead of being packaged with the component?

Johani · 2018 年 11 月 10 日午前 7:12

At the time, the Discourse theme system was a bit different.

Scripts added to a theme / component used to be loaded inline in the <head> of the document. It made a lot more sense to load it from a CDN.

Discourse themes now handle scripts much better thanks to @xrav3nz’s work

scripts are now pulled into an external theme.js file.

So, it now makes sense to bundle slick into the theme instead of loading it from a CDN.

I just pushed a small update for that

cwmke · 2018 年 11 月 10 日午後 2:51

Thanks for the explanation and the quick fix!

Globulle · 2018 年 12 月 21 日午後 6:02

Hi,

For an obscure reason I cannot achieve the expected slideshow. My code is :

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

![IMG_1903|640x480](upload://p1oiiQ1oeNUOYY7nNETBuerrduz.jpeg)
![IMG_1923|640x480](upload://il3ESwgSA3szneJ0y0S92FEISwr.jpeg) 
![P1310402_small|666x500](upload://4H0qqhqtH8W3VA0XHxjKgXZO332.jpeg) 
![IMG_1927|640x480](upload://1QICzfj34S6zS963xb9JQ8PAJkK.jpeg)
![IMG_1958|640x480](upload://8XLYdnbXaKasrjEhyhXaPvIGNHK.jpeg)
![P1310413_small|666x500](upload://1egsIAMlC7RwlKqTGghS5wsUjfz.jpeg) 
![IMG_1996|375x500](upload://e5HXMa7aYAnPlP3JHrI4PQTgjjf.jpeg) 

</div>

I obtain :

the 1st two images outside the slideshow
the 3rd, 6th and 7th images are in a slideshow without the 4th and 5th (don’t show up at all)

I assume this is linked to the different sizes of images… so is there a workaround other than changing the size of the source pictures? It seems that changing the size parameter in the code does not improve things.

Any help would be appreciated!

EDIT : now I’ve tried with all images reduced to the same size : they are all displayed one below the other, and no slideshow at all…

Johani · 2018 年 12 月 21 日午後 6:48

Thank you for the detailed feedback

The issue you’re seeing occurs because you’re using small images. The images you’re using are not large enough for Discourse to generate lightboxes.

There are two relevant settings for this

max_image_height which defaults to 500px

max_image_width which defaults to 690px.

Discourse looks at images uploaded in posts and if they exceed the demisions set in either of those settings, it creates lightboxes for them.

Now, you’re free to change those the values of those settings on your site to force Discourse to generate lightboxes for smaller image; however, I would not recommend doing that.

That setting is also linked to the max deminsions an image can be displayed at, so if you change max-width to say… 500px, then the maximum width any image will display at in a post will also be 500px - the same applies to changing the max-height setting.

What I would recommend is to use larger images that exceed either the max-height setting or the max-width setting. The component would then work with those images without any issues.

Let me know if the problem persists.

elGrande · 2019 年 1 月 18 日午後 8:20

After the last update now the arrows are missing:

Desktop:

Mobile:

ckshen · 2019 年 5 月 12 日午前 5:17

Am I the only one who see two of the same icons for the Slick Image Gallery? It didn’t use to be like that.
When I removed the component from my theme, both icons disappeared. When I added the component back, they both reappeared. Both buttons serve the same function.

Chaboi_3000 · 2019 年 5 月 12 日午前 5:35

I can’t reproduce this using only the theme component.

internet_cookie · 2020 年 5 月 19 日午後 5:44

コンソールで以下のエラーが発生しました：

`decorateCooked` はメモリリークを回避するために `id` オプションを指定する必要があります

mentalstring · 2020 年 9 月 16 日午前 7:56

Slick と Tile の両方の画像ギャラリー（どちらも優れています）を使用しています。ユーザーの一人が、モバイル版で問題が発見されました。それにより、Discourse のアイコン（投票用の歯車など）が画面外に押し出されてしまいます。

これは、composer アイコンを使用する Discourse インストールで他に何が有効化されているかに依存するエッジケースかもしれません。いずれにせよ、モバイル版の画像アップロードボタンが実際には右下、余白のある領域にあることに気づきました。ギャラリーのアイコンもそこに移動させるのは理にかなっているでしょうか？そうすれば、上部へのアイコンの詰め込みが解消され、さらに論理的になります（画像関連のアイコンをすべて一緒にする）。

lyseoy · 2020 年 9 月 28 日午前 4:00

背景色はどこで／どのように変更しますか？

これは機能しませんでした：

serialcode · 2021 年 11 月 26 日午後 5:13

私も同じ問題を抱えています!!!

Caswal_Parker · 2022 年 4 月 13 日午前 3:48

これをインストールしましたが、コンポーザーバーに表示されません。

Caswal_Parker · 2022 年 5 月 13 日午前 8:53

最近のアップデート、そして 2.9.0 beta 4 への更新で解決したようですね？

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

シックな画像ギャラリー

関連トピック