子比小优化|用户封面缩放

前言

老唐的用户封面图片建议是1000*500，这个分辨率在用户中心显示没啥问题，但是在页面侧边栏显示就感觉不是很好看了，如图：

原版

修改版

说明

• 首先本功能基于OSS，本地存储的图片可自行依照思路修改代码。
• 修改代码有点多，不利于主题更新。

教程

关键函数

get_user_cover_img

未登录

位置

/zibll/inc/widgets/widget-user.php

搜索Hi！请登录

源代码

$loged_title = !empty($instance['loged_title']) ? $instance['loged_title'] : 'Hi！请登录';
        $lazy_attr   = zib_is_lazy('lazy_other', true) ? 'class="lazyload fit-cover" src="' . zib_get_lazy_thumb() . '" data-' : 'class="fit-cover"';
        $cover       = $instance['class'] ? '<div class="user-cover graphic" style="padding-bottom: 50%;"><img ' . $lazy_attr . 'src="' . _pz('user_cover_img', ZIB_TEMPLATE_DIRECTORY_URI . '/img/user_t.jpg') . '"></div>' : '';
        $avatar      = '<span class="avatar-img avatar-lg"><img alt="默认头像" class="fit-cover avatar" src="' . zib_default_avatar() . '"></span>';
        $html        = '<div class="user-card zib-widget widget">' . $cover . '

修改版

$thumbnail = '/thumbnail'; //''填自己OSS的图像处理规则
        $loged_title = !empty($instance['loged_title']) ? $instance['loged_title'] : 'Hi！请登录';
        $lazy_attr   = zib_is_lazy('lazy_other', true) ? 'class="lazyload fit-cover" src="' . zib_get_lazy_thumb() . '" data-' : 'class="fit-cover"';
        $cover       = $instance['class'] ? '<div class="user-cover graphic" style="padding-bottom: 50%;"><img ' . $lazy_attr . 'src="' . _pz('user_cover_img', ZIB_TEMPLATE_DIRECTORY_URI . '/img/user_t.jpg') . $thumbnail.'"></div>' : '';
        $avatar      = '<span class="avatar-img avatar-lg"><img alt="默认头像" class="fit-cover avatar" src="' . zib_default_avatar() . '"></span>';
        $html        = '<div class="user-card zib-widget widget">' . $cover . '

登录状态

位置

/wp-content/themes/zibll/inc/functions/zib-theme.php

搜索作者封面图

源代码

function get_user_cover_img($user_id)
{
    $url = get_user_cover_img_url($user_id);
    $cover_lazy_attr = zib_get_lazy_attr('lazy_cover', $url, 'fit-cover user-cover user-cover-id-' . $user_id, ZIB_TEMPLATE_DIRECTORY_URI . '/img/thumbnail-lg.svg');
    $img             = '<img ' . $cover_lazy_attr . ' alt="用户封面">';
    return $img;
}

修改版

$thumbnail写自己OSS设置的图片处理规则

但是这里修改的是全局，意思就是你用户中心的封面图也是使用了规则，会导致图片显示模糊。

修改/wp-content/themes/zibll/inc/functions/user文件夹下的page.php

感谢您的访问，Ctrl+D收藏本站吧。