You can get the Title Banner & The image like this with these functions:
<p><?php the_field('page_banner_subtitle'); ?></p>
<div class="page-banner__bg-image" style="background-image: url(<?php $pageBannerImage = get_field('page_banner_background_image'); echo $pageBannerImage['url']; ?>)"></div>
If you add print_r($pageBannerImage);
you will see the array and then you can decide what you want to locate example this case the print_r pirints this array:
So that's how you can fetch other stuff
in this case we get url like this
$pageBannerImage = get_field('page_banner_background_image'); echo $pageBannerImage['url'];Then we can fetch the size of pic we want like this:
<?php $pageBannerImage = get_field('page_banner_background_image'); echo $pageBannerImage['sizes']['pageBanner']; ?>
Array ( [ID] => 437 [id] => 437 [title] => field [filename] => field-scaled.jpg [filesize] => 833439 [url] => https://blog.propellermind.com/wp-content/uploads/2024/03/field-scaled.jpg [link] => https://blog.propellermind.com/professor/dr-barksalot/field/ [alt] => [author] => 1 [description] => [caption] => [name] => field [status] => inherit [uploaded_to] => 372 [date] => 2024-03-06 17:42:11 [modified] => 2024-03-06 17:42:11 [menu_order] => 0 [mime_type] => image/jpeg [type] => image [subtype] => jpeg [icon] => https://blog.propellermind.com/wp-includes/images/media/default.png [width] => 2560 [height] => 1707 [sizes] => Array ( [thumbnail] => https://blog.propellermind.com/wp-content/uploads/2024/03/field-scaled.jpg [thumbnail-width] => 128 [thumbnail-height] => 85 [medium] => https://blog.propellermind.com/wp-content/uploads/2024/03/field-scaled.jpg [medium-width] => 2560 [medium-height] => 1707 [medium_large] => https://blog.propellermind.com/wp-content/uploads/2024/03/field-768x512.jpg [medium_large-width] => 768 [medium_large-height] => 512 [large] => https://blog.propellermind.com/wp-content/uploads/2024/03/field-scaled.jpg [large-width] => 2560 [large-height] => 1707 [1536x1536] => https://blog.propellermind.com/wp-content/uploads/2024/03/field-1536x1024.jpg [1536x1536-width] => 1536 [1536x1536-height] => 1024 [2048x2048] => https://blog.propellermind.com/wp-content/uploads/2024/03/field-2048x1365.jpg [2048x2048-width] => 2048 [2048x2048-height] => 1365 [professorLandscape] => https://blog.propellermind.com/wp-content/uploads/2024/03/field-400x260.jpg [professorLandscape-width] => 400 [professorLandscape-height] => 260 [professorPortrait] => https://blog.propellermind.com/wp-content/uploads/2024/03/field-480x650.jpg [professorPortrait-width] => 480 [professorPortrait-height] => 650 ) )