Keith Solomon
14de24351e
Add hero-vector-mobile.php that renders mobile-hero-vector.svg alongside the existing desktop hero partial. The homepage-hero.css hides the desktop SVG and shows the mobile <img> below 768px while preserving every other mobile rule.
125 lines
4.4 KiB
PHP
125 lines
4.4 KiB
PHP
<?php
|
|
/**
|
|
* Block Name: Homepage Hero
|
|
*
|
|
* @package CWC
|
|
*/
|
|
|
|
namespace CWC;
|
|
|
|
// Retrieve ACF fields
|
|
$media = get_field( 'media' );
|
|
$heading = get_field( 'heading' );
|
|
$intro = get_field( 'intro' );
|
|
$ctas = get_field( 'calls_to_action' );
|
|
|
|
if ( $media === 'image' ) {
|
|
$heroImage = get_field( 'hero_image' );
|
|
|
|
if ( $heroImage ) {
|
|
$heroURL = $heroImage['url'];
|
|
}
|
|
} elseif ( $media === 'video' ) {
|
|
$heroVideo = get_field( 'hero_video' );
|
|
|
|
if ( $heroVideo ) {
|
|
$heroURL = $heroVideo;
|
|
}
|
|
}
|
|
|
|
$classes = 'homepage-hero mx-break-out relative text-light overflow-hidden';
|
|
$wrapper = blockWrapperAttributes( $classes, $is_preview );
|
|
?>
|
|
|
|
<section <?php echo wp_kses_post( $wrapper ); ?>>
|
|
<div class="container pl-0! content-wrapper relative z-30">
|
|
<div class="max-w-4xl sm:text-center lg:text-left lg:items-center ml-0 pt-52">
|
|
<?php if ( ! empty( $heading ) ) : ?>
|
|
<h1 class="text-4xl lg:text-5xl font-bold leading-tight mb-4">
|
|
<?php echo esc_html( $heading ); ?>
|
|
</h1>
|
|
<?php endif; ?>
|
|
|
|
<?php if ( ! empty( $intro ) ) : ?>
|
|
<div class="intro">
|
|
<?php echo wp_kses_post( $intro ); ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if ( ! empty( $ctas ) ) : ?>
|
|
<div class="reset mt-4 sm:mt-6 flex flex-wrap justify-center lg:justify-start gap-4">
|
|
<?php foreach ( $ctas as $index => $cta ) : ?>
|
|
<?php
|
|
$ctaLink = $cta['link'];
|
|
$ctaURL = $ctaLink['url'] ?? '#';
|
|
$ctaTarget = $ctaLink['target'] ?? '_self';
|
|
$ctaTitle = $ctaLink['title'] ?? '';
|
|
|
|
// Handle admin preview
|
|
if ( is_admin() && $ctaURL ) {
|
|
$ctaURL = '#';
|
|
}
|
|
?>
|
|
<x-button
|
|
btnclasses="button text-center min-w-32 dark"
|
|
element="a"
|
|
url="<?php echo esc_url( $ctaURL ); ?>"
|
|
target="<?php echo esc_attr( $ctaTarget ); ?>"
|
|
title="<?php echo esc_attr( $ctaTitle ); ?>"
|
|
color="primary"
|
|
<?php if ( $index !== 0 ) { ?>
|
|
variant="outline"
|
|
<?php } ?>
|
|
></x-button>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="heroVector absolute inset-0 z-10">
|
|
<div class="vector absolute bottom-8 w-full">
|
|
<?php get_template_part( 'views/partials/hero-vector' ); ?>
|
|
<?php get_template_part( 'views/partials/hero-vector-mobile' ); ?>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="homepage-hero__location" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" focusable="false">
|
|
<path d="M12 21s7-5.6 7-12a7 7 0 1 0-14 0c0 6.4 7 12 7 12Z" />
|
|
<circle cx="12" cy="9" r="2.5" />
|
|
</svg>
|
|
<span><?php echo esc_html__( 'Location / Nation Information', 'cwc' ); ?></span>
|
|
</div>
|
|
|
|
<div class="topGradient absolute inset-0 z-1"><!-- Rectangle 88 --></div>
|
|
|
|
<div class="bgVector absolute inset-0 z-1"><!-- Rectangle 83 --></div>
|
|
|
|
<div class="heroBG absolute inset-0 z-1"><!-- Rectangle 2 --></div>
|
|
|
|
<div class="heroMedia absolute inset-0 z-0">
|
|
<?php if ( ! empty( $heroURL ) ) : ?>
|
|
<?php if ( $media === 'image' ) : ?>
|
|
<img
|
|
src="<?php echo esc_url( $heroURL ); ?>"
|
|
alt="<?php echo esc_attr( $heading ); ?>"
|
|
class="w-full h-full object-cover object-center"
|
|
/>
|
|
<?php elseif ( $media === 'video' ) : ?>
|
|
<video
|
|
autoplay
|
|
loop
|
|
muted
|
|
playsinline
|
|
disablePictureInPicture
|
|
class="w-full h-full object-cover object-center"
|
|
>
|
|
<source src="<?php echo esc_url( $heroURL ); ?>" type="video/mp4">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
<?php endif; ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
</section>
|