I'm using Advanced Custom Fields, and I'm having issues displaying my masthead images. I have a Repeater Field that contains one sub-row "mast-head-images" - which is just an Image field type. In my field settings, I'm pulling the image array, and using that array to grab the URL in my markup. However, I keep getting an error " Illegal string offset 'url'" the same error regarding the alt
attribute.
I used print_r
and echo
to display the value returned, and the correct image URL is being returned. However, the images don't display.
Also, another strange thing, I checked the inspector, and its trying to find 24 images... I only have 3 images I'm trying to add. Where are the other images coming from? Again, all the images don't have a src
attribute. What's even weirder, is that some of the image src
have random URLs:
<img src="" alt="" class="carousel-container__img carousel-img-0">
<img src="h" alt="h" class="carousel-container__img carousel-img-2">
<img src="1" alt="1" class="carousel-container__img carousel-img-8">
<img src="i" alt="i" class="carousel-container__img carousel-img-12">
<img src="2" alt="2" class="carousel-container__img carousel-img-14">
I've made sure that I'm up-to-date and using the latest version of AFC. I don't know if I should change my PHP version? (currently 7.2.1 - I tried reverting back to an older version, but nothing changed.)
I've also deactivated other plugins to test that its not a conflict of plugins - but still nothing.
I've actually hard coded the URLs to rule out anything with the path, and it works perfectly. - my images display. I just need to get it working with AFC, instead.
<header>
<?php ?>
<?php
$defaults = array (
'theme_location' => 'main-navigation',
'menu_class' => 'no-bullet',
'container' => false
); ?>
<nav class="main-header-nav">
<img src="<?php echo get_template_directory_uri();?>/icons/Hilton-logo.svg" alt="Hilton Logo" class="header-logo">
<?php wp_nav_menu($defaults); ?>
</nav>
<?php
$topMastHeader = get_field('top_header');
$bottomMastHeader = get_field('bottom_header');
?>
<h3 class="header-text tagline">
<?php echo $topMastHeader; ?>
</h3>
<h1 class="header-text">
<?php echo $bottomMastHeader; ?>
</h1>
<div class="cycle-slideshow carousel-container" data-cycle-fx="scrollHorz" data-cycle-timeout="0" data-cycle-prev="#prev" data-cycle-next="#next" data-cycle-caption=".carousel-counter" data-cycle-caption-template="<span class='bigger'>{{slideNum}}/ </span> <span class='smaller'>{{slideCount}}</span>">
<div class="cycle-caption"></div>
<?php while( have_rows('header_carousel') ): the_row();
// vars
$mastHeadImages = get_sub_field('mast_head_images');
?>
<?php $i = 0;
foreach( $mastHeadImages as $image ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" class="carousel-container__img carousel-img-<?php echo $i; ?>" />
<?php $i++; endforeach; ?>
<!-- IMAGE URL HARD CODED -->
<!--
<img src="http://localhost:8888/wordpress/wp-content/uploads/2018/07/premium-king-room-1900x1060-1345x750.jpg" alt="">
<img src="http://localhost:8888/wordpress/wp-content/uploads/2018/07/woman-at-canopy-central-cafe-1900x1060-1-1345x750.jpg" alt="">
<img src="http://localhost:8888/wordpress/wp-content/uploads/2018/07/hotel-exterior-1900x1060-1-1345x750.jpg" alt="">
-->
<div class="masthead_overlay"></div>
</div>
<div class="center carousel-control-container">
<a href="#" id="prev">
<span class="icon-arrow-left"></span>
</a>
<a href="#" id="next">
<span class="icon-arrow-right"></span>
</a>
<div class="carousel-counter">
</div>
</div>
<?php endwhile; ?>
</header>