精选翻转卡片

Featured Tiles 主题组件的修改版。以翻转卡片行的形式展示精选主题:

为了避免卡片过大或过小,该组件针对不同窗口尺寸使用了断点。它基本上在移动设备上显示两个卡片,在平板设备上显示四个,在桌面设备上显示五个或六个。您至少应精选六个主题。

无论如何,如果您有更多主题并使用随机化功能,效果会更有趣:

Screenshot from 2021-06-18 21-06-49

这样您总能获得全新的卡片布局 :black_joker:

22 个赞

看起来不错!顺便一提,在 Safari 中会出现以下情况:

有没有可能增加方形裁剪选项?因为不同的宽高比看起来不太协调,或者像“主题缩略图”那样,在图片后面添加一个模糊版本的背景?只是提供一些想法供你参考 :+1:

2 个赞

是的,目前还无法如此灵活地设置。因此,非常感谢您提供关于可能使用场景的反馈!我会尝试调整照片的样式,看看如何以更具精致感的外观来优化效果。

关于更多选项,我已为卡片的宽高比以及缩略图的调整方式添加了可调节设置:

4 个赞

能否在移动端增加精选话题的数量并支持横向滚动?那就太棒了。

我在移动设备上遇到翻转卡片无法显示的问题。

Safari

Chrome

我的网站

1 个赞

我在自己的网站上无法复现此问题,但我注意到你安装了多个组件以显示在列表区域上方,除了“在线用户”外,其他组件均未显示。或许可以检查一下这个问题?

1 个赞

我觉得这似乎是 Safari 的问题,因为自从安装后,我们论坛上出现问题的成员都在使用 Safari,看来 @Bank_Live 也在用。

@Bank_Live 的网站在 Chrome 上也无法显示该组件。我认为该问题与组件无关,至少我无法复现。

不过,Safari 确实存在一些 CSS 问题,我可以在一周内查看。目前手边没有 Mac,也无法在 Linux 的 WebKit 上复现该问题。

2 个赞

关于 Safari 的问题有什么新消息吗?

该组件使用了 aspect-ratio 属性。我原本以为 Safari 已支持该属性,但看来要等到下一个版本(15)才会支持。

为了暂时解决这个问题,我在设置中添加了一个快速修复方案。您只需添加一个计算后的百分比值,然后通过 CSS 技巧来模拟宽高比:

3 个赞

谢谢!在我们的社区里效果出奇的好!
Season 2 Dancing GIF by The Fresh Prince of Bel-Air

2 个赞

功能请求。

能否提供一个选项,使其显示在特定类别页面上?

例如,如果查看“休息室”,则此处显示精选卡片。

显示的图片是类别图片。我正在使用 Air 主题。应用程序显示与该类别相关的精选主题,来自其子类别“Frontier news”。

卡片图片的推荐尺寸是多少?

这是我关于在特定感兴趣类别上方显示精选主题的应用程序的想法。

我正在使用 Air 主题。它需要有一个选项设置,可以将其放在类别徽标下方。并且如果可能的话,可以选择在多个选定的类别中显示。

例如,我有一个主类别,有几个子类别,我想展示“新闻”子类别。