子比主题美化 用户封面缩放优化

Jaysun

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

image-302.webp.jpg

image-303.webp.jpg

说明

首先本功能基于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;
}

修改版

隐藏内容
评论可见
前往评论


您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
验证码
评论列表 (暂无评论,362人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码