Home Forums Add-ons Repeater Field Need help wrapping a link around hero image banner


Need help wrapping a link around hero image banner

  • 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, slide 2 would go to, slide 3 would go to, 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!!!

    $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”>
    } 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 } ?>
    <?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>

  • 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.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.