美化WordPress插入到文章中的相册

作者: Tokinx
时间: 2016-12-15
分类: 代码

不晓得哪个版本开始，WordPress在添加媒体入口里加入了“创建相册”功能，就是可以把你已上传的图片选择N个创建成相册，并且可以把相册插入到文章当中，对于某些多图的文章，使用这个功能让文章显得漂亮工整。

但是某些自己制作的主题并无法愉快的使用它，首先，插入的使用缩略图基本上要正方形的，如果之前上传的图片没有裁剪成正方形，那就有点难办了；其次，大大小小的图片有正方形有长方形的，另文章显得极其不规整，怎样让图片简单轻松无痛又漂亮的显示在文章页呢？

先看最终效果

每行2个：

[gallery columns="2" link="file" size="large" ids="3867,3540"]

每行3个：

[gallery link="file" size="large" ids="3882,3880,4079"]

每行4个：

[gallery columns="4" link="file" size="large" ids="3864,3863,3869,3859"]

每行5个：

[gallery columns="5" size="medium" link="file" ids="3884,3881,3878,3870,3874"]

还有更多就不演示了，回头自己试一下即可。

原理解释：

基本原理图如上，红色为图片原始比例，黄色为图片显示区域，超出部分隐藏，看似很简单，是实际上会稍微繁琐一些，因为图片始终无法合理的居中显示在黄色区域，好在CSS3给力

利用CSS3的translate()，WP的插入相册的DOM结构刚好够用，直接贴CSS吧

.gallery{
 margin:-1%!important;
}
.gallery .gallery-item {
 padding:1%;
 /* width:14.66666%!important; */
 margin: 0 !important;
 overflow:hidden;
 position:relative;
}
.gallery-columns-3 .gallery-item{
 width:33.3333333%!important;
}
.gallery .gallery-item dt:before {
 content: "";
 display: block;
 padding-top: 100%;
}
.gallery .gallery-item dt {
 position: relative;
 box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;
 background: #eee;
 cursor: pointer;
 overflow: hidden;
}
.gallery .gallery-item a {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 opacity: 1;
 -webkit-transition: opacity .1s;
 transition: opacity .1s;
 transform: translate(50%,50%);
}
.gallery .gallery-item img{
 position:absolute;
 top: 0;
 left: 0;
 max-height:100%;
 max-width:none!important;
 width:auto!important;
 border:0!important;
 transform: translate(-50%,-50%);
}

核心CSS如上，根据主题不同请自行调整。

兼容性

此方法兼容IE8及以上，IE8不支持居中单不会拉伸图片（效果依然不错）

PS: 2016年12月16日补充

感谢秋空提供的CSS3新属性：object-fit

新属性更加简单粗暴，仅居中代码从12行左右缩短到了3行（完美）

新属性代码如下：

.gallery{
 margin:-1%!important;
}
.gallery .gallery-item {
 padding:1%;
 /* width:14.66666%!important; */
 margin: 0 !important;
 overflow:hidden;
 position:relative;
}
.gallery-columns-3 .gallery-item{
 width:33.3333333%!important;
}
.gallery .gallery-item dt:before {
 content: "";
 display: block;
 padding-top: 100%;
}
.gallery .gallery-item dt {
 position: relative;
 box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;
 background: #eee;
 cursor: pointer;
 overflow: hidden;
}
.gallery .gallery-item img{
 position:absolute;
 top: 0;
 left: 0;
 height:100%;
 width:100%;
 object-fit:cover;
 border:0!important;
}

新属性兼容性

PC：兼容绝大部分现代主流浏览器（webkit内核、firefox），不支持IE

Mobile：Safari、Android4.4.4+（国内ROM上Android5.x兼容不同）

标签: Css3, 前端, 相册

已有 60 条评论

大雄

2016-12-15 14:37

我是沙发吗？好开森。

回复
皮皮

2016-12-15 15:12

終於除草了 :wink:

