Restructure hero: image at natural size overflowing, intro as text, no hard-coded copy
- views/partials/page-hero.php: removed the page-intro partial call. The intro is now rendered inline as a single .page-hero__intro div containing the editor-supplied intro text only (no hard-coded heading). The H1 is rendered with a dedicated .page-hero__heading class for typography control. Breadcrumbs + H1 + intro are in a single .page-hero__content container. - views/partials/page-intro.php: deleted (no longer used). - styles/blocks/page-hero.css: rewritten layout. The hero has a min-height of clamp(31rem, 38vw, 36rem). .page-hero__media is a foreground absolutely-positioned img on the right (no mask, no cover, no object-fit), with bottom: -10% so the image's bottom hangs over the bottom edge of the hero. The vector is positioned at bottom: clamp(1.5rem, 4vw, 3rem) with some spacing from the bottom edge, full-width on the left. Both elements stay above the content layer (z-index 10) and below the breadcrumb/title text. The H1 uses Quincy serif at clamp(2.5rem, 6vw, 4.5rem). The intro text is capped at 36rem to sit alongside the H1 without spanning the full hero width. - tests/inner-page.spec.js: removed the now-obsolete .page-hero__intro-heading / .page-hero__intro-text assertions (the intro is a single text block now). Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -13,6 +13,7 @@ $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 ) {
|
||||
@@ -24,23 +25,38 @@ 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.
|
||||
// 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 overflow-hidden <?php echo $isDark ? 'dark' : ''; ?>" style="<?php echo esc_attr( $wrapperStyle ); ?>">
|
||||
<div class="page-hero text-light <?php echo $isDark ? 'dark' : ''; ?>" style="<?php echo esc_attr( $wrapperStyle ); ?>">
|
||||
|
||||
<div class="page-hero__content container mx-auto">
|
||||
<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 ) : ?>
|
||||
<div class="page-hero__media" aria-hidden="true">
|
||||
<img
|
||||
src="<?php echo esc_url( $heroImage['url'] ); ?>"
|
||||
alt=""
|
||||
loading="lazy"
|
||||
role="presentation"
|
||||
/>
|
||||
</div>
|
||||
<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 ) : ?>
|
||||
@@ -53,20 +69,4 @@ $wrapperStyle = $bgColor ? 'background-color: ' . esc_attr( $bgColor ) . ';' : '
|
||||
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>
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
<?php
|
||||
/**
|
||||
* Page Intro Partial
|
||||
*
|
||||
* Renders the intro heading + body inside the page-hero.
|
||||
* Loaded by page-hero.php when the `intro` ACF field is non-empty.
|
||||
*
|
||||
* @package CWC
|
||||
*/
|
||||
|
||||
namespace CWC;
|
||||
|
||||
$intro = get_field( 'intro' );
|
||||
|
||||
if ( ! $intro ) {
|
||||
return;
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="page-hero__intro text-light">
|
||||
<div class="page-hero__intro-inner">
|
||||
<h2 class="page-hero__intro-heading text-2xl lg:text-3xl font-quincy font-normal leading-tight">
|
||||
<?php echo esc_html__( 'Our Work', 'cwc' ); ?>
|
||||
</h2>
|
||||
<p class="page-hero__intro-text text-base lg:text-lg leading-relaxed text-light/90">
|
||||
<?php echo wp_kses_post( $intro ); ?>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user