Wordpress Ultimate 会员个人资料图片缩放图像

Question

我们正在使用 Ultimate Member 插件，在我们的会员目录页面上我们有个人资料图片。默认配置文件图像为 190x190，上传时保存 80x80 版本。在目录页面上，它正在拉入 190x190 图像，将其重新压缩为 80x80。我希望能够提取存在的 80x80 图像。我已经在模板文件中尝试过这个，但是插件已经更新了它的代码以显示个人资料图片{{{user.avatar}}}在我能够将 设置$avatar_size为 80 之前。在不更改 UM 的文件以添加过滤器或挂钩以获取 80x80 图像的情况下有什么想法吗？

Answer 1

如果您指的是下面第二张用户卡中的加菲猫图片，templates/members.php默认使用模板渲染（请参阅members-grid.php终极会员模板结构）：

然后，如果您还不知道，该部分正在使用 WordPress 脚本/JS 模板，即wp.template()（签um_build_template()入assets/js/um-members.js）并且最终会员使用 AJAX 检索（用户和其他）数据：

处理 AJAX 请求的类Member_Directory在includes/core/class-member-directory.php其中使用get_avatar()和（全局）Profile Photo Size 设置。

因此，如果您想更改默认尺寸的个人资料照片尺寸190px x 190px：

简单的方法，无需编码

只需将个人资料照片大小设置（参见wp-admin » Ultimate Member → 设置 → 外观 → 个人资料 → 个人资料照片大小）更改为80x80px：

通过编码，使用钩子

在该类中Member_Directory，有一个过滤器挂钩，您可以使用它轻松更改个人资料照片 URL，使其指向 size80px而不是默认值190px。

所以这是一个使用挂钩覆盖个人资料照片 URL 的工作示例：

// In your theme functions file.

add_filter( 'um_ajax_get_members_data', function ( $data_array, $user_id ) {

    $data_array['avatar'] = get_avatar( $user_id, 80 );

    /* Or use a custom data key:

    $data_array['avatar_80'] = get_avatar( $user_id, 80 );

    // Then in the template file, use:

    // {user.avatar_80 || user.avatar}

    */

    return $data_array;

}, 10, 2 );

补充笔记

正如@Shoelaced所提到的，“ 80x80在 Retina 显示器上会显得模糊”，因此最好只使用190x190并使用 CSS 将其缩放到80x80. 例如：

.um-directory .um-members-wrapper .um-members.um-members-grid .um-member.with-cover .um-member-photo a img {

    width: 80px;

    height: 80px;

}

事实上，默认缩放比例（in assets/css/um-members.css）是90x90（10px比你想要的要大..）。

所以我希望这个答案有帮助？

我已经尝试并测试了上述所有代码在 WordPress 5.4.2 和 Ultimate Member 2.1.6（撰写本文时的最新版本）上的预期效果。