/ 博客 / 279浏览

主题Sulli使用Aliyun OSS缩略图

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';
	$watermarktext2 = '?x-oss-process=style/watermark';
	/* 注意用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;
	}	
}
Sulli-child
Sulli-child
Sulli-child @ iPhone 11 Pro, portrait mode
Sulli-child @ iPhone 11 Pro, portrait mode
Sulli-child @ iPhone 11 Pro, landscape mode
Sulli-child @ iPhone 11 Pro, landscape mode

5

  1. Betty

    已经很久没有折腾的欲望了……

    以前就算没打算换主题,还是会有事没事去看看新主题,如今是毫无念想了。

    Google Chrome 81 · Mac OS X 10.15
    1. S

      @Betty有时间就折腾下,哈

      Wordpress App 14 · iPhone iOS 13.4.1
  2. Betty

    呃……

    从留完言出现的头像看,亲是着手调用N年前的缓存吗?

    Google Chrome 81 · Mac OS X 10.15
    1. S

      @Betty哈哈哈,这个结果确实没想到,用了qiniu的头像cdn,估计是qiniu的锅

      Wordpress App 14 · iPhone iOS 13.4.1
  3. 从良未遂

    好看

    Google Chrome 80 · Windows 7

发表回复

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