竹炉山房

bigfa今日发了一篇水文《Talk About Sulli》，阐释了Sulli主题的应用场景，最重要是图片要精致，

虽然版本号没设置为1.0.0，但Sulli这个主题已经算是成品了，其实主题应用场景还是挺单一的，基本只适合有大量图片的博客，甚至对图片质量也有很大的要求，站点美观与否基本上就是图片质量决定的，如果你文章配图精致，这个主题绝对可以让你的站点更上一层楼，反之，还是使用其他主题吧。

作为我来说，travel博图片众多，因此满足“精致”的要求不在话下。有问题的是talk博，平时也就是胡言乱语几句，难得有正儿八经的图文混合，因此首页呈现惨不忍睹的状态。

在自制的Sulli-child子主题中做了如下（主要）修改：

• 文章无图时，首页缩略图设为灰色图片。
• 首页logo更改为文字。
• CSS做了大量修改。
• 小屏时显示顶部nav。
• 增加底部工具模块显示相关文章和往昔今日。

当然最重要的是更改缩略图的裁切方式以适合容器。由于bigfa使用了又拍云作为主要处理工具，因此使用Aliyun的本博并不适用，好在Aliyun也一样强大提供各种图片处理工具，相应的需对functions.php中如下语句做修订。经测试后可用：

function aladdin_get_background_image($post_id, $width = null, $height = null)
{
	/* 将上传Aliyun时设置的水印样式，替换为自定义的resize+sharp+watermark。坑点在下面style和watermark之间的%2F，文中有时候是%2F有时候是/，差点就试不成功。 */
	$watermarktext = '?x-oss-process=style%2Fwatermark_webp';
	$watermarktext2 = '?x-oss-process=style/watermark_webp';
	/* 注意用m_fill。 */
	$thumbtext = '?x-oss-process=image%2Fresize,m_fill,h_' . $height . ',w_' . $width . '/sharpen, 100/watermark, text_c3lueWFuLm5ldA, type_ZHJvaWRzYW5zZmFsbGJhY2s, color_ffffff, size_16, shadow_10, g_se, t_90, x_8,y_6';
	if (has_post_thumbnail($post_id)) {
	$timthumb_src = wp_get_attachment_image_src(get_post_thumbnail_id($post_id), 'full');
	$output       = $timthumb_src[0];
	$output = str_replace( $watermarktext, $thumbtext, $output);
	$output = str_replace( $watermarktext2, $thumbtext, $output);
    } elseif (get_post_meta($post_id, '_banner', true)) {
	$output = get_post_meta($post_id, '_banner', true);
	$output = str_replace( $watermarktext, $thumbtext, $output);
	$output = str_replace( $watermarktext2, $thumbtext, $output);
    } else {
        $content         = get_post_field('post_content', $post_id);
        $defaltthubmnail = DEFAULT_THUMBNAIL;
        preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/', $content, $strResult, PREG_PATTERN_ORDER);
        $n = count($strResult[1]);
        if ($n > 0) {
		$output = $strResult[1][0];
		$output = str_replace( $watermarktext, $thumbtext, $output);
		$output = str_replace( $watermarktext2, $thumbtext, $output);
        } else {
		$output = $defaltthubmnail;
        }
    }
    if (UPYUN && $width && $height) {
		$output = $output . '!/both/' . $width . 'x' . $height;
    }
    $result = $output;
    return $result;
}

上面代码有个bug，在@media是小屏情况下OSS的m_fill将突破容器，在这种情况下应该改用m_pad，但php无法传递参数，小屏大屏不能两全，折衷办法是在CSS中@media判断并限制高度。

@media (max-width: 900px) {
	.post .image--link {
		height: 113px;
		max-height: 113px;
		width: fill-available;
		width: -webkit-fill-available;
	}
}

@media (max-width: 900px) and (orientation: landscape) {
	.post .image--link {
		height: 210px;
		max-height: 210px;
		width: fill-available;
		width: -webkit-fill-available;
	}	
}