fix(navigation): let CSS size the nav logo and drop the inline width cap
The navbar logo carried an inline `height:36px;width:auto;max-width:{logo_width}px`
while `.navbar-logo > img` already owns `height:36px;padding:0 30px`. Under
`box-sizing:border-box` that max-width capped the border box, so the 60px of
horizontal padding stayed inside it and wide logos were squeezed against a
fixed height, breaking the intrinsic aspect ratio.
- Render the nav logo with no inline sizing; CSS alone sizes it.
- Add a `$lazy` argument to jio_get_adaptive_theme_img() so the navbar can emit
the real src up front instead of a square lazyload placeholder; defaults to
'auto' so every other caller keeps the lazy_other behaviour.
- Remove the superseded logo_width plumbing: the setting (PHP + VUE schemas),
Settings::logo_width(), jio_get_site_logo_width(), the --jio-logo-width token
and the unused has_logo context key.
- Cover the contract in the header reference test.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
3ce5bfc20c
commit
8e74b60570
9 files changed
+36
-43
No files matched your search
@@ -41,14 +41,12 @@ if (!function_exists('jio_get_header_nav_context')) :
|
||||
$brand_name = $brand_name !== '' ? $brand_name : $site_name;
|
||||
$logo_url = function_exists('jio_get_site_logo_url') ? trim((string) jio_get_site_logo_url()) : '';
|
||||
$logo_dark = function_exists('jio_get_site_logo_dark_url') ? trim((string) jio_get_site_logo_dark_url()) : '';
|
||||
$logo_width = function_exists('jio_get_site_logo_width') ? jio_get_site_logo_width() : 150;
|
||||
$logo_more = $logo_width > 0
|
||||
? 'style="height:36px;width:auto;max-width:' . max(36, (int) $logo_width) . 'px"'
|
||||
: 'style="height:36px;width:auto"';
|
||||
// 尺寸由 .navbar-logo > img 统一控制(height:36px / width:auto),
|
||||
// 不叠加内联 max-width,否则 border-box 下的水平内边距会挤压图片。
|
||||
$logo_html = '';
|
||||
if ($logo_url !== '' || $logo_dark !== '') {
|
||||
$logo_html = function_exists('jio_get_adaptive_theme_img')
|
||||
? jio_get_adaptive_theme_img($logo_url, $logo_dark, $brand_name, $logo_more)
|
||||
? jio_get_adaptive_theme_img($logo_url, $logo_dark, $brand_name, '', false)
|
||||
: '';
|
||||
}
|
||||
|
||||
@@ -80,7 +78,6 @@ if (!function_exists('jio_get_header_nav_context')) :
|
||||
'scroll_down_hide' => (!isset($settings['nav_scroll_down_hide']) || !empty($settings['nav_scroll_down_hide'])) && $nav_fixed,
|
||||
'brand_name' => $brand_name,
|
||||
'logo_html' => $logo_html,
|
||||
'has_logo' => $logo_html !== '',
|
||||
'theme_positions' => is_array($theme_positions) ? $theme_positions : [],
|
||||
'can_publish' => $can_publish,
|
||||
'show_slide' => $show_slide,
|
||||
|
||||
@@ -104,35 +104,20 @@ function jio_get_site_logo_text(): string {
|
||||
}
|
||||
endif;
|
||||
|
||||
if (!function_exists('jio_get_site_logo_width')):
|
||||
/**
|
||||
* 获取导航 Logo 宽度
|
||||
*
|
||||
* @return int
|
||||
*/
|
||||
function jio_get_site_logo_width(): int {
|
||||
if (class_exists('\Jio\Settings\Settings')) {
|
||||
return \Jio\Settings\Settings::logo_width();
|
||||
}
|
||||
|
||||
$width = (int) jio_get_setting('logo_width', 150);
|
||||
return max(50, min(400, $width));
|
||||
}
|
||||
endif;
|
||||
|
||||
if (!function_exists('jio_get_adaptive_theme_img')):
|
||||
/**
|
||||
* Build a single light/dark adaptive image (legacy white-src/dark-src contract).
|
||||
*
|
||||
* theme.js syncThemeImages() swaps src via white-src / dark-src attributes.
|
||||
*
|
||||
* @param string $white_src Light mode image URL.
|
||||
* @param string $dark_src Dark mode image URL.
|
||||
* @param string $alt Alt text.
|
||||
* @param string $more Extra attributes (already escaped by caller if needed).
|
||||
* @param string $white_src Light mode image URL.
|
||||
* @param string $dark_src Dark mode image URL.
|
||||
* @param string $alt Alt text.
|
||||
* @param string $more Extra attributes (already escaped by caller if needed).
|
||||
* @param string|bool $lazy 'auto' follows lazy_other; false renders the real src up front.
|
||||
* @return string
|
||||
*/
|
||||
function jio_get_adaptive_theme_img(string $white_src = '', string $dark_src = '', string $alt = '', string $more = ''): string {
|
||||
function jio_get_adaptive_theme_img(string $white_src = '', string $dark_src = '', string $alt = '', string $more = '', $lazy = 'auto'): string {
|
||||
$white_src = trim($white_src);
|
||||
$dark_src = trim($dark_src);
|
||||
|
||||
@@ -148,6 +133,9 @@ function jio_get_adaptive_theme_img(string $white_src = '', string $dark_src = '
|
||||
if ($alt === '') {
|
||||
$alt = get_bloginfo('name');
|
||||
}
|
||||
if ($lazy === 'auto') {
|
||||
$lazy = jio_is_lazy('lazy_other');
|
||||
}
|
||||
|
||||
$is_dark = false;
|
||||
if (class_exists('\Jio\Settings\Settings') && method_exists('\Jio\Settings\Settings', 'initial_theme_mode')) {
|
||||
@@ -155,6 +143,10 @@ function jio_get_adaptive_theme_img(string $white_src = '', string $dark_src = '
|
||||
}
|
||||
$this_src = $is_dark ? $dark_src : $white_src;
|
||||
|
||||
return '<img' . jio_get_lazy_attr('lazy_other', (string) $this_src) . ' white-src="' . esc_url($white_src) . '" dark-src="' . esc_url($dark_src) . '" alt="' . esc_attr($alt) . '"' . ($more !== '' ? ' ' . $more : '') . '>';
|
||||
$src_attr = $lazy
|
||||
? jio_get_lazy_attr('lazy_other', (string) $this_src)
|
||||
: ' src="' . esc_url((string) $this_src) . '"';
|
||||
|
||||
return '<img' . $src_attr . ' white-src="' . esc_url($white_src) . '" dark-src="' . esc_url($dark_src) . '" alt="' . esc_attr($alt) . '"' . ($more !== '' ? ' ' . $more : '') . '>';
|
||||
}
|
||||
endif;
|
||||
Reference in new issue
Block a user