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

/ 48评 / 43

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

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

先看最终效果

每行2个:

每行3个:

每行4个:

每行5个:

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

原理解释:

基本原理图如上,红色为图片原始比例,黄色为图片显示区域,超出部分隐藏,看似很简单,是实际上会稍微繁琐一些,因为图片始终无法合理的居中显示在黄色区域,好在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兼容不同)

48条回应:“美化WordPress插入到文章中的相册”

  1. Hugo Linwei说道:

    向博主咨询一下:

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

  2. 记述文,不错,好资料

  3. 凯哥自媒体说道:

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

  4. 山野愚人居说道:

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

  5. 旧梦-mrju.cn说道:

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

  6. 灰狼说道:

    还能再慢点吗?

  7. newpm说道:

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注