# 瓷砖图片库 **URL:** \ **Category:** Theme component\ **Tags:** deprecated\ **Created:** [2018年三月2日 06:56 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950 "2018-03-02T06:56:34Z")\ **Posts on this page:** 20\ **Page:** 7
**Author:** ![Heather\_Dudley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heather_dudley/32/151925_2.png) [@Heather\_Dudley](https://meta.discourse.org/u/Heather_Dudley)\ **Post date:** [2020年九月2日 17:13 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/127 "2020-09-02T17:13:53Z")
> [@Johani](#): > > 目前，您最好的选择是使用较大的图片。 我们决定降低灯箱模式的最小尺寸要求；因为看起来很多使用该功能的用户使用的是略小于或正好为 400 x 300 的图片。这样效果很好。 ---
**Author:** ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)\ **Post date:** [2020年九月3日 05:37 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/128 "2020-09-03T05:37:40Z")
@Heather_Dudley 你是如何实现这一点的？ 在管理设置中，我找不到可以调整大小的灯箱选项。 ---
**Author:** ![Heather\_Dudley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heather_dudley/32/151925_2.png) [@Heather\_Dudley](https://meta.discourse.org/u/Heather_Dudley)\ **Post date:** [2020年九月3日 05:52 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/129 "2020-09-03T05:52:15Z")
这是 `最大图像尺寸` 和 `最大图像高度`——如果您搜索“最大图像”，两者都会被找到。任何超过该限制的内容都会以灯箱形式显示。 ---
**Author:** ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)\ **Post date:** [2020年十月27日 15:44 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/131 "2020-10-27T15:44:21Z")
大家好， 还有其他人遇到图片超出帖子“框”的问题吗？ 例如，在这里，有些图片被移到了右侧，导致无法显示。 > **[Runtz mit Bio-Dünger in Cocos-Medium](https://forum.cannabisanbauen.net/t/runtz-mit-bio-duenger-in-cocos-medium/10586/9)** > > Da werd ich auch mal gespannt zuschaun ^^ Hab grad auch 2 Runtz von Zamnesia am laufen (ca. 40 tage alt)… Hab zwei sehr schöne phänos erwischt und bin wirklich gespannt auf das Ergebnis. Wünsch einen erfolgreichen grow ---
**Author:** ![titusc](https://avatars.discourse-cdn.com/v4/letter/t/9f8e36/32.png) [@titusc](https://meta.discourse.org/u/titusc)\ **Post date:** [2020年十一月14日 05:32 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/132 "2020-11-14T05:32:40Z")
大家好，我是 Discourse 的新手，正在探索可用的图片画廊功能。目前我在 vBulletin 论坛上使用的是 PhotoPost Gallery。请问是否有现成的导入工具可以将 PhotoPost 的内容导入到 Tiles 插件中？我尝试查找相关信息，但只找到了以下内容。如果我没记错的话，当时讨论的结论是将内容作为主题（topics）导入。请问这是否仍然是推荐的做法？ > [@Importing old vb(s) into Discourse](https://meta.discourse.org/t/importing-old-vb-s-into-discourse/66337/13): > > No probs … fair enough… btw these days we have an interesting gallery theme component you could experiment with at: ---
**Author:** ![Overgrow](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/overgrow/32/478189_2.png) [@Overgrow](https://meta.discourse.org/u/Overgrow)\ **Post date:** [2021年二月14日 12:28 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/133 "2021-02-14T12:28:49Z")
> [@Johani](#): > > 您将在预览窗格中看到所选图像的 **静态预览** ： 感谢提供该组件。 它运行正常，但我没有像您的示例中那样看到“静态预览”。 照片通过左侧的线条进行了高亮显示，但并未调整大小。 ---
**Author:** ![lhkjacky](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lhkjacky/32/204198_2.png) [@lhkjacky](https://meta.discourse.org/u/lhkjacky)\ **Post date:** [2021年三月24日 01:07 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/134 "2021-03-24T01:07:25Z")
> [@Johani](#): > > 我们计划对所有图片（无论尺寸大小）进行此项组件工作，但目前尚无预计完成时间。 在阅读了以上所有帖子后，我发现许多用户都遇到了和我一样的问题。 无论是“`Titles Image Gallery`”还是“`Slick Image Gallery`”，当用户在画廊中使用小于站点设置“最大图片宽度和高度”的图片时，都会破坏帖子布局。我理解 Discourse 不会为小图片生成“灯箱”效果。因此，如果用户无法点击或放大这些小型图片，我并无异议。 然而，强制所有论坛成员上传大于站点设置“最大图片宽度和高度”值的图片是不可能的。大多数论坛成员甚至不了解什么是像素，也不知道如何检查图片尺寸。他们只是像在其他社交媒体上一样，随意上传任何图片。 举个例子，如果站点的最大图片设置宽度和高度均为 690 像素。当用户上传四张 680x680 像素的图片到画廊时，帖子中会出现大片空白区域（680 x 2720 像素）。 ![2021-03-24_083938](https://global.discourse-cdn.com/meta/original/3X/7/7/77bc1a4b2be6784cdc6a2053e9a146e5de547a22.png) ![gfhgfhg fuf](https://global.discourse-cdn.com/meta/original/3X/5/1/514ccfbeab150bd89b7778f43cc2933d3f99778e.png) 我理解让画廊适配所有图片尺寸可能需要时间开发。但目前看来，让画廊隐藏这些不符合尺寸要求的图片可能更好，这样至少不会破坏帖子布局。因为布局错乱会给用户留下不良印象。这只是我的一点浅见。🤔 ---
**Author:** ![lhkjacky](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lhkjacky/32/204198_2.png) [@lhkjacky](https://meta.discourse.org/u/lhkjacky)\ **Post date:** [2021年四月19日 19:23 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/135 "2021-04-19T19:23:18Z")
在手机端查看时，第三张图片缺失。 共有 4 张图片，在 PC 端可以全部正常显示。 ![2021-04-20_031931](https://global.discourse-cdn.com/meta/original/3X/b/4/b49c2bf6b90a263c403d899dfd8245c4c0cae8c4.png) 然而，在手机端查看时，第三张图片缺失。 ![2021-04-20_031222](https://global.discourse-cdn.com/meta/original/3X/0/3/037a1395cfbf3c817cb5b94bd69795b26bb039bf.jpeg) 通过浏览器开发者工具检查发现，第三张图片被放置在 “tiles-col–3” 下，这在小型屏幕上是不应该出现的。 因为 CSS 在小屏幕下会隐藏（display:none）“tiles-col–3”，导致第三列的图片无法显示。 ---
**Author:** ![Zup](https://avatars.discourse-cdn.com/v4/letter/z/c37758/32.png) [@Zup](https://meta.discourse.org/u/Zup)\ **Post date:** [2021年四月19日 23:01 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/136 "2021-04-19T23:01:29Z")
只想说声谢谢，这个TC非常棒。它很好地补充了我正在做的项目。干得漂亮。👏 ---
**Author:** ![Zup](https://avatars.discourse-cdn.com/v4/letter/z/c37758/32.png) [@Zup](https://meta.discourse.org/u/Zup)\ **Post date:** [2021年四月20日 02:09 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/137 "2021-04-20T02:09:22Z")
为什么图片小于最大值时无法显示？ 我遇到了与 @lhkjacky 描述的相同问题。 ---
**Author:** ![lhkjacky](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lhkjacky/32/204198_2.png) [@lhkjacky](https://meta.discourse.org/u/lhkjacky)\ **Post date:** [2021年五月12日 15:46 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/139 "2021-05-12T15:46:14Z")
感谢 @Heddson 创建新的 TC 来解决“瓷砖图片画廊”的问题。🥰 ### 瀑布流图片画廊： > [@Masonry Image Gallery](https://meta.discourse.org/t/masonry-image-gallery/188315): > > warning This feature is now built-in to Discourse core, see [the announcement](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664) regarding image grids in Discourse. This theme component adds a responsive masonry-style image gallery with customizable ordering. Desktop view: Mobile view: When clicking on an image it will open with the default lightbox viewer. You add the gallery by clicking on the grid icon and then adding your images. It also works by first selecting the uploaded images and then clickin… 我已将“瓷砖图片画廊”替换为“瀑布流图片画廊”。 现在，在画廊中添加小图片不会破坏帖子的布局。🥳 > [@Heddson](#): > > - 小图片不会破坏布局。 > - 编辑时预览正确。 ---
**Author:** ![mentalstring](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mentalstring/32/168934_2.png) [@mentalstring](https://meta.discourse.org/u/mentalstring)\ **Post date:** [2023年三月14日 18:47 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/140 "2023-03-14T18:47:26Z")
我们使用 Tile 和 Slick 已经有几年了，我们的社区都非常喜欢它们！ 👍 我们最近将论坛更新到了 Discourse 3.0，但它们都开始有点奇怪地运行了。我认为这并非我们特定的设置问题，因为我们使用的是默认主题，只有一些基本的 CSS 自定义，而且这个问题只在更新后才开始出现。 Slick 的问题是，有几张额外的图片出现在幻灯片之外，并且下方有几行可点击的点。这应该能更好地解释这个问题： ![ad86eec28b2259fe635468e686ff8b22f6039141_2_680x652](https://global.discourse-cdn.com/meta/original/4X/f/7/0/f703d2b9219fe9859feb8722d30b68d7f8c59f5e.jpeg) 至于网格（grid）那个，奇怪之处在于，额外图片的一小部分出现在网格的右侧： ![9804de6942e81b3766c2313da0c25bd00b5c06c8_2_680x652-1](https://global.discourse-cdn.com/meta/original/4X/a/9/2/a92955e10211bf5dad27621169c689508e6af080.jpeg) 在手机上，被切掉的图片更宽，但仍然是被切掉的： ![58f136638e65f38ad16fd6f88c281e409b3fb966](https://global.discourse-cdn.com/meta/original/4X/5/8/f/58f136638e65f38ad16fd6f88c281e409b3fb966.jpeg) 我很乐意私信发送出现此问题的实时论坛链接。 还有其他人遇到这个问题吗？ ---
**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\ **Post date:** [2023年三月17日 09:34 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/141 "2023-03-17T09:34:01Z")
我使用的是 Discourse 3.0.1 beta2。 > [@Johani](#): > > 您将在预览窗格中获得所选图片的 **静态预览** ： 预览没有显示静态预览： ![image](https://global.discourse-cdn.com/meta/original/4X/3/2/6/326de5e0e6de93dddcd76d6eeda317237bbc8fbc.jpeg) 但是，帖子正确显示了这 8 张图片： ![image](https://global.discourse-cdn.com/meta/original/4X/d/c/f/dcf7050f86a788c1fc5ea223f783424efbdeeeda.jpeg) 您的图库中有多少张图片？您是否有图片具有奇怪的宽度/高度比例？ ---
**Author:** ![mentalstring](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mentalstring/32/168934_2.png) [@mentalstring](https://meta.discourse.org/u/mentalstring)\ **Post date:** [2023年六月11日 10:41 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/142 "2023-06-11T10:41:42Z")
问题确实出在图片数量上：当图库中的图片数量超过显示图片_项目符号_的空间时，自 Discourse 3.0 起，它似乎会以一种奇怪的方式损坏。 这是所有内容都能正常显示且_项目符号_显示在图片下方的限制： ![Screenshot 2023-06-11 at 11.32.13](https://global.discourse-cdn.com/meta/original/4X/4/e/e/4ee92cf530306d6323392199f0c18408759caba6.png) 这是同一图库，只多了一张图片： ![Screenshot 2023-06-11 at 11.37.32](https://global.discourse-cdn.com/meta/original/4X/3/7/0/3707b8ee63cd49575e2213f6c73df71cd326dbf1.png) 所有_项目符号_都向上移动并显示在照片上方：由于黑色背景，很难看清它们，但您至少可以看到左边的一个（悬停时会更明显），底部还有一个额外的项目符号。 以前，当有很多图片时，_项目符号_会堆叠在图库_下方_的行中。 * * * 可能相关的是，一些（同样很大的）图库——但不是全部——在更新到 Discourse 3.0 后也出现了一些小问题： ![Screen Shot 2023-06-11 at 11.57.20](https://global.discourse-cdn.com/meta/original/4X/a/f/0/af012bfd48cf77cdd5cf5a69c74dcd41887bcdd9.png) 不清楚这是否是由于项目符号错位造成的。查看 HTML，在 `ul.slick-list` 和 `button.slick-next.slick-arrow` 之间有几十个 `\u003cbr\u003e`，其中夹杂着两张丢失的图片。 ![Screenshot 2023-06-11 at 12.01.54](https://global.discourse-cdn.com/meta/original/4X/0/a/9/0a922998157ae5ee4be7792642b48ec9643a5064.png) ---
**Author:** ![thaidb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thaidb/32/68488_2.png) [@thaidb](https://meta.discourse.org/u/thaidb)\ **Post date:** [2023年十月21日 02:58 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/144 "2023-10-21T02:58:50Z")
您能自动用 CSS 排列图片，就像 Google Photos 一样吗？ ![image](https://global.discourse-cdn.com/meta/original/4X/8/8/6/886f196d25c69a06b748be7c32f9d0752fe96ac5.jpeg) ![Screenshot 2023-10-21 at 09.57.16](https://global.discourse-cdn.com/meta/original/4X/8/7/b/87bff69d7e88fc6afe127ef9b7f22cf6d55e0377.jpeg) ---
**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\ **Post date:** [2023年十月24日 13:10 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/145 "2023-10-24T13:10:35Z")
此主题组件已弃用，您应该使用此处提供的新内置功能： > [@Introducing image grids in posts](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664?u=canapin): > > If you have many images in a Discourse post, you can now have them automatically arranged into a nice grid. All you need to do is wrap them in [grid] ... [/grid] tags, and the images will be neatly arranged. This is a core feature as of [this commit](https://github.com/discourse/discourse/commit/f89b5680cb4cc28003133e0095393b78d4b87460), enabled on all Discourse instances. Here’s an example in action: ---
**Author:** ![Karen\_Kitchens](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/karen_kitchens/32/335020_2.png) [@Karen\_Kitchens](https://meta.discourse.org/u/Karen_Kitchens)\ **Post date:** [2024年一月25日 20:49 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/146 "2024-01-25T20:49:24Z")
此主题组件是否有生命周期结束日期？我们正试图优先切换到新功能。 ---
**Author:** ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)\ **Post date:** [2024年一月30日 20:44 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/149 "2024-01-30T20:44:05Z")
我认为这个组件可能已经坏了？在您的网站上还能正常运行吗？ ---
**Author:** ![Chan\_Patrick](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chan_patrick/32/264297_2.png) [@Chan\_Patrick](https://meta.discourse.org/u/Chan_Patrick)\ **Post date:** [2025年三月4日 21:58 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/150 "2025-03-04T21:58:43Z")
**[管理员通知]** 您的某个主题或插件需要更新，以兼容即将到来的 Discourse 核心更改。（ID：[_discourse.fontawesome-6-upgrade_](https://meta.discourse.org/t/325349)）已识别主题：[‘Tiles - Gallery Component’](https://cmxforum.phdev.uk/admin/customize/themes/11?safe_mode=no_themes)。 ---
**Author:** ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)\ **Post date:** [2025年三月4日 23:28 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/151 "2025-03-04T23:28:15Z")
这是一个已弃用的组件。 [上一頁](https://meta.discourse.org/t/tiles-image-gallery/81950.md?page=6) [下一頁](https://meta.discourse.org/t/tiles-image-gallery/81950.md?page=8)