kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(single): align slide and video cover heights with image cover

Browse Source 
The image-mode cover reserves +50px for the title/breadcrumb overlay
(calc(scale% + 50px)), but the slide cover wrapper was given a bare
inline padding-bottom by aksrt_render_slider, permanently defeating the
.cover-slide rule, and the video cover used a bare video_scale%.

- aksrt_render_slider: add scale_extra so scale mode emits
  calc(ratio% + extra); the single cover passes 50px so all three
  modes share one height formula
- drop the unreachable static slide fallback and function_exists guard
  (the helper is unconditionally loaded by inc/bootstrap.php), the
  always-true cover_url/ep_count conditions, and the dead --scale-ratio
  and inner swiper padding emitted in scale mode
- remove the dead cover CSS cluster with no producer: .single-cover-slide
  (main.css/main.min.css/cover.css), .single-cover-slider family
  (components/base.css), .single-cover-slide-wrap and .single-cover__*
  helpers (cover.css), and initSlideCovers in misc.js
- rebuild public bundles via tools/build-public-assets.mjs
- add single-cover-height-contract test covering the shared formula
  and the dead-code removals
This commit is contained in:
kate522
2026-09-05 18:22:37 +08:00
parent 05a6b6fc54
commit 4f2d17f6ee
12 changed files with 133 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files
inc/helpers/aksrt-single-render.php
+19 -31
View File
@@ -31,7 +31,7 @@ if (!function_exists('aksrt_single_render_cover')) :
?>
<div class="single-head-cover">
<div class="single-video">
<div class="graphic single-cover single-cover--video imgbox-container" style="padding-bottom:<?php echo esc_attr((string) $video_scale); ?>%;">
<div class="graphic single-cover single-cover--video imgbox-container" style="padding-bottom:calc(<?php echo esc_attr((string) $video_scale); ?>% + 50px);">
<div class="aksrt-video single-cover__player" data-aksrt-video data-src="<?php echo esc_url($ctx['cover_url']); ?>"<?php echo $poster !== '' ? ' data-poster="' . esc_url($poster) . '"' : ''; ?> style="position:absolute;inset:0;width:100%;height:100%;"></div>
</div>
<div class="single-video-footer dplayer-featured">
@@ -41,7 +41,7 @@ if (!function_exists('aksrt_single_render_cover')) :
<h1 class="article-title">
<?php
$episodes = is_array($ctx['video_episodes'] ?? null) ? $ctx['video_episodes'] : [];
if ($episodes === [] && !empty($ctx['cover_url'])) {
if ($episodes === []) {
$episodes = [['url' => (string) $ctx['cover_url'], 'title' => '']];
}
$ep_count = count($episodes);
@@ -53,8 +53,7 @@ if (!function_exists('aksrt_single_render_cover')) :
<?php echo $title_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</h1>
<?php echo $badge; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php if ($ep_count > 0) : ?>
<div class="featured-video-episode mt10">
<div class="featured-video-episode mt10">
<?php foreach ($episodes as $idx => $ep) :
$ep_url = (string) ($ep['url'] ?? '');
if ($ep_url === '') { continue; }
@@ -67,8 +66,7 @@ if (!function_exists('aksrt_single_render_cover')) :
<span class="mr6 badg badg-sm"><?php echo (int) ($idx + 1); ?></span><i class="episode-active-icon"></i><?php echo esc_html($ep_title); ?>
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
@@ -89,33 +87,23 @@ if (!function_exists('aksrt_single_render_cover')) :
. ($crumbs !== '' ? $crumbs : '')
. $badge
. '</div>';
$slider_html = '';
if (function_exists('aksrt_render_slider')) {
$slider_html = aksrt_render_slider([
'slides' => $slide_items,
'scale_height' => true,
'scale_ratio' => $img_scale / 100,
'wrapper_class' => 'mb20 single-cover-slide imgbox-container',
'slider_class' => 'single-cover single-cover--slide',
'show_nav' => true,
'show_pagination' => true,
'loop' => count($slide_items) > 1,
'autoplay' => count($slide_items) > 1,
'overlay_html' => $overlay,
]);
}
// 与单图封面同一高度公式：calc(比例% + 50px)。
$slider_html = aksrt_render_slider([
'slides' => $slide_items,
'scale_height' => true,
'scale_ratio' => $img_scale / 100,
'scale_extra' => '50px',
'wrapper_class' => 'mb20 single-cover-slide imgbox-container',
'slider_class' => 'single-cover single-cover--slide',
'show_nav' => true,
'show_pagination' => true,
'loop' => count($slide_items) > 1,
'autoplay' => count($slide_items) > 1,
'overlay_html' => $overlay,
]);
?>
<div class="single-head-cover">
<?php if ($slider_html !== '') : ?>
<?php echo $slider_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php else : ?>
<div class="graphic mb20 single-cover single-cover--slide imgbox-container" style="padding-bottom:calc(<?php echo esc_attr((string) $img_scale); ?>% + 50px);">
<?php foreach ($slides as $idx => $slide_url) : ?>
<img<?php echo aksrt_get_lazy_attr('lazy_sider', (string) $slide_url, 'fit-cover', aksrt_get_lazy_thumb('lg')); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> alt="" style="<?php echo $idx === 0 ? '' : 'display:none;'; ?>">
<?php endforeach; ?>
<?php echo $overlay; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<?php endif; ?>
<?php echo $slider_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<?php
return;
inc/helpers/aksrt-slider.php
+11 -7
View File
@@ -27,6 +27,7 @@ defined('ABSPATH') || exit;
* @type string $m_height 移动端高度 CSS 值 (默认 auto)
* @type bool $scale_height 是否使用比例高度 (默认 false)
* @type float $scale_ratio 比例值 (默认 0.45 = 45%)
* @type string $scale_extra 比例高度附加量，如 '50px'（用于封面标题预留，默认空）
* @type string $wrapper_class 额外 wrapper 类
* @type string $slider_class 额外 slider 类
* @type bool $show_nav 是否显示导航箭头 (默认 true)
@@ -61,6 +62,7 @@ function aksrt_render_slider(array $args = []): string {
'm_height' => 'auto',
'scale_height' => false,
'scale_ratio' => 0.45,
'scale_extra' => '',
'wrapper_class' => '',
'slider_class' => '',
'show_nav' => true,
@@ -91,14 +93,16 @@ function aksrt_render_slider(array $args = []): string {
// 高度样式
$height_style = '';
$scale_padding = '';
if ($args['scale_height']) {
// padding-bottom percentage for ratio box (legacy graphic cover style).
// 内层 .new-swiper 为绝对定位铺满 wrapper，高度完全由 wrapper 的 padding-bottom 决定。
$ratio_pct = max(10, min(100, (float) $args['scale_ratio'] * 100));
$height_style = sprintf(
'--pc-height:auto;--m-height:auto;--scale-ratio:%s;padding-bottom:%s%%;',
esc_attr((string) $args['scale_ratio']),
esc_attr((string) $ratio_pct)
);
$scale_padding = $ratio_pct . '%';
$scale_extra = trim((string) $args['scale_extra']);
if ($scale_extra !== '') {
$scale_padding = 'calc(' . $scale_padding . ' + ' . $scale_extra . ')';
}
} else {
$height_style = sprintf('--pc-height:%s;--m-height:%s;', esc_attr($args['pc_height']), esc_attr($args['m_height']));
}
@@ -115,8 +119,8 @@ function aksrt_render_slider(array $args = []): string {
$wrapper_class_str = implode(' ', $wrapper_classes);
// 渲染 HTML
$html = '<div class="' . esc_attr($wrapper_class_str) . '"' . ($args['scale_height'] ? ' style="position:relative;' . esc_attr(sprintf('padding-bottom:%s%%;', (string) max(10, min(100, (float) $args['scale_ratio'] * 100)))) . '"' : '') . '>';
$html .= '<div class="' . esc_attr($slider_class_str) . '" ' . implode(' ', $data_attrs) . ' style="' . esc_attr($height_style) . ($args['scale_height'] ? 'position:absolute;inset:0;width:100%;height:100%;' : '') . '">';
$html = '<div class="' . esc_attr($wrapper_class_str) . '"' . ($args['scale_height'] ? ' style="position:relative;padding-bottom:' . esc_attr($scale_padding) . ';"' : '') . '>';
$html .= '<div class="' . esc_attr($slider_class_str) . '" ' . implode(' ', $data_attrs) . ($args['scale_height'] ? ' style="position:absolute;inset:0;width:100%;height:100%;"' : ' style="' . esc_attr($height_style) . '"') . '>';
$html .= '<div class="swiper-wrapper">';
foreach ($slides as $slide) {