回复
1. Tokin
  
  2016-12-16 14:12
  
  年终大总结行动要开始了 :arrow:
  
  回复
前端狂人

2016-12-15 15:44

前排仰望高端玩家，售瓜子花生。:cool:

回复
c

2016-12-15 16:49

:mrgreen: 黑科技：object-fit，详见：loli.vip，图文列表

回复
1. Tokin
  
  2016-12-16 14:44
  
  研究了下，然后写了个demo试了试，发现我的代码支持IE8+，object-fit不支持IE，不过新属性好屌，三行就搞定了图片居中裁剪 :cry:
  
  回复
Siinger

2016-12-15 16:51

简单实用 :arrow:

回复
JJlin

2016-12-15 20:42

之前忘记谁介绍我用bootstrap-gallery替代原生相册功能的，然后一用不回头，而且排版也接近 WordPress 的那个鬼插件jetpack，就是代码量有点膨胀！ :eek:

回复
1. Tokin
  
  2016-12-16 14:11
  
  原生的很好用啊 :?:
  
  回复
自定义

2016-12-15 21:56

仰望~

回复
Vans爱好者

2016-12-16 09:18

一直都没用这个功能…… :evil:

回复
打样机

2016-12-16 16:07

谢谢分享，看起来挺高大上的。。 :mrgreen:

回复
幸福理财师

2016-12-16 19:41

支持外链的照片吗？比如阿里云oss之类的

回复
1. Klose
  
  2016-12-17 00:41
  
  貌似不行相册的创建要上传到多媒体 :neutral:
  
  回复
  1. Tokin
    
    2016-12-17 13:56
    
    你这不是废话吗
    
    回复
2. Tokin
  
  2016-12-17 13:56
  
  不支持外链
  
  回复
盒子小栈

2016-12-17 19:06

收藏备用，以后应该用得着 :wink:

回复
Unee Wang

2016-12-17 23:29

做一个IFRAME的相册，嵌入到网页里，效果怎么样

回复
1. Tokin
  
  2016-12-20 17:45
  
  显然是十分不科学的 :grin:
  
  回复
旧梦-mrju.cn

2016-12-18 14:29

好东西，收藏一下。 :oops:

回复
菊部

2016-12-18 17:08

牛逼

回复
尹先生

2016-12-18 23:04

typecho默默路过。。 :evil:

回复
xiao酱沫

2016-12-18 23:54

加个图片灯箱就完美了 :mrgreen:

回复
凯哥自媒体

2016-12-20 14:57

分享的不错，谢谢

回复
神父

2016-12-20 16:36

牛逼男你好

回复
三五营销

2016-12-21 14:45

偶然来访，受益良多！

回复
电脑打样机

2016-12-22 16:54

:mrgreen: :mrgreen: 确实效果不错的呀

回复
木头

2016-12-23 09:58

不明所以的吃瓜群众来围观 :smile: :smile:

回复
文栋说自媒体

2016-12-23 11:17

这个功能挺好，我试试看能不能用在我的网站上

回复
春熙路

2016-12-23 14:08

:neutral: 赞一个

回复
凯哥

2016-12-23 17:14

我有恐高症

回复
不点儿

2016-12-24 21:14

学习了 :mrgreen:

回复
衣皇后

2016-12-25 14:51

掐指一算，这个博客能风光一百年！

回复
古城

2016-12-27 13:15

你484傻
:smile:

回复
挖宝网

2016-12-27 15:12

没什么好说的，提前祝博主新年快乐！

回复
馋丫风独味

2016-12-29 22:39

好功能，非得代码。

回复
xy

2016-12-31 16:30

不怎么用相册这个功能

回复
newpm

2017-01-01 14:40

默默的秀一下基情，最近访问速度有点慢啦:)

回复
1. Tokin
  
  2017-01-01 16:18
  
  刚搬到一个香港主机，没想到速度这么慢，今天搬走
  
  回复
灰狼

2017-01-04 10:21

还能再慢点吗？

回复
1. Tokin
  
  2017-01-04 13:58
  
  搞到问题了，是头像缓存插件没正确缓存头像，导致每次加载页面都要重新请求所有头像。。。不慢才怪。。。
  
  回复
  1. 旧梦-mrju.cn
    
    2017-01-05 09:34
    
    最近确实发现很慢，刚才评论提交了好久，我以为没点到提交按钮，多点了几遍按钮。
    
    回复
旧梦-mrju.cn

2017-01-05 09:33

每天都来博主的博客里，发现今天变单栏了。另外求个友链，不知道还有位置不。

回复
山野愚人居

2017-01-07 12:27

没用过相册功能，我附件都是二级域名单独存储的，直接URL引用的！

回复
凯哥自媒体

2017-01-12 11:09

分享是美德，谢谢博主的分享。

回复
写给工厂上班的人

2017-02-14 14:24

记述文，不错，好资料

回复
Hugo Linwei

2017-02-24 13:52

向博主咨询一下：

这段css是要放哪里呢，直接放style.css没效果哦
是不是要放wp_includes\media.php 里面？

回复
1. Tokin
  
  2017-02-24 14:50
  
  不是，就是丢到style.css就行了，在文章中插入相册即可
  
  回复
13123

2018-08-29 16:06

:wink: 很好看啊

回复
卖火柴的小丸子

2019-04-13 18:12

好看，好看。只是相册设置那里链接到是附件页面吗，还是媒体文件。点开图片不是那种直接放大的过程。跑领一个链接了

回复
枫叶

2019-05-05 16:38

扒了你这个主题的ViewImage.js到我主题里后，发现typecho的markdown编译器给a标签编译出来的链接没有带rel属性的，这样的结果就是a标签的链接点击后无法跳入链接所要到达的页面，一直loading。然后我自己用jq给文章内部的a标签加rel属性，但是这么做后，a标题里的img又无法用ViewImage灯箱了。陷于两难中。。。想写一个判断a标签里的链接是否为png，jpg图片链接来给a标签加rel属性，但是对于我这种小白来说，我真的是不会写复杂的jq。我觉得是时候打赏你一杯咖啡帮我写一哈了。。

回复
1. Tokin
  
  2019-05-07 00:14
  
  $(".post").find("a[href$='.jpg']")
  jq支持css的选择器，你可以像这样选择href以XXX结尾的所有a标签
  
  回复
枫叶

2019-05-05 16:40

$(".post").find("a").each(function () {
if ($(this).attr("rel") !== "external") {

$(this).attr('rel', 'external');
}
});

简易版本的添加rel的jq。蛋疼。复杂的不太会写。。。

回复
枫叶

2019-05-05 16:41

https://mrju.cn/20181221.html 你看看哈，文章里的出处链接点击后一直loading。。。

回复
枫叶

2019-05-06 17:53

研究了一天多，终于解决了这个问题。多谢博主的这个viewjs

回复
1. Tokin
  
  2019-05-07 00:03
  
  就是说你研究了一天导致我咖啡泡汤了吗，哈哈哈哈，恭喜恭喜，我现在很少逛博客，有问题可以QQ联系我：NzQyMjA2MTI1（B64）
  
  回复
  1. 枫叶
    
    2019-05-11 19:04
    
    你邮件评论回复好像没有用了，还得过来看一哈~不过我要是想找到你，你给我的这个字符串我相信我能找到你。虽然你不折腾博客了，但是我闲的没事了就来你这边转一转~
    
    回复
疆飞

2019-10-08 09:31

无论高宽比什么样都可以吗？

回复
1. Tokin
  
  2019-10-10 04:54
  
  就单纯的正方形，宽高自适应。
  核心实现参考WordPress的媒体->媒体库。
  看了你的文章，应该能满足你的需求，可以一试。
  
  回复
冯晓

2021-02-23 14:07

学习了

回复