前言

之前一直觉得自己的说说样式似乎缺少了什么东西,直到一天我发了一条关于新冠病毒事实数据的说说,并贴上了两张图片,忽然发现了问题的所在:我没有给我的说说添加图片样式!看着两张图片大小不一还各占一行,简直是奇丑无比。于是我经不住感叹,没有图片九宫格布局的说说是没有灵魂的!

初次方案

凭借我仅有的那一丁丁点CSS知识,想到的就是使用width:33.33%;float:left;来控制图片的宽度,然后用jQuery来获取图片的宽度,让后赋值给图片的高度。在插入图片时选择链接到媒体文件。再用js写一个简易的灯箱,点击图片可以查看原图。总的来说,在没有更好的方案下,这方案勉强还可以接受,就是每次插入一张图片对应的代码太长了,看的贼难受。

当前方案

偶然知道WordPress还有相册这个功能,它可以一次选择几张图片包装成一个类似于画廊的区域插入到文章中。它是一种短代码,比如【gallery link="file" ids="45,47,46"】,就表示插入id为45,46,47的三张图片。这样用它来做图片九宫格就方便多了。

修改相册html结构

WordPress相册原本的html结构比较复杂,嵌套了三四个<div>。我们做图片九宫格根本用不到这么复杂的结构,所以我们先注销默认的相册短代码的回调函数,然后自己写一个新的回调函数(原来的代码上做修改即可),这里附上我的代码做参考:

remove_shortcode('gallery', 'gallery_shortcode'); //注销原来的回调函数
add_shortcode('gallery', 'my_gallery_shortcode'); //添加我们修改的回调函数

gallery_shortcode()函数在wp-includes/media.php中,我们直接把它复制过来然后改动相应的地方就好了。

$output = "<div id='$selector' class='post-gallery'>";
    $i = 0;
    foreach ( $attachments as $id => $attachment ) {
        $attr = ( trim( $attachment->post_excerpt ) ) ? array( 'aria-describedby' => "$selector-$id" ) : '';
        //$image_output = wp_get_attachment_link( $id, $atts['size'], false, false, false, $attr );
        $image_output = '<a href="'.wp_get_attachment_url($id).'" data-fancybox="gallery"><img data-original="'.wp_get_attachment_thumb_url($id).'"/></a>';
        $image_meta = wp_get_attachment_metadata( $id );
        $orientation = '';
        if ( isset( $image_meta['height'], $image_meta['width'] ) ) {
            $orientation = ( $image_meta['height'] > $image_meta['width'] ) ? 'portrait' : 'landscape';
        }
        $output .= "<li class='gallery-item'>";
        $output .= "$image_output";
        if ( $captiontag && trim( $attachment->post_excerpt ) ) {
            $output .= "
                <{$captiontag} class='wp-caption-text gallery-caption' id='$selector-$id'>
                " . wptexturize( $attachment->post_excerpt ) . "
                </{$captiontag}>";
        }
        $output .= "</li>";
    }
    $output .= '</div><div style="clear:both"></div>';

其中

//$image_output = wp_get_attachment_link( $id, $atts['size'], false, false, false, $attr );
$image_output = '<a href="'.wp_get_attachment_url($id).'" data-fancybox="gallery"><img data-original="'.wp_get_attachment_thumb_url($id).'"/></a>';

我使用下面这句代码是因为我需要使用fancybox.js插件来做灯箱。

添加CSS样式

这部分就大家自己发挥了,这里附上我的代码作为参考:

.post-gallery {
    margin-left: -5px;
    margin-right: -5px;
}
.post-gallery .gallery-item {
    list-style: none;
    width: 33.33% !important;
    float: left;
    padding: 0px 5px 10px 5px;
}
.post-gallery img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0.25rem;
}
.topic {
    color: #fff;
}