Support gallery feature by default

houminz commented 4 years ago

作为一个个人博客，很多时候大家都有搭建自己的相册的需求。

对于相册，期待实现的效果与豆瓣相册类似，具体如下

主界面
- 可以有分类的子相册，每个相册可以自定义自己的相册名和相册描述
- 可以自动建材封面为等尺寸
分类子相册界面
- 可以用类似photoswipe插件来浏览相册
- 加载时候可以有缩略图，点击可以看大图
- 按图片原长宽比平铺
- 插入的图片源可以来自本地，也可以来自图床外链
- 点击看大图时，每张图片可以有自己的文字描述
其他
- 相册也可以插入视频
- 自动化每次新加如图片的流程
- 每个子相册内部可以按照时间线将图片排序

对于上述需求，经过Google搜索可以看到很多博主已经做出过这方面的尝试与实践，但是总是感觉在某些方面还差了一点

https://asdfv1929.github.io/2018/05/26/next-add-photos 没有子相册功能，流程不够自动化
https://co5.me/2018/181112-gallerry2.html 没有photoswipe的效果
https://timding.top/2017/09/18/Hexo-NexT-%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E7%9B%B8%E5%86%8C-%E4%BA%8C/ 没有子相册功能
https://liyangzone.com/2019/07/22/hexo%E5%8D%9A%E5%AE%A2%E6%B7%BB%E5%8A%A0%E4%B8%80%E7%BA%A7%E5%88%86%E7%B1%BB%E7%9B%B8%E5%86%8C/ 使用的不是Next主题

前端小白这两天一直都在折腾这个，但是还是感觉有些乏力，如果Next主题能够自带相册功能，真的是非常棒了

welcome[bot] commented 4 years ago

Thanks for opening this issue, maintainers will get back to you as soon as possible!

issue-label-bot[bot] commented 4 years ago

Issue-Label Bot is automatically applying the label Feature Request to this issue, with a confidence of 0.95. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

stevenjoezhang commented 4 years ago

目前有Group Pictures tag： https://theme-next.org/docs/tag-plugins/group-pictures 其它主题的实现： https://louisbarranqueiro.github.io/hexo-theme-tranquilpeak/2013/02/18/Image-gallery-showcase/ 此前也有相关的讨论： https://github.com/theme-next/hexo-theme-next/issues/230 https://github.com/theme-next/awesome-next/issues/7 https://github.com/theme-next/awesome-next/issues/9

NexT
Group Pictures
NexT User Docs – NexT Supported Tags – Group Pictures

houminz commented 4 years ago

非常感谢回复，之前也看到过关于Group Pictures Tag的文档，但是仍然觉得对于上述需求不是能够很直接的满足，而且Group Pictures插入的图片效果似乎也略显死板。不知道是不是我对Group Pictures的理解还不够到位，是否有利用Group Pictures生产photowall的示例呢，谢谢！

之前的几次讨论，单独添加相册的选项似乎没有具体的结论，如果能够把这个feature加到roadmap里面感觉是一个不错的选择。

非常感谢社区各位的努力，制作出这么优秀的Next主题。如果上述讨论有任何不妥的地方，欢迎指出！

stevenjoezhang commented 4 years ago

不客气，感谢您的支持。整理了一下，其实您提到的大部分功能NexT都已经实现了：

主界面

[x] 可以有分类的子相册，每个相册可以自定义自己的相册名和相册描述（使用sub-menu，在_config.yml中设置）
[ ] 可以自动剪裁封面为等尺寸
分类子相册界面
[x] 可以用类似photoswipe插件来浏览相册（NexT已经内置了fancybox和mediumzoom）
[x] 加载时候可以有缩略图，点击可以看大图（Hexo有插件可以实现，在 https://github.com/hexojs 下）
[x] 按图片原长宽比平铺（这是默认的）
[x] 插入的图片源可以来自本地，也可以来自图床外链（自己设置链接就行）
[x] 点击看大图时，每张图片可以有自己的文字描述（自己设置image title caption就行）
其他
[ ] 相册也可以插入视频（这是个好建议，可以实现一下）
[x] 自动化每次新加入图片的流程（NexT作为Hexo主题无法实现此功能）
[ ] 每个子相册内部可以按照时间线将图片排序

能够把这个feature加到roadmap里面感觉是一个不错的选择

它曾经在v7的roadmap中，但是后来删除了。事实上，它更适合作为一个独立的插件存在，而不是主题的一部分。

是否有利用Group Pictures生产photowall的示例呢

官方文档就是一个很好的示例。把Group Pictures tag放到一个自定义的页面中，然后在侧栏中增加这个链接就行。

GitHub
Hexo
A fast, simple & powerful blog framework, powered by Node.js. - Hexo

stevenjoezhang commented 4 years ago

group-pictures可以加上一个相册名参数。

按照时间线将图片排序听上去很cool。

另一个有趣的想法是用exif.js来显示图片的元信息。

gapplef commented 4 years ago

them-next/awesome-next#9是我提的其实我想要的并不是一个手动，比如使用group-pictures，创建的用于展示作品的相册，而是一个全自动的图片索引页面。

使用场景是：我正常的发布博客，在博客中会插入各种图片：普通的博文配图也好、手机随拍也好、专业摄影也好，所有这些图片都会被自动汇总到一个索引页面，并按时间顺序展示。一个非常好的例子是微博的图片墙

最简单粗暴的做法是直接索引指定的图片资源目录(如/images)下的所有图片，同时过滤掉favicon,二维码之类的小尺寸图片。但仔细想下问题还挺多的：

博文中发布的图片可能只是引用的外部链接，并没有存在images下；
图片所在博文的发布时间和图片的最终修改时间可能并不一致，如何建立时间线；
是否有可能将图片关联到发布图片的博文，类似微博图片墙的做法； ......

越想越复杂:man_facepalming: ，不知道是否能实现。

stevenjoezhang commented 4 years ago

全自动对于一个主题来讲并不现实。比较可靠的方式是让 Hexo 去实现，然后 NexT 主题调用相关的API。如果确实认为这是一个重要的功能，可以到 Hexo 那边发一个 Feature Request，NexT主题会跟进的。

stevenjoezhang commented 4 years ago

这个 Issue 先关了。因为大部分要求的功能NexT都已经实现了，而其它的都难以进行操作。例如

按照时间线将图片排序

「时间线」三个字当然很简单，但具体以哪个时间为准？本地图片的创建时间、修改时间；Web服务器提供的时间；还是 EXIF 给出的拍摄时间？

即使这样做了，也难以对图库中的所有照片统一。这已经超出了 NexT 主题的解决范围。我们仍然倾向于让 Hexo 提供相关的接口。

欢迎提一些更加具体、可操作的建议。

houminz commented 4 years ago

Hi, 各位，后来我自己实现了上述的功能，在我看来大体还可以用。

具体实现过程如下 Hexo NexT主题添加多级相册功能。
具体效果参见我的相册欢迎各位提出意见和建议。

stevenjoezhang commented 4 years ago

谢谢，如果您有兴趣的话，可以在这里发一个Pull request: https://github.com/theme-next/awesome-next 让更多的人看到这个实现方法

GitHub
theme-next/awesome-next
:sunglasses: Theme NexT, AWESOME NexT! Contribute to theme-next/awesome-next development by creating an account on GitHub.

houminz commented 4 years ago

Hi, steven, 我刚刚在awesome-next的repo下提交了相关的实现方法。对于实现一个类似于 hexo-generator-album 的插件也是很感兴趣的，但是可能最近没多少时间了，期待下次能够补上。

stevenjoezhang commented 4 years ago

好的，非常感谢！

enkr1 commented 5 months ago

https://github.com/next-theme/hexo-theme-next/commit/7b91f8ee74ebdb417f2b508962224b3d653ad5ca#commitcomment-141683229

I am facing this issue too...

theme-next / hexo-theme-next

Support gallery feature by default #1253

主界面

分类子相册界面

其他