keith/Portfolio-2026
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

✨feature: Set up homepage hero
Sync TODOs with Issues / sync_todos (push) Successful in 6s
Details

Browse Source
This commit is contained in:
Keith Solomon
2026-08-18 21:21:14 -05:00
parent 2538a07028
commit d0dd9fa98a
2 changed files with 85 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
acf/group_60bfdb328901d.json
+30 -1
View File
@@ -2,6 +2,32 @@
"key": "group_60bfdb328901d",
"title": "Homepage Hero",
"fields": [
{
"key": "field_6a84d6008c2b1",
"label": "Hero Image",
"name": "hero_image",
"aria-label": "",
"type": "image",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "array",
"library": "all",
"min_width": "",
"min_height": "",
"min_size": "",
"max_width": "",
"max_height": "",
"max_size": "",
"mime_types": "",
"allow_in_bindings": 0,
"preview_size": "medium"
},
{
"key": "field_60bfdb328cfae",
"label": "Heading",
@@ -102,5 +128,8 @@
"active": true,
"description": "",
"show_in_rest": 0,
"modified": 1742332828
"display_title": "",
"allow_ai_access": false,
"ai_description": "",
"modified": 1787090455
}
views/blocks/homepage-hero/homepage-hero.php
+55 -42
View File
@@ -8,6 +8,7 @@
namespace KsPortfolio;
// Retrieve ACF fields
$imgHero = get_field( 'hero_image' );
$heading = get_field( 'heading' );
$intro = get_field( 'intro' );
$ctas = get_field( 'calls_to_action' );
@@ -17,50 +18,62 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
?>
<section <?php echo wp_kses_post( $wrapper ); ?>>
<div class="container content-wrapper">
<div class="max-w-lg sm:text-center lg:text-left lg:items-center ml-0">
<?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; ?>
<div class="container content-wrapper flex flex-col lg:flex-row items-start justify-between">
<div class="max-w-2xl sm:text-center lg:text-left lg:items-center ml-0">
<?php if ( ! empty( $heading ) ) : ?>
<h1 class="text-45px font-bold leading-tight mb-4">
<?php echo esc_html( $heading ); ?>
</h1>
<?php endif; ?>
<?php if ( ! empty( $intro ) ) : ?>
<div class="mt-3 text-base text-light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl with:max-w-full">
<?php echo wp_kses_post( $intro ); ?>
</div>
<?php endif; ?>
<?php if ( ! empty( $intro ) ) : ?>
<div class="mt-3 text-20p text-light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl with:max-w-full">
<?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-2">
<?php foreach ( $ctas as $index => $cta ) : ?>
<?php
$ctaLink = $cta['link'];
$ctaURL = $ctaLink['url'] ?? '#';
$ctaTarget = $ctaLink['target'] ?? '_self';
$ctaTitle = $ctaLink['title'] ?? '';
<?php if ( ! empty( $ctas ) ) : ?>
<div class="reset mt-4 sm:mt-6 flex flex-wrap justify-center lg:justify-start gap-2">
<?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"
element="a"
url="<?php echo esc_url( $ctaURL ); ?>"
target="<?php echo esc_attr( $ctaTarget ); ?>"
title="<?php echo esc_attr( $ctaTitle ); ?>"
<?php if ( $index === 0 ) { ?>
color="primary"
<?php } else { ?>
color="primary" variant="outline"
<?php } ?>
width="small"
></x-button>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
// Handle admin preview
if ( is_admin() && $ctaURL ) {
$ctaURL = '#';
}
?>
<x-button
btnclasses="button text-center min-w-32"
element="a"
url="<?php echo esc_url( $ctaURL ); ?>"
target="<?php echo esc_attr( $ctaTarget ); ?>"
title="<?php echo esc_attr( $ctaTitle ); ?>"
<?php if ( $index === 0 ) { ?>
color="primary"
<?php } else { ?>
color="primary" variant="outline"
<?php } ?>
width="small"
></x-button>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<div class="flex-1 max-w-2xl">
<?php if ( ! empty( $imgHero ) ) : ?>
<div class="">
<img
src="<?php echo esc_url( $imgHero['url'] ); ?>"
alt="<?php echo esc_attr( $imgHero['alt'] ); ?>"
class="w-full h-full object-cover rounded-lg shadow-lg"
/>
</div>
<?php endif; ?>
</div>
</div>
</section>