Need help wrapping a link around hero image banner

• ryan.robinson125

• June 18, 2020 at 6:59 am

Hi All,

I am newer to ACF but have been working on a project where we have a repeating hero background image that changes. We would like to see if it was possible to have each repeating image link to a specific external URL. For example, slide 1 would go to google.com, slide 2 would go to yahoo.com, slide 3 would go to microsoft.com, etc.
I added a field called hero_banner_url to attempt this but am at a stopping point to get it to work. Below is the code we have in place for the slider. Please let me know if you have any ideas. Thanks!!!

`<?php
$hero_banner_background_type = get_field(‘hero_banner_background_type’);
$hero_banner_background_images = get_field(‘hero_banner_background_images’);
$hero_banner_background_video_type = get_field(‘hero_banner_background_video_type’);
$hero_banner_background_video_mp4 = get_field(‘hero_banner_background_video_mp4’);
$hero_banner_background_video_webm = get_field(‘hero_banner_background_video_webm’);
$hero_banner_background_video_ogg = get_field(‘hero_banner_background_video_ogg’);
$hero_banner_background_video_poster = get_field(‘hero_banner_background_video_poster’);
$hero_banner_background_video_embed = get_field(‘hero_banner_background_video_embed’);
$hero_banner_url = get_field(‘hero_banner_url’);
$hero_banner_background_overlay = (get_field(‘hero_banner_background_overlay’)) ? ‘<div class=”section-overlay”></div>’ : ”;
$hero_banner_background_video = null;
$primary_cta_type = get_field(‘hero_banner_cta_primary_cta_type’);
$primary_cta_target = ($primary_cta_type == ‘external’) ? ‘target=”_blank”‘ : ‘target=”_self”‘;
$primary_cta_link = ($primary_cta_type == ‘external’) ? get_field(‘hero_banner_cta_primary_cta_external_link’) : get_permalink(get_field(‘hero_banner_cta_primary_cta_internal_link’));
$primary_cta_label = get_field(‘hero_banner_cta_primary_cta_label’);
if ($hero_banner_background_type == ‘video’ && $hero_banner_background_video_type == ‘file’) {
$hero_banner_background_video = ‘<video class=”background-video” poster=”‘.$hero_banner_background_video_poster.'” preload=”auto” autoplay=”true” loop=”loop” muted=”muted” volume=”0″>
<source src=”‘.$hero_banner_background_video_mp4.'” type=”video/mp4″>
<source src=”‘.$hero_banner_background_video_webm.'” type=”video/webm”>
<source src=”‘.$hero_banner_background_video_ogg.'” type=”video/ogg”>
</video>’;
} elseif ($hero_banner_background_type == ‘video’ && $hero_banner_background_video_type == ’embed’) {
if($hero_banner_background_video_embed) {
preg_match(‘/src=”(.+?)”/’, $hero_banner_background_video_embed, $matches);
$hero_banner_background_video_embed_src = $matches[1] . ‘&autoplay=1&controls=0&loop=1&disablekb=0&cc_load_policy=0&fs=0&showinfo=0&mute=1’;
$hero_banner_background_video = ‘<div class=”background-video embed-wrapper embed-wrapper–absolute”><iframe src=”‘.$hero_banner_background_video_embed_src.'” frameborder=”0″ allowfullscreen=””></iframe></div>’;
}
}
$hero_banner_title = get_field(‘hero_banner_title’);
$hero_banner_content = get_field(‘hero_banner_content’);
$hero_banner_cta = get_field(‘hero_banner_cta’);
?>
<section class=”band hero-banner band–overflow-hidden”>
<?php echo $hero_banner_background_overlay; ?>
<?php if ($hero_banner_background_video != null) { echo $hero_banner_background_video; } ?>
<?php if ($hero_banner_background_type == ‘images’) { ?>
<div data-hero-images class=”hero-banner–images”>
<?php if ($hero_banner_background_images) {
foreach ($hero_banner_background_images as $i) {
$image = $i[‘hero_banner_background_image’]; ?>
<div data-hero-image class=”hero-banner–image” style=”background-image:url(<?php echo $image; ?>)”></div>
<?php } ?>
<?php } ?>
</div>
<?php } ?>
<div class=”wrapper wrapper-default flex-wrapper–row flex-wrapper–justify-right flex-wrapper–align-stretch”>
<div class=”hero-banner–card font-color–white background-color–red”>
<div class=”hero-banner–title component-title–60 font-family–serif-heading” data-margin-bottom=”30″><?php echo $hero_banner_title; ?></div>
<div class=”hero-banner–content” data-margin-bottom=”30″><?php echo $hero_banner_content; ?></div>
<a class=”primary-cta primary-cta–white” <?php echo $primary_cta_target; ?> href=”<?php echo $primary_cta_link; ?>”><?php echo $primary_cta_label; ?></a>
</div>
</div>
</section>

• vipstephan

• July 7, 2020 at 6:52 pm

In your foreach loop you would simply retrieve the value of the URL field inside the repeater and add an anchor element, as the documentation describes in the section titled “foreach loop”, like so:

foreach ($hero_banner_background_images as $i) {
	$image = $i['hero_banner_background_image'];
	$url = $i['hero_banner_url'];
	…

Forget the $hero_banner_url = get_field('hero_banner_url'); you have there previously, outside the loop.