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 Like

@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 Likes

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 Likes

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 Likes

We have been using both Tile and Slick for a couple of years now and our community quite likes them both! :+1:

We recently updated our forum to Discourse 3.0 and they both started behaving a bit wonky though. I don’t think it’s from our particular setup as we use the default theme with basic CSS customizations and it started to happen only after the update.

The issue with Slick is that a couple of additional images appear outside of the slideshow and, below there’s several rows of clickable dots. This should explain it better:

As for the grid one, the quirk is that a tiny slice of an additional image is appearing to the right of the grid:

On mobile, the sliced image is wider, but still sliced:

Happy to send PM with links to a live forum where this is happening.

Anyone else experiencing this?

I use Discourse 3.0.1 beta2.

The preview doesn’t show a static preview:

The post, however, does show the 8 pictures properly:

How many pictures do you have in your gallery? Do you have pictures with funny width/height ratio?

The issue is indeed the number of images: when the gallery has more images than space to display the image bullets, it seems to break in a strange way since Discourse 3.0.

Here’s the limit until which everything works fine and the bullets show under the image:

Here’s the same gallery with just one more image:

All bullets moved upwards and are displayed over the photo: it’s a bit hard to see them with the black background, but you can see at least one on the left (they become more noticeable on hover), with the additional one showing at the bottom.

Previously, when having lots of images, the bullets would pile up in rows below the gallery.


Possible related, some (also large) galleries — but not all — also got a little broken after the update to Discourse 3.0:

Unclear whether this is due to the bullets misalignment. Looking at the html, between the ul.slick-list and button.slick-next.slick-arrow there are dozens of <br> with the two lost images among them.

1 Like

can you auto css arrange iamges same Google photo?

This theme component is deprecated, you should use the new built-in feature presented here:

4 Likes

Is there an end-of-life date for this Theme Component? We are trying to prioritize switching over to the new feature.

I think this component may already be broken? Is it still working okay on your site?