# 砌体图片库 **URL:** \ **Category:** Theme component\ **Created:** [2021年四月27日 23:53 UTC](https://meta.discourse.org/t/masonry-image-gallery/188315 "2021-04-27T23:53:25Z")\ **Posts on this page:** 20\ **Page:** 3
**Author:** ![Heddson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heddson/32/96742_2.png) [@Heddson](https://meta.discourse.org/u/Heddson)\ **Post date:** [2022年十一月16日 16:10 UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/41 "2022-11-16T16:10:01Z")
我同意你的说法。我不是 Discourse 的开发者，所以我不知道什么可行，什么不可行。 ---
**Author:** ![Heddson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heddson/32/96742_2.png) [@Heddson](https://meta.discourse.org/u/Heddson)\ **Post date:** [2022年十二月5日 20:18 UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/42 "2022-12-05T20:18:03Z")
GitLab 错误现已修复。感谢您的报告，@Jagster！⭐ ---
**Author:** ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)\ **Post date:** [2022年十二月13日 12:23 UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/43 "2022-12-13T12:23:54Z")
Just out of curiosity, how does this bit work: ```plaintext &::before, &::after { content: ""; flex-basis: 100%; width: 0; order: 2; } ``` I can see it shift things around but I don’t really get it fully 🤔 2 pseudoelements, without any width, both being placed on the second position…? ---
**Author:** ![Heddson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heddson/32/96742_2.png) [@Heddson](https://meta.discourse.org/u/Heddson)\ **Post date:** [2022年十二月13日 16:27 UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/44 "2022-12-13T16:27:44Z")
嘿 @chapoi！ 这两个伪元素用于防止列合并。它们没有宽度，因为它们不应该被看到，但在下图中，它们用蓝线表示。 ![pseudo-elements](https://global.discourse-cdn.com/meta/original/4X/0/2/c/02c01eeedba9499143f1851aa0f2a263454f0c3d.jpeg) 没有它们，如果列的高度差异过大，列可能会开始合并。 图中第 3、6 和 9 个元素被设置为第 3 列（`order` 属性设置为 3）。但如果我们移除伪元素，第 3 列将直接出现在第 2 列下方（即使设置了 _order 3_）。请看下图。“第 3 列”以绿色突出显示。 ![meged](https://global.discourse-cdn.com/meta/original/4X/3/c/7/3c78c373e1bcf1f4b388b4141fe1e2d28737d2f3.jpeg) 这是因为 flexbox 会检查它前面的列（与最高列相比）是否还有空间。如果空间足够容纳第一个元素，它就会插入到那里。 但是，伪元素就像列一样，所以 fluxbox 会检查伪元素（而不是真正的列）是否有空闲空间。由于伪元素的高度为 100%，fluxbox 将找不到任何空闲空间，因此第 3 列将从我们想要的位置开始。 希望这很清楚易懂。😅 ---
**Author:** ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)\ **Post date:** [2022年十二月13日 16:42 UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/45 "2022-12-13T16:42:17Z")
非常巧妙的解决方案！ ---
**Author:** ![Heddson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heddson/32/96742_2.png) [@Heddson](https://meta.discourse.org/u/Heddson)\ **Post date:** [2022年十二月13日 19:20 UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/46 "2022-12-13T19:20:23Z")
😁 我不是自己想出那个的。 ---
**Author:** ![Roi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/roi/32/130587_2.png) [@Roi](https://meta.discourse.org/u/Roi)\ **Post date:** [2023年二月13日 19:52 UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/47 "2023-02-13T19:52:07Z")
我托管的论坛上的一位用户提到，当翻转移动设备（平板电脑、手机）的屏幕时，图片无法正确调整到新的分辨率。当图片的纵横比（过高）与屏幕不同时，就会发生这种情况。因此，图片的顶部和底部会丢失一部分。有没有办法优化这一点？我不知道这是否可能或是否容易实现。 ---
**Author:** ![Heddson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heddson/32/96742_2.png) [@Heddson](https://meta.discourse.org/u/Heddson)\ **Post date:** [2023年二月15日 07:12 UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/48 "2023-02-15T07:12:20Z")
感谢您的反馈！是的，翻转设备时不会刷新。当时我没有找到解决方案，但我会再看看。 ---
**Author:** ![Heddson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heddson/32/96742_2.png) [@Heddson](https://meta.discourse.org/u/Heddson)\ **Post date:** [2023年六月21日 22:03 UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/49 "2023-06-21T22:03:59Z")
很遗憾，我还没有找到一种足够好的方法来处理设备翻转。 # 另外，如果你们还没看到公告，图像网格刚刚被添加到核心功能中了。它的工作方式与这个主题组件不完全相同，但看起来非常棒，而且能将其加入核心功能真是太棒了。请查看此主题： > [@Introducing image grids in posts](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664): > > 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:** ![Octoberon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/octoberon/32/288382_2.png) [@Octoberon](https://meta.discourse.org/u/Octoberon)\ **Post date:** [2023年六月29日 20:27 UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/50 "2023-06-29T20:27:16Z")
我创建了一个包含六张图片的帖子，使用了 masonry 图片库标签。到目前为止，一切都很好。然后我为每张图片添加了一个链接，这样当用户点击图片时，它就会带他们到另一篇帖子。当我这样做时，它在 Onebox 中看起来仍然不错，但实际帖子失去了其 masonry 格式，只是按顺序显示了图片。 这是个 bug 还是因为链接而无法正常工作？ ---
**Author:** ![Heddson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heddson/32/96742_2.png) [@Heddson](https://meta.discourse.org/u/Heddson)\ **Post date:** [2023年六月29日 21:42 UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/51 "2023-06-29T21:42:35Z")
嘿 @Octoberon！它并非设计用于链接/onebox，所以这很可能是问题所在。它的设计初衷是在您单击图像时打开一个灯箱。不过我之前也有过类似的要求…… 🤔 顺便问一下，您是如何将链接添加到图像的？ ---
**Author:** ![Octoberon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/octoberon/32/288382_2.png) [@Octoberon](https://meta.discourse.org/u/Octoberon)\ **Post date:** [2023年六月29日 22:18 UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/52 "2023-06-29T22:18:49Z")
是的，我曾怀疑会是这种情况。要创建链接，我只需在编辑器中突出显示图像的文本，然后使用常规的超链接按钮将链接粘贴到同一论坛上的另一篇文章。 ---
**Author:** ![Heddson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heddson/32/96742_2.png) [@Heddson](https://meta.discourse.org/u/Heddson)\ **Post date:** [2023年八月3日 15:11 UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/53 "2023-08-03T15:11:39Z")
在图片网格主题中，有人提到了隐藏作曲家按钮。也许这已经通过 CSS 或其他方式解决了，但我想它可能对其他人也有用。也许如果你启用了自动创建，就不需要按钮了……🙂 。无论如何，现在添加了隐藏按钮的选项。 ---
**Author:** ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)\ **Post date:** [2024年二月19日 16:49 UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/54 "2024-02-19T16:49:44Z")
有人在使用自动功能时遇到问题吗？我们用 3.1 和 3.2 稳定版进行了测试，在这两种情况下，它都无法正常工作，并且尽管已正确设置了类别，但仍未生成任何砌体画廊。 ---
**Author:** ![Heddson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heddson/32/96742_2.png) [@Heddson](https://meta.discourse.org/u/Heddson)\ **Post date:** [2024年二月19日 17:11 UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/55 "2024-02-19T17:11:07Z")
嘿 @jrgong！奇怪，在我这里好像可以正常工作。你有没有一个无法正常工作的帖子的链接？ ---
**Author:** ![Heddson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heddson/32/96742_2.png) [@Heddson](https://meta.discourse.org/u/Heddson)\ **Post date:** [2024年二月22日 07:59 UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/57 "2024-02-22T07:59:16Z")
由于您必须登录才能查看该帖子，因此我无法查看。抱歉。 我想也许我曾经登录过那个暂存站点（对吗？），但现在找不到了。 ---
**Author:** ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)\ **Post date:** [2024年二月22日 11:20 UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/58 "2024-02-22T11:20:45Z")
你好 抱歉，此链接有效：[350ml Challenge Just4Fun 🚀 Auf geht's 🚀 [Finale] - #91 von Hoppsi - Contests - Forum | Cannabisanbauen.net](https://forum.cannabisanbauen.net/t/350ml-challenge-just4fun-auf-gehts/39473/91) ---
**Author:** ![Heddson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heddson/32/96742_2.png) [@Heddson](https://meta.discourse.org/u/Heddson)\ **Post date:** [2024年二月22日 22:33 UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/59 "2024-02-22T22:33:14Z")
我猜您已启用该特定类别的自动设置，并且所需的最低图片数量设置为 3（因为您的帖子中有三张图片）。 我注意到图片之间有一个空行。您是否启用了“自动允许空行”设置？ # ![auto_settings](https://global.discourse-cdn.com/meta/original/4X/6/1/d/61d8002615bcd0a10ecd633683272a9b3f0e19da.jpeg) ---
**Author:** ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)\ **Post date:** [2024年二月23日 12:54 UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/60 "2024-02-23T12:54:50Z")
是的，两个设置一直都已启用 ![Screenshot 2024-02-23 at 13.54.06](https://global.discourse-cdn.com/meta/original/4X/5/0/0/500dd91b1d0dd3fd440a5da7b7fdd3374ecd68d5.png) ---
**Author:** ![Heddson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heddson/32/96742_2.png) [@Heddson](https://meta.discourse.org/u/Heddson)\ **Post date:** [2024年二月29日 14:22 UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/61 "2024-02-29T14:22:41Z")
未能重现此问题。我唯一能想到的是，可能安装了另一个与 Masonry Image Gallery 不兼容的主题组件（或插件）。 [上一頁](https://meta.discourse.org/t/masonry-image-gallery/188315.md?page=2) [下一頁](https://meta.discourse.org/t/masonry-image-gallery/188315.md?page=4)