Keith SolomonandClaude
e221f62ef7
- styles/blocks/page-hero.css: add blue-to-teal gradient to .page-hero (matches homepage-hero). Fix image mask direction (right-to-left fade) so the image is visible on the right and fades to transparent on the left. Reposition the vector to span the full bottom of the hero at z-index 2 (above the media layer, below content). Add .page-hero__intro and .page-hero__intro-inner grid rules for the new two-column heading + body block. - views/partials/page-hero.php: drop bg-dark / bg-cover / bg-no-repeat utilities (the gradient comes from CSS now). Simplify the heading render. Load the page-intro partial inside .page-hero__content, below the heading. - views/partials/page-intro.php: rewrite as a fragment for embedding inside the hero - a two-column heading (hard-coded 'Our Work') + body grid. Returns early when the intro field is empty. - page.php: remove the page-intro partial call (it's now loaded from page-hero.php). - tests/inner-page.spec.js: switch the selector from .page-intro to .page-hero__intro. Update the order assertions to verify the intro is a descendant of the hero (not a sibling below it). Co-Authored-By: Claude <noreply@anthropic.com>
73 lines
2.1 KiB
PHP
73 lines
2.1 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' );
|
|
|
|
// 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;
|
|
}
|
|
|
|
// Default the wrapper color to the gradient when no background color is set.
|
|
// The actual gradient is applied via .page-hero in page-hero.css; this is a
|
|
// fallback for non-gradient pages.
|
|
$wrapperStyle = $bgColor ? 'background-color: ' . esc_attr( $bgColor ) . ';' : '';
|
|
?>
|
|
|
|
<div class="page-hero text-light overflow-hidden <?php echo $isDark ? 'dark' : ''; ?>" style="<?php echo esc_attr( $wrapperStyle ); ?>">
|
|
|
|
<?php if ( $heroImage ) : ?>
|
|
<div class="page-hero__media" aria-hidden="true">
|
|
<img
|
|
src="<?php echo esc_url( $heroImage['url'] ); ?>"
|
|
alt=""
|
|
loading="lazy"
|
|
role="presentation"
|
|
/>
|
|
</div>
|
|
<?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 class="page-hero__content container mx-auto py-12 lg:py-16">
|
|
<div id="breadcrumbs">
|
|
<?php Breadcrumbs::render(); ?>
|
|
</div>
|
|
|
|
<h1 class="text-light font-normal text-4xl sm:text-5xl lg:text-6xl xl:text-7xl mt-6 lg:mt-10">
|
|
<?php echo wp_kses_post( $heading ); ?>
|
|
</h1>
|
|
|
|
<?php
|
|
// Intro block — sits inside the hero as a two-column heading + body
|
|
// section below the H1. Renders only when the `intro` field is set.
|
|
get_template_part( 'views/partials/page-intro' );
|
|
?>
|
|
</div>
|
|
</div>
|