Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support gallery feature by default #1253

Closed
houminz opened this issue Nov 3, 2019 · 14 comments
Closed

Support gallery feature by default #1253

houminz opened this issue Nov 3, 2019 · 14 comments

Comments

@houminz
Copy link

houminz commented Nov 3, 2019

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

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

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

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

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

@welcome
Copy link

welcome bot commented Nov 3, 2019

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

@issue-label-bot
Copy link

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

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

@stevenjoezhang
Copy link
Contributor

stevenjoezhang commented Nov 3, 2019

目前有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/
此前也有相关的讨论: #230
theme-next/awesome-next#7
theme-next/awesome-next#9

NexT
NexT User Docs – NexT Supported Tags – Group Pictures

@houminz
Copy link
Author

houminz commented Nov 3, 2019

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

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

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

@stevenjoezhang
Copy link
Contributor

stevenjoezhang commented Nov 3, 2019

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

主界面

  • 可以有分类的子相册,每个相册可以自定义自己的相册名和相册描述(使用sub-menu,在_config.yml中设置)
  • 可以自动剪裁封面为等尺寸

分类子相册界面

  • 可以用类似photoswipe插件来浏览相册(NexT已经内置了fancybox和mediumzoom)
  • 加载时候可以有缩略图,点击可以看大图(Hexo有插件可以实现,在 https://github.com/hexojs 下)
  • 按图片原长宽比平铺(这是默认的)
  • 插入的图片源可以来自本地,也可以来自图床外链(自己设置链接就行)
  • 点击看大图时,每张图片可以有自己的文字描述(自己设置image title caption就行)

其他

  • 相册也可以插入视频(这是个好建议,可以实现一下)
  • 自动化每次新加入图片的流程(NexT作为Hexo主题无法实现此功能)
  • 每个子相册内部可以按照时间线将图片排序

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

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

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

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

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

@stevenjoezhang
Copy link
Contributor

stevenjoezhang commented Nov 3, 2019

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

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

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

@gapplef
Copy link

gapplef commented Nov 3, 2019

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

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

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

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

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

@stevenjoezhang
Copy link
Contributor

stevenjoezhang commented Nov 6, 2019

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

@stevenjoezhang
Copy link
Contributor

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

按照时间线将图片排序

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

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

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

@houminz
Copy link
Author

houminz commented Dec 5, 2019

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

@stevenjoezhang
Copy link
Contributor

stevenjoezhang commented Dec 5, 2019

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

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

@houminz
Copy link
Author

houminz commented Dec 6, 2019

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

@stevenjoezhang
Copy link
Contributor

好的,非常感谢!

@enkr1
Copy link

enkr1 commented May 5, 2024

next-theme/hexo-theme-next@7b91f8e#commitcomment-141683229

I am facing this issue too...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants