Files
wordpress-theme-aksrt/inc/helpers/aksrt-graphic-card.php
T
kate522 b639d57c5b feat(widgets): replicate 12 reference widgets for full Zibll parity
- rewrite schemas for posts, tab_posts, oneline_posts, hot_posts,
  term_cards, term_aggregation, media_cards, combo_info, partners,
  recent_comments, posts_toc and slider_media_combo to mirror the
  modern reference modules field by field (options, defaults,
  dependencies, min/max/step, subheadings)
- port reference renderers: hot ranking with TOP badges, category
  aggregation card, graphic cover cards, partners CSS marquee,
  combo info cards with auto band palette, recent comment list
- rename 分类与标签聚合卡片 to 分类聚合卡片 and restrict it to
  categories (no tags/topics branch in this project)
- drop topics filter fields and the topics query branch; align
  orderby value domain with supported post meta
- add searchable sortable terms admin field type and spinner unit
  suffix rendering
- unify widget pagination and lazy loading on the REST client with
  the runtime-owned ias reveal trigger; remove the legacy
  post_ajax_trigger dual path
- align section-navs TOC with the reference contract (wznav ids,
  3-heading minimum, zib-widget box)
2026-09-05 11:28:00 +08:00

267 lines
9.9 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<?php
/**
* Shared graphic / cover card (legacy 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 the legacy lazySizes contract.
* @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']);
$media = '';
if ($video_url !== '' && !(function_exists('wp_is_mobile') && wp_is_mobile())) {
if ($lazy && aksrt_is_lazy('lazy_other')) {
$poster = $img_url !== '' ? ' data-poster="' . esc_url($img_url) . '"' : '';
$media = '<video autoplay loop muted playsinline class="fit-cover lazyload" data-src="' . esc_url($video_url) . '" src=""' . $poster . '></video>';
} else {
$poster = $img_url !== '' ? ' poster="' . esc_url($img_url) . '"' : '';
$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' . aksrt_get_lazy_attr('lazy_other', $img_url, 'fit-cover') . ' alt="' . esc_attr($alt) . '">';
} else {
$media = '<img class="fit-cover" src="' . esc_url($img_url) . '" alt="' . esc_attr($alt) . '">';
}
}
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="--cover-height-scale:' . esc_attr((string) $height_scale) . '%;"'
: '';
$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 (legacy).
*
* @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' . aksrt_get_lazy_attr('lazy_avatar', $avatar_url, 'avatar', aksrt_get_lazy_thumb('sm')) . ' alt="" 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, legacy places both in dt).
$follow = function_exists('aksrt_get_user_follow')
? aksrt_get_user_follow('focus-color px12 ml10 follow flex0 but', $user_id)
: '';
$desc = function_exists('aksrt_get_user_description') ? aksrt_get_user_description($user_id) : trim((string) get_user_meta($user_id, 'description', true));
$blur = '';
if ($blur_bg) {
$blur = '<div class="abs-blur-bg blur"><img' . aksrt_get_lazy_attr('lazy_avatar', $avatar_url, '', aksrt_get_lazy_thumb('sm')) . ' alt=""></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;