feat(widgets): shared aksrt_graphic_card + author minicard helpers

Unlock term cover cards and user-list minicards with zibll-parity
graphic (style-1..4, lazy, mask, height_scale) and author-minicard
(follow + identity chips + bio) helpers.
This commit is contained in:
2026-07-21 08:54:46 +08:00
parent 9bd719dcaf
commit 3fd02a9338
2 changed files with 277 additions and 0 deletions
+1
View File
@@ -48,6 +48,7 @@ require_once AKSRT_DIR . '/inc/helpers/aksrt-header-userbox.php';
require_once AKSRT_DIR . '/inc/helpers/aksrt-header-menu-buttons.php';
require_once AKSRT_DIR . '/inc/helpers/aksrt-runtime-win.php';
require_once AKSRT_DIR . '/inc/helpers/aksrt-identity.php';
require_once AKSRT_DIR . '/inc/helpers/aksrt-graphic-card.php';
require_once AKSRT_DIR . '/inc/helpers/aksrt-user-card.php';
require_once AKSRT_DIR . '/inc/helpers/aksrt-rewards.php';
require_once AKSRT_DIR . '/inc/helpers/menu-decoration.php';
+276
View File
@@ -0,0 +1,276 @@
<?php
/**
* Shared graphic / cover card (zibll zib_graphic_card parity).
*
* Used by term cards, cover cards, term aggregation thumbs, etc.
*
* @package AKSRT
*/
defined('ABSPATH') || exit;
if (!function_exists('aksrt_graphic_card')) :
/**
* Render a graphic cover card.
*
* @param array<string,mixed> $args {
* @type string $type style-1|style-2|style-3|style-4|''.
* @type string $class Extra classes on .graphic.
* @type string $img Image URL.
* @type string $video Optional video URL (desktop).
* @type string $alt Image alt.
* @type array{url?:string,target?:string}|string $link Link.
* @type string $text1 Primary text.
* @type string $text2 Secondary text.
* @type string $text3 Tertiary / badge text (HTML allowed for icon+count).
* @type string $more Extra absolute HTML (badge etc).
* @type bool $lazy Use aksrt-lazy data-src.
* @type int|float $height_scale Padding-bottom % (0 = default CSS).
* @type int|float $mask_opacity 0–100 overlay opacity.
* @type string $hide pc|m|'' hide on device.
* }
* @param bool $echo Echo instead of return.
*/
function aksrt_graphic_card(array $args = [], bool $echo = false): string {
$defaults = [
'type' => '',
'hide' => '',
'class' => 'mb10',
'img' => '',
'video' => '',
'alt' => __('图片', 'aksrt'),
'link' => [
'url' => '',
'target' => '',
],
'text1' => '',
'text2' => '',
'text3' => '',
'more' => '',
'lazy' => true,
'height_scale' => 0,
'mask_opacity' => 0,
];
$args = wp_parse_args($args, $defaults);
$img_url = trim((string) $args['img']);
$video_url = trim((string) $args['video']);
if ($img_url === '' && $video_url === '') {
return '';
}
// Device visibility.
$hide = sanitize_key((string) $args['hide']);
if ($hide === 'pc' || $hide === 'm') {
$is_mobile = function_exists('wp_is_mobile') ? wp_is_mobile() : false;
if ((!$is_mobile && $hide === 'pc') || ($is_mobile && $hide === 'm')) {
return '';
}
}
$type = sanitize_key((string) $args['type']);
if ($type !== '' && !in_array($type, ['style-1', 'style-2', 'style-3', 'style-4'], true)) {
// Accept bare "1"–"4".
if (preg_match('/^[1-4]$/', $type)) {
$type = 'style-' . $type;
} else {
$type = '';
}
}
$link = $args['link'];
if (is_string($link)) {
$link = ['url' => $link, 'target' => ''];
}
if (!is_array($link)) {
$link = ['url' => '', 'target' => ''];
}
$link_url = esc_url(trim((string) ($link['url'] ?? '')));
$link_target = sanitize_text_field((string) ($link['target'] ?? ''));
$lazy = !empty($args['lazy']);
$placeholder = get_template_directory_uri() . '/assets/img/placeholder.svg';
$media = '';
if ($video_url !== '' && !(function_exists('wp_is_mobile') && wp_is_mobile())) {
$poster = $img_url !== '' ? ' poster="' . esc_url($img_url) . '"' : '';
if ($lazy) {
$media = '<video autoplay loop muted playsinline class="fit-cover aksrt-lazy lazyload" data-src="' . esc_url($video_url) . '" src=""' . $poster . '></video>';
} else {
$media = '<video autoplay loop muted playsinline class="fit-cover" src="' . esc_url($video_url) . '"' . $poster . '></video>';
}
} elseif ($img_url !== '') {
$alt = (string) ($args['alt'] !== '' ? $args['alt'] : __('图片', 'aksrt'));
if ($lazy) {
$media = '<img class="fit-cover aksrt-lazy lazyload" data-src="' . esc_url($img_url) . '" src="' . esc_url($placeholder) . '" alt="' . esc_attr($alt) . '" loading="lazy" />';
} else {
$media = '<img class="fit-cover" src="' . esc_url($img_url) . '" alt="' . esc_attr($alt) . '" loading="lazy" />';
}
}
if ($media === '') {
return '';
}
$mask_opacity = max(0, min(100, (int) $args['mask_opacity']));
$mask = $mask_opacity > 0
? '<div class="absolute graphic-mask" style="opacity:' . esc_attr((string) ($mask_opacity / 100)) . '"></div>'
: '';
// text1/2/3 may contain small trusted HTML (icons); sanitize lightly.
$text1 = (string) $args['text1'];
$text2 = (string) $args['text2'];
$text3 = (string) $args['text3'];
$allow = [
'i' => ['class' => true, 'aria-hidden' => true],
'span' => ['class' => true, 'title' => true],
'item' => ['class' => true, 'data-toggle' => true, 'title' => true],
'b' => [],
'strong'=> [],
'em' => [],
'badge' => ['class' => true],
];
$text1_safe = $text1 !== '' ? wp_kses($text1, $allow) : '';
$text2_safe = $text2 !== '' ? wp_kses($text2, $allow) : '';
$text3_safe = $text3 !== '' ? wp_kses($text3, $allow) : '';
$more = (string) $args['more'];
$more_safe = $more !== '' ? wp_kses($more, array_merge($allow, [
'div' => ['class' => true, 'style' => true],
'badge' => ['class' => true],
])) : '';
$text = '';
if ($type === 'style-2') {
$text = '<div class="abs-center conter-conter graphic-text">';
$text .= $text1_safe !== '' ? '<div class="title-h-center"><b>' . $text1_safe . '</b></div>' : '';
$text .= $text2_safe !== '' ? '<div class="em09 opacity8">' . $text2_safe . '</div>' : '';
$text .= '</div>';
if ($text3_safe !== '') {
$text .= '<div class="abs-center right-top"><badge class="b-black opacity8">' . $text3_safe . '</badge></div>';
}
} elseif ($type === 'style-3') {
$text = $text1_safe !== '' ? '<div class="abs-center left-bottom graphic-text text-ellipsis">' . $text1_safe . '</div>' : '';
$text .= '<div class="abs-center left-bottom graphic-text">';
$text .= $text2_safe !== '' ? '<div class="em09 opacity8">' . $text2_safe . '</div>' : '';
$text .= $text3_safe !== '' ? '<div class="px12 opacity8 mt6">' . $text3_safe . '</div>' : '';
$text .= '</div>';
} elseif ($type === 'style-4') {
if ($text3_safe !== '') {
$text = '<div class="abs-center right-top"><badge class="b-black opacity8 mr6 mt6">' . $text3_safe . '</badge></div>';
}
} else {
// style-1 / default.
$inner = $text1_safe !== '' ? '<div class="title-h-left"><b>' . $text1_safe . '</b></div>' : '';
$inner .= $text3_safe !== '' ? '<div class="em09 opacity8">' . $text3_safe . '</div>' : '';
$inner .= $text2_safe !== '' ? '<div class="em09">' . $text2_safe . '</div>' : '';
$text = $inner !== '' ? '<div class="abs-center left-bottom graphic-text">' . $inner . '</div>' : '';
}
$text .= $more_safe;
$class = trim('graphic hover-zoom-img ' . (string) $args['class'] . ' ' . $type);
$height_scale = max(0, (int) $args['height_scale']);
$scale_attr = $height_scale > 0
? ' style="padding-bottom:' . esc_attr((string) $height_scale) . '%!important;"'
: '';
$html = '';
if ($link_url !== '') {
$tgt = $link_target !== '' ? ' target="' . esc_attr($link_target) . '" rel="noopener noreferrer"' : '';
$html .= '<a href="' . esc_url($link_url) . '"' . $tgt . '>';
}
if ($type === 'style-4') {
$html .= '<div class="main-shadow radius8 main-bg mb10">';
}
$html .= '<div class="' . esc_attr($class) . '"' . $scale_attr . '>';
$html .= $media;
$html .= $mask;
$html .= $text;
if ($type === 'style-4') {
$html .= '</div>'; // close .graphic early for style-4 body.
$html .= '<div class="padding-10">';
$html .= $text1_safe !== '' ? '<div class="text-ellipsis">' . $text1_safe . '</div>' : '';
$html .= $text2_safe !== '' ? '<div class="muted-2-color em09 text-ellipsis mt6">' . $text2_safe . '</div>' : '';
$html .= '</div></div>'; // padding + main-shadow
} else {
$html .= '</div>';
}
if ($link_url !== '') {
$html .= '</a>';
}
if ($echo) {
echo $html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
return '';
}
return $html;
}
endif;
if (!function_exists('aksrt_author_minicard')) :
/**
* Author mini card for user lists (zibll zib_author_card).
*
* @param int $user_id
* @param string $class
* @param bool $blur_bg
*/
function aksrt_author_minicard(int $user_id, string $class = '', bool $blur_bg = false): string {
if ($user_id <= 0) {
return '';
}
$user = get_userdata($user_id);
if (!$user) {
return '';
}
$avatar_url = function_exists('aksrt_get_avatar_url')
? aksrt_get_avatar_url($user_id, ['size' => 96])
: get_avatar_url($user_id, ['size' => 96]);
$home = function_exists('aksrt_get_user_home_url')
? aksrt_get_user_home_url($user_id)
: get_author_posts_url($user_id);
$avatar_box = '<div class="avatar-img"><a href="' . esc_url($home) . '"><img class="avatar" src="' . esc_url($avatar_url) . '" alt="" loading="lazy" width="42" height="42" /></a></div>';
$name = function_exists('aksrt_get_user_name')
? aksrt_get_user_name([
'id' => $user_id,
'class' => 'flex ac flex1',
'follow' => false,
'medal' => true,
'auth' => true,
'level' => true,
])
: '<a href="' . esc_url($home) . '">' . esc_html($user->display_name) . '</a>';
// Follow control (separate from name, zibll places both in dt).
$follow = '';
$current = get_current_user_id();
if ($current !== $user_id) {
if (is_user_logged_in()) {
$follow = '<button type="button" class="focus-color px12 ml10 follow flex0 but" data-aksrt-follow="' . (int) $user_id . '"><i class="fa fa-heart em09" aria-hidden="true"></i> ' . esc_html__('关注', 'aksrt') . '</button>';
} else {
$login = function_exists('aksrt_get_login_url') ? aksrt_get_login_url() : wp_login_url();
$follow = '<a class="focus-color px12 ml10 follow flex0 but" href="' . esc_url($login) . '"><i class="fa fa-heart em09" aria-hidden="true"></i> ' . esc_html__('关注', 'aksrt') . '</a>';
}
}
$desc = trim((string) get_user_meta($user_id, 'description', true));
if ($desc === '') {
$desc = __('这家伙很懒,什么都没有写…', 'aksrt');
}
$blur = '';
if ($blur_bg) {
$blur = '<div class="abs-blur-bg blur"><img src="' . esc_url($avatar_url) . '" alt="" loading="lazy" /></div>';
}
return '<div class="author-minicard radius8 relative-h ' . esc_attr($class) . '">'
. $blur
. '<ul class="list-inline relative">'
. '<li>' . $avatar_box . '</li>'
. '<li><dl>'
. '<dt class="flex ac">' . $name . $follow . '</dt>'
. '<dd class="mt6 em09 muted-color text-ellipsis">' . esc_html($desc) . '</dd>'
. '</dl></li>'
. '</ul></div>';
}
endif;