搜索“with:images”时在结果摘要中包含图片缩略图

您好!

我经常在我的论坛上查找用户发布的图片,尤其是在某些主题下(事实上,我有时会在任何论坛引擎上尝试这样做)。

搜索查询如下:

@Canapin with:images topic:265354

在主题视图中,结果如下所示:

在高级搜索页面上,它看起来像这样:

如果在摘要中包含缩略图,以便轻松找到所需内容,或者仅仅是提供一个良好的概览,那就太棒了。

此外,目前检查所有结果的唯一方法是单击一个结果以查看帖子,然后再次单击搜索图标以再次查看结果列表,然后单击第二个结果,依此类推……这很快就会让人恼火。 :confused:


一个模型图:

摘要示例代码:

<a class="widget-link search-link" href="/t/pictures-of-your-latest-ride-continued/265354/450" title="">
#450 by Canapin
  <span class="blurb"><span title="Sep 24, 2016 4:52 pm" data-time="1474728722000" data-format="tiny" class="relative-date">Sep 2016</span><span> - </span>
  <span>Poitiers, France http://tof.canardpc.com/view/6009f51c-c924-4d4b-b04f-b93fda475d3f.jpg</span></span>
  <span class="thumbnails-container">
    <span class="result-thumbnail" style="background-image: url('https://f5i4i8k5.stackpathcdn.com/uploads/default/original/3X/f/5/f5ec74ec6a23af79ccc2aa0fa175e2db15932aa2.jpeg');"></span>
    <span class="result-thumbnail" style="background-image: url('https://f5i4i8k5.stackpathcdn.com/uploads/default/original/3X/6/d/6d47f72debc3920dabf483e940b8c0b66f0da772.jpeg');"></span>
    <span class="result-thumbnail" style="background-image: url('https://f5i4i8k5.stackpathcdn.com/uploads/default/original/3X/a/3/a3ff77045a113377db71625dba7ac63487958608.jpeg');"></span>
    <span class="result-thumbnail" style="background-image: url('https://f5i4i8k5.stackpathcdn.com/uploads/default/original/3X/0/1/018c76e5db311eddf6ee18740f139e0594773be0.jpeg');"></span>
    <span class="result-thumbnail" style="background-image: url('https://f5i4i8k5.stackpathcdn.com/uploads/default/original/3X/d/e/dec5d4e4948c074614d41c56ae087d782361ec6f.jpeg');"></span>
  </span>
</a>
.thumbnails-container {
    display: flex;
}
.result-thumbnail {
    width: 20%;
    height: 80px;
    margin-right: 10px;
    background-size: cover;
}

或者,添加一个链接可以显示一个常规的帖子列表,其中只包含从搜索查询中找到的帖子,然后我们可以像常规帖子列表一样滚动浏览它们(有点像“总结主题”功能)。

9 个赞

这看起来确实很棒!我喜欢它 :heart_eyes:

3 个赞