Tiles Image Gallery

We opted to reduce the minimum size for lightboxing; it seemed like a good portion of those who used it were using slightly smaller or right at 400 x 300. THat worked nicely.

「いいね!」 1

@Heather_Dudley How did you achieve that?
In the admin settings I could not find such a lightbox option to change the size.

It’s max image size and max image height - if you search for max image it’ll find them both. Anything over that limit gets lightboxed.

Hey guys

does anyone else still have issues with images being outside the post “box”?
See for example here, some of the images are shifted to the right side and not visible

Hi am new to Discourse and am exploring what image galleries are available. Am using PhotoPost Gallery at the moment for a vBulletin forum. Are there any importers available for importing PhotoPost into Tiles? Tried to find this but only came across the following, and if I’m not mistaken the verdict back when the posts were discussed was to import as topics? Is this still the way to do this?

Thanks for the component.

It works OK, but I’m not getting the “static preview” as can be seen in your example.

The photos are highlighted using the line on the left, but they are not resized.

「いいね!」 2

After reading all the posts above, I found that many users have the same problem as I am.

Both “Titles Image Gallery” and “Slick Image Gallery” destroy the post layout when users use image smaller than the site setting “Max image width & height” in the Gallery. I understand that discourse don’t generate “lightbox” for small images. So no complaint if users won’t able to click or enlarge those small images.

However, it is impossible to force all forum members to upload image larger than the site setting “Max image width & height” value. Most forum members don’t even understand what is call pixel and don’t know how to check image size. They just upload any image they got, just the same way they upload to other social media.

Here is an example, if the site Max. image setting is set to 690px for both Width and Height. When users upload four 680x680px images to gallery. The post show large empty space in the post (680 x 2720px).
2021-03-24_083938

I understand that making the gallery work for all image size may take time to develop. But at the moment, I think it is better for the Gallery to hide those illegal size images, so at least it won’t break layout of post. Because broken layout give a bad impression to users. Just my two cents. :thinking:

「いいね!」 3

When viewing in smartphone, the third image is missing.

There are total 4 images, I can view all in PC.

However, when viewing in smartphone the third image is missing.

From browser inspector, I can see the third image is place under the
“tiles-col–3”, which should not happening in small screen.

Because, css hide (display:none) “tiles-col–3” in small screen, which make image in column 3 missing.

Just want to say thanks for this TC. It complements a project I’m working on very well. Good work. :clap:

Why can’t images be displayed if they are smaller than max?

I’m experiencing the same issues as @lhkjacky describes.

Thank you @Heddson for creating a new TC to fix the problem of Tiles Image Gallery. :smiling_face_with_three_hearts:

Masonry Image Gallery:

I have replaced “Tiles Image Gallery” by “Masonry Image Gallery”.
Now, adding small images in Gallery won’t break the layout of the post. :partying_face:

「いいね!」 2

TileとSlickの両方を数年間使用しており、コミュニティも両方気に入っています!:+1:

最近フォーラムをDiscourse 3.0にアップデートしたところ、どちらも少し調子が悪くなり始めました。デフォルトのテーマに基本的なCSSカスタマイズを使用しており、アップデート後にのみ発生し始めたため、私たちの特定のセットアップからの問題だとは思いません。

Slickの問題は、いくつかの追加の画像がスライドショーの外側に表示され、その下にクリック可能なドットの複数の行が表示されることです。これはそれをよりよく説明するはずです:

グリッドの方ですが、グリッドの右側に画像のスライスがわずかに表示されるという奇妙な点があります:

モバイルでは、スライスされた画像は幅が広くなりますが、それでもスライスされています:

この問題が発生しているライブフォーラムへのリンクはPMでお送りできます。

他にこの問題が発生している方はいらっしゃいますか?

Discourse 3.0.1 beta2 を使用しています。

プレビューには静的プレビューが表示されません。

しかし、投稿には8枚の画像が正しく表示されます。

ギャラリーには何枚の画像がありますか?幅/高さの比率がおかしい画像はありますか?

問題はまさに画像の数にあります。ギャラリーに画像 箇条書き を表示するスペース以上の画像が含まれている場合、Discourse 3.0 以降、奇妙な方法で壊れるようです。

以下は、すべて正常に機能し、箇条書き が画像の真下に表示される上限です。

さらに画像が 1 枚追加されただけの同じギャラリーは以下のようになります。

すべての 箇条書き が上に移動し、写真の上に表示されます。黒い背景では見えにくいですが、少なくとも左側に 1 つ見えます(ホバーするとより目立つようになります)。追加の箇条書きが下部に表示されています。
以前は、大量の画像があった場合、箇条書き はギャラリーの の行に積み重ねられていました。


関連する可能性のある、いくつかの(こちらも大きな)ギャラリーは、すべてではありませんが、Discourse 3.0 へのアップデート後に少し壊れています。

これが箇条書きのずれによるものかどうかは不明です。HTML を見ると、ul.slick-listbutton.slick-next.slick-arrow の間に、その 2 つの失われた画像とともに数十個の <br> があります。

「いいね!」 1

Googleフォトのように画像を自動でCSS配置できますか?

このテーマコンポーネントは非推奨になりました。こちらで紹介されている新しい組み込み機能を使用してください。

「いいね!」 4

このテーマコンポーネントのサポート終了日はありますか?新しい機能への切り替えを優先しようとしています。

このコンポーネントはすでに壊れているのではないでしょうか?あなたのサイトではまだ正常に動作していますか?

[管理者通知] ディスコースのコアの変更に対応するため、テーマまたはプラグインのいずれかのアップデートが必要です。(id:discourse.fontawesome-6-upgrade) 特定されたテーマ: ‘Tiles - Gallery Component’

「いいね!」 1

それは非推奨のコンポーネントですが。

「いいね!」 2