タイル画像ギャラリー

Why we can not use tile image gallery when the image is only 2 ? It shows just 1 “thumbnail” image. But when the image are 3 and more, it works. Hope, someday, tile image gallery can works even only 2 images on it.

Thanks a lot

「いいね!」 1

So, I’m having this component fail for me. I installed it on the default theme just to give it a test run before I added it to others, but it’s not working properly. I’ve tried it myself, and so have users.

This is what ends up happening:


Thread test is here.

「いいね!」 1

What other components/plugins are you using? A conflict is usually the culprit in these situations, as that component is working fine on both of my Discourse instances.

Also, I am looking forward to NaNoWriMo this year! :wink:

「いいね!」 1

Nothing fancy. Just these, no plugins.

(The Vincent one is straight css, only on the Vincent theme, not default.)

First year we’ll have nano on discourse. Can’t WAIT.

「いいね!」 1

I’m using Vincent on one of my sites as well. It’s a great theme, though you may have to fix the CSS in a few places, as the theme hasn’t been updated for the changes in Discourse 2.3. (I just added a theme component containing the CSS fixes … easy peasy.)

I’m using all of the components you are except for the Staff Color Fix one.

Are you using any unusual plugins?

Nope, no plugins at all, just SSO

Okay, so I was BRIEFLY able to replicate what you were seeing by installing the component on a Discourse instance which didn’t have it installed previously. When I used the component for the first time, I got the same behavior you saw (images way off to the right side).

HOWEVER, the problem resolved itself after I did one small thing: I added line breaks between the image URIs. When I saved the message, within a moment or two, the engine re-rendered the images in tile format as expected.

So, I changed this:

![PNG|690x376](upload://tkDa9A71XGWBECPZ8O4NJ7EVU0o.jpeg) ![PNG|690x375](upload://qF63DV2mw5jrFWvYleWclebsDMo.jpeg) ![PNG|690x376](upload://8xiyNyKpSqdDOfh4mxMHgy0Bzkh.jpeg) 

</div>

To this:

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

![PNG|690x376](upload://tkDa9A71XGWBECPZ8O4NJ7EVU0o.jpeg) 
![PNG|690x375](upload://qF63DV2mw5jrFWvYleWclebsDMo.jpeg) 
![PNG|690x376](upload://8xiyNyKpSqdDOfh4mxMHgy0Bzkh.jpeg) 

</div>

Interestingly, after it worked once, it no longer seems to matter whether there are line breaks between the image URLs :face_with_raised_eyebrow:

If you want to test it out on either of my sites, just send me a message and I’ll send you links (one is non-public rn) :sunglasses:

「いいね!」 1

Okay, after a lot of experimentation and work with @cjk77 on his own installation, we’ve figured out we’re bumping up against the max image size limitations. It doesn’t handle that gracefully, so instead of just failing, it does some weird reformatting on the final product. IF you post an image that’s too small you may get this:


All images used were under the resize limit. Image of the exact limit don’t render at all.

「いいね!」 5

I have this issue also. This is due to the size of the image? Should they be enlarged and reuploaded?

Edit: that fixed it.

「いいね!」 1

Yes, based on my experiments the component won’t work on images smaller than the max limit. It has to do with the way oneboxing works, I believe.

「いいね!」 2

これと Slick Image Gallery コンポーネントが動作しません。@Johani

「いいね!」 1

どちらもここで完璧に動作しています。具体的に何が動作しないのか、もう少し詳しく教えていただけますか?Discourse のどのバージョンをお使いですか?

当サイトは Discourse でホストされています。正確な数は分かりませんが、最後の更新は 17 時間前だったようです。コンポーネントをインストールし、いくつかの画像をアップロードして試してみましたが、動作しません。以上です :thinking:

Discourse のバージョンは、任意のページの HTML ヘッダーを確認することで確認できます。

それでもまだ不十分です——何が動作しないのですか?エディタにボタンは表示されますか?保存する前の結果のテキストはどうなっていますか?投稿に画像は表示されますか?などなど。

何が具体的に起きているのかを理解できなければ、誰も助けることはできません。

「いいね!」 1

ありがとうございます、見つけました:

update

画像は表示されますが、本来あるべきようにはなっていません:

本来はこうなるはずです:

画像が小さすぎます。Tiles または Slick ギャラリーが機能するには、Discourse の内部画像リサイズルーチンを有効にするのに十分な大きさである必要があります。

「いいね!」 3

コンポーネントが正しく機能するために必要な画像の最小サイズはどれくらいですか?

あなたのサイトの設定に関わらず、max image width(最大画像幅)と max image height(最大画像高さ)を探してください。

コンポーネントをトリガーするには、画像がこの設定よりも大きい必要があります。

「いいね!」 6

バグかもしれませんね。少なくとも改善の余地はあります。今日これをインストールして以来、レイアウトを正しく設定しようと苦労していました。ようやく解決しました。コンポーザーボタンを使用する前に、すべての画像を1行にまとめる必要がありました。そうしないと、以下のようなコードになってしまいます:

![20060316-img1|679x500](upload://7IiKEBIQhilcDwt9KIBxiWZsVt8.jpeg)

</div>
<div data-theme-tiles="1">

![20060106-img2|674x499](upload://pYLbo4Bg417KHGzcNsfVopvxDfX.jpeg)

</div>

その結果、すべての画像が単一の列に配置されてしまいました。

おそらく、すべての画像を一度にアップロードすればこの問題は起きないのでしょうが、私の場合は複数の投稿から画像を集め、リンクを一つずつコピーしていたため、このような状況になりました。

まず「タイル」ボタンを押してから、「画像を追加」と書かれている場所に画像リンクを挿入するのはどうですか?

「いいね!」 1