Keith SolomonandClaude
6452f28932
- styles/blocks/page-hero.css:
- .page-hero__vector: width is now 100% (was clamp(28rem, 60vw, 56rem))
so the orange linework spans the full width of the hero. The SVG
scales proportionally (1920x489 viewBox).
- .page-hero__media: added top: clamp(2rem, 4vw, 4rem) so the image
has visible top padding inside the hero (in addition to overflowing
the bottom). Reduced right offset to clamp(0.5rem, 2vw, 2rem) so
the image sits closer to the right edge. Width is 'auto' with
max-width: clamp(20rem, 30vw, 28rem) so the image's natural aspect
ratio (490x613 portrait) is preserved.
- views/partials/page-hero.php: .page-hero__content is now 'container
mx-auto px-0!' so the breadcrumbs, H1, and intro sit flush left at
x=0, matching the logo's left edge (which is also at x=0 thanks to
the header's px-0! override on its container).
Co-Authored-By: Claude <noreply@anthropic.com>
73 lines
1.9 KiB
PHP
73 lines
1.9 KiB
PHP
<?php
|
|
/**
|
|
* Page Hero Partial
|
|
*
|
|
* @package CWC
|
|
*/
|
|
|
|
namespace CWC;
|
|
|
|
// Set variables
|
|
$bgColor = get_field( 'background_color' );
|
|
$isDark = get_field( 'is_dark' );
|
|
$heading = get_field( 'heading' );
|
|
$heroImage = get_field( 'hero_image' );
|
|
$heroVector = get_field( 'hero_vector' );
|
|
$intro = get_field( 'intro' );
|
|
|
|
// Fallback for heading
|
|
if ( ! $heading ) {
|
|
$heading = getTheTitle();
|
|
}
|
|
|
|
// Additional logic for dark mode (if needed)
|
|
if ( is_home() || is_single() || is_archive() || is_search() || is_404() ) {
|
|
$isDark = true;
|
|
}
|
|
|
|
// The wrapper color is the gradient from .page-hero in page-hero.css. The
|
|
// editor's background_color ACF field overrides the gradient with a solid color.
|
|
$wrapperStyle = $bgColor ? 'background-color: ' . esc_attr( $bgColor ) . ';' : '';
|
|
?>
|
|
|
|
<div class="page-hero text-light <?php echo $isDark ? 'dark' : ''; ?>" style="<?php echo esc_attr( $wrapperStyle ); ?>">
|
|
|
|
<div class="page-hero__content container mx-auto px-0!">
|
|
<div id="breadcrumbs">
|
|
<?php Breadcrumbs::render(); ?>
|
|
</div>
|
|
|
|
<h1 class="page-hero__heading">
|
|
<?php echo wp_kses_post( $heading ); ?>
|
|
</h1>
|
|
|
|
<?php if ( $intro ) : ?>
|
|
<div class="page-hero__intro">
|
|
<?php echo wp_kses_post( $intro ); ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<?php if ( $heroImage ) : ?>
|
|
<img
|
|
class="page-hero__media"
|
|
src="<?php echo esc_url( $heroImage['url'] ); ?>"
|
|
alt=""
|
|
loading="lazy"
|
|
aria-hidden="true"
|
|
role="presentation"
|
|
/>
|
|
<?php endif; ?>
|
|
|
|
<?php if ( $heroVector ) : ?>
|
|
<img
|
|
class="page-hero__vector"
|
|
src="<?php echo esc_url( $heroVector['url'] ); ?>"
|
|
alt=""
|
|
loading="lazy"
|
|
aria-hidden="true"
|
|
role="presentation"
|
|
/>
|
|
<?php endif; ?>
|
|
</div>
|