增加瀑布流形式的相册

[shaoyaoqian]

希望能够有以下的效果：
https://meta.discourse.org/t/tiles-image-gallery/81950

可以和swpier功能并列，都需要使用fancybox。

[github-actions]

👋 Hello,
Your suggestion is great, we will add this feature in subsequent versions, thank you very much!

👋 您好，
您的建议很棒，我们将会在后续版本中加入这个功能，非常感谢！

[shaoyaoqian]

先把图片集处理成这个样子

<div class="tag-plugin gallery tile" id="tile-api">
<div class="tile-wrapper"><div class="tile-photo">
<img no-lazy="" src="https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/image/2659360.svg" alt="WechatIMG2" onerror="javascript:this.classList.add('error');this.src='https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/image/2659360.svg';" class="error">
</div>
<div class="tile-photo">
<img no-lazy="" src="https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/image/2659360.svg" alt="WechatIMG22" onerror="javascript:this.classList.add('error');this.src='https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/image/2659360.svg';" class="error"></div>
<div class="tile-photo">
<img no-lazy="" src="https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/image/2659360.svg" alt="WechatIMG20" onerror="javascript:this.classList.add('error');this.src='https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/image/2659360.svg';" class="error">
</div><div class="tile-photo"><img no-lazy="" src="https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/image/2659360.svg" alt="WechatIMG18" onerror="javascript:this.classList.add('error');this.src='https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/image/2659360.svg';" class="error"></div><div class="tile-photo"><img no-lazy="" src="https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/image/2659360.svg" alt="WechatIMG16" onerror="javascript:this.classList.add('error');this.src='https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/image/2659360.svg';" class="error"></div><div class="tile-photo"><img no-lazy="" src="https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/image/2659360.svg" alt="WechatIMG12" onerror="javascript:this.classList.add('error');this.src='https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/image/2659360.svg';" class="error"></div><div class="tile-photo"><img no-lazy="" src="https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/image/2659360.svg" alt="WechatIMG10" onerror="javascript:this.classList.add('error');this.src='https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/image/2659360.svg';" class="error"></div><div class="tile-photo"><img no-lazy="" src="https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/image/2659360.svg" alt="WechatIMG8" onerror="javascript:this.classList.add('error');this.src='https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/image/2659360.svg';" class="error"></div><div class="tile-photo"><img no-lazy="" src="https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/image/2659360.svg" alt="WechatIMG6" onerror="javascript:this.classList.add('error');this.src='https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/image/2659360.svg';" class="error"></div><div class="tile-photo"><img no-lazy="" src="https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/image/2659360.svg" alt="WechatIMG4" onerror="javascript:this.classList.add('error');this.src='https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/image/2659360.svg';" class="error"></div></div></div>

[shaoyaoqian]

https://blog.csdn.net/qq_32973061/article/details/82940975
https://blog.csdn.net/u013051748/article/details/108803871

I have read some posts and I think I need to learn how to use <li> at first.

[xaoxuu]

其实吧，我觉得网格布局就挺好的，看起来整齐：https://vlts.cc/v6/tag-plugins/#gallery

[shaoyaoqian]

网格也行，但是并不是每一张图片的长宽比都是一样的，这个怎么处理呢？

[xaoxuu]

就跟系统相册一样，超出部分剪裁，反正可以点击放大看全图的。

[shaoyaoqian]

volantis也主要是大佬开发的，那感觉这个功能很好实现，移过来就好了。

但是能不能加一个属性，[directory:文件夹]，能自动拉取文件夹中的照片。这里的文件夹可以是博客目录下的文件夹，或者是github仓库中的文件夹，也可以是自己云存储的文件夹

https://pinlyu.com/posts/31/
https://pinlyu.com/album/

还有一个横向的图片排版
https://blog.shishuai.monster/gallery/jay-chou/
它是一个justified gallery , 可以找到它的github仓库和展示页面。
http://miromannino.github.io/Justified-Gallery/

https://www.jianshu.com/p/46a4ca3e6623#

(function(){
  var grid;
  function init() {
    grid = new Minigrid({
      container: '.cards',
      item: '.card',
      gutter: 12
    });
    grid.mount();
  }
  
  // mount
  function update() {
    grid.mount();
  }

  document.addEventListener('DOMContentLoaded', init);
  window.addEventListener('resize', update);
})();

http://jsbin.com/wamele/edit?js,output
https://minigrid.js.org

[xaoxuu]

不错，可以参考下

[shaoyaoqian]

[shaoyaoqian]

目前我把相册做成这个样子了。

不过另外说一句，javascript真实太好玩了～简单易学，功能强大

[shaoyaoqian]

刚刚看了一下又拍云的缩略图功能，我觉得可以加入这个功能。

[shaoyaoqian]

调通了，在配置文件里加上
gallery:
enable: true
thumbnail_suffix: _small

然后在又拍云里增加一项缩略图配置

如果配置了缩略图，那么需要修改路径。
if (ctx.theme.config.plugins.gallery.thumbnail_suffix) {
img = img.replace('" alt="', ctx.theme.config.plugins.gallery.thumbnail_suffix + '" alt="');
}

[shaoyaoqian]

这些就是缩略图了

[shaoyaoqian]

大佬，你觉得这个还行吗？这个可以开pull request吗？

[shaoyaoqian]

https://blog.pengfeima.cn/gallery/ 具体效果可以看这里。

[xaoxuu]

很多人不一定有又拍云

[shaoyaoqian]

其他CDN的配置是类似的。如果不使用缩略图，留空就行了。

[xaoxuu]

这个不用pr了😅有喜欢的小伙伴可以fork你的版本

[shaoyaoqian]

好吧～

我在看文档GitHub integrations的文档～

[xaoxuu]

已经实现

[github-actions]

👋 Hello,
This issue has been marked as resolved. If there are other issues, please contact us with a new issue.

👋 您好，
此 issue 已经被标记为已解决，如果还有其它问题，请提出新的 issue 联系我们。