Tiles Image Gallery

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개의 좋아요

컴포넌트가 올바르게 작동하려면 이미지의 최소 크기는 얼마인가요?

사이트 설정이 무엇이든,

최대 이미지 너비와 최대 이미지 높이를 찾아보세요.

이미지가 이 설정 값보다 커야만 해당 컴포넌트가 활성화됩니다.

6개의 좋아요

버그일까요? 분명 개선할 여지는 있어 보입니다. 오늘 이 기능을 설치했는데 레이아웃을 제대로 맞추는 데 애를 먹었습니다. 결국 방법을 찾았습니다. 컴포저 버튼을 사용하기 전에 모든 이미지를 _한 줄_에 배치해야 했습니다. 그렇지 않으면 코드가 이렇게 됩니다:

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

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

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

</div>

그리고 모든 이미지가 한 열로 정렬됩니다.

모든 이미지를 한 번에 업로드한다면 이런 문제가 발생하지 않을 것 같지만, 제 경우에는 여러 게시글에서 이미지를 모아서 링크를 하나씩 복사해 넣었기 때문입니다.

왜 바로 먼저 타일(Tiles) 버튼을 누른 다음, "이미지 추가"라고 표시된 부분에 이미지 링크를 삽입하지 않는 걸까요?

1개의 좋아요