For a custom WP theme I am creating I am using ACF. I need to have a repeater that outputs images. I have it set to image object and using the correct code. In fact I tried it without a repeater and it works perfectly. Its only within the repeater that it fails.
<div class="row col-md-12">
<?php
// check if the repeater field has rows of data
if( have_rows('pics') ):
// loop through the rows of data
while ( have_rows('pics') ) : the_row();
// display a sub field value
?><div class="col-md-4">
<?php
$image = get_field('img');
if( !empty($image) ): ?>
<img src="<?php echo $image; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div> <?
endwhile;
else :
// no rows found
endif;
?>
</div>
What is causing the image data to not loop?
Your code looks ok, but having checked how I did it I believe you should be using get_sub_field instead of get_field
http://www.advancedcustomfields.com/resources/get_sub_field/
Your comment about using the ['url'] part of the array is also relevant. This is working for me;
$image = get_sub_field('img');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
I think this is what you have to do:
<?php
// check if the repeater field has rows of data
if( have_rows('img') ):
// loop through the rows of data
while ( have_rows('img') ) : the_row();
// display a sub field value
$image = get_sub_field('sub_img'); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endwhile;
else :
// no rows found
endif;
?>
This is assuming that you are outputting an image object and not a url in your ACF settings.
Related
I am trying to make a load more button that will load more images from my ACF Gallery using AJAX. But to do this I need to be able to use wp_query so that I can set the amount of posts per page. So is it possible to convert the following code into a wp_query?
<?php
$images = get_field('images');
if( $images ): ?>
<?php foreach( $images as $image ): ?>
<div class="col-4 p-0">
<a href="<?php echo $image['url']; ?>">
<img src="<?php echo $image['sizes']['gallery_size']; ?>" alt="<?php echo $image['alt']; ?>" />
</a>
</div>
<?php endforeach; ?>
<?php endif; ?>
Have you looked at: https://www.advancedcustomfields.com/resources/query-posts-custom-fields/
Basically you can query ACF by a meta_query using WP_Query and use WordPress's paginate_links() method to load more with your AJAX.
Hope that helps.
On this page http://www.cardiffchristmasmarket.com/visit/ i'm trying to get 4 images to display down the side - only 3 images display and when i upload the 4th to the page in WordPress it just removes it instantly. HELP!
PHP of the page below:
<div class="col span_1_of_4">
<div class="page_image">
<?php if( get_field('image_1') ): ?>
<img src="<?php the_field('image_1'); ?>" />
<?php endif; ?>
</div>
<div class="page_image">
<?php if( get_field('image_2') ): ?>
<img src="<?php the_field('image_2'); ?>" />
<?php endif; ?>
</div>
<div class="page_image">
<?php if( get_field('image_3') ): ?>
<img src="<?php the_field('image_3'); ?>" />
<?php endif; ?>
</div>
<div class="page_image">
<?php if( get_field('image_4') ): ?>
<img src="<?php the_field('image_4'); ?>" />
<?php endif; ?>
</div>
</div>
Please check the name "image_4" is match with the id in the custom field
or check the return type of the image in the custom field
Check your wordpress settings, it might be set to display three images only. It may be page settings or widgets, theme settings.
It Seams that you are using ACF (Advanced Custom Fields)
Check this URL for displaying correctly the Images : https://www.advancedcustomfields.com/resources/image/
<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
Thanks for your help guys!
The issue lay in the Custom Fields - the field name for image 4 was missing '_'
THANKS!
I am using Advanced Custom Fields to generate a slider for my site. Each of the images (attachments) also have a custom field attached to them using the 'Page Link' option, which allows me to associate a link with each image. The code below is pulling through a link, but it is the same for each image, regardless of which one is displayed in the slider (each image should have a different link)
<section class="slideshow">
<?php
$images = get_field('slideshow');
if( $images ):
?>
<?php foreach( $images as $image ): ?>
<figure>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<figcaption>
<h2><?php echo $image['caption']; ?></h2>
<h4>View Case Study</h4>
</figcaption>
</figure>
<?php endforeach; ?>
<?php endif; ?>
</section>
I have also tried making the url_link field specific to the image as below, but this doesn't pull any information.
<h4>View Case Study</h4>
Many thanks in advance.
It turns out that this isn't the best use of the 'Gallery' custom field. Instead, I've turned to using the 'Repeater' field which can have sub-fields in which I can hold image, caption and link information. Code amended as follows.
<section class="slideshow">
<?php if( have_rows('slideshow_slides') ): ?>
<?php while( have_rows('slideshow_slides') ): the_row();
// vars
$image = get_sub_field('image');
$caption = get_sub_field('caption');
$link = get_sub_field('link');
?>
<figure>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
<figcaption>
<h2><?php echo $caption; ?></h2>
<?php if( $link ): ?>
<h4>View Case Study</h4>
<?php endif; ?>
</figcaption>
</figure>
<?php endwhile; ?>
<?php endif; ?>
</section>
In an article I want to have the link of the previous article, including the title of the article and a ACF custom image.
I now how to make the link of the previous title project :
<?php
$prev_post = get_previous_post();
if (!empty( $prev_post )): ?>
<a href="<?php echo $prev_post->guid ?>">
<?php echo $prev_post->post_title ?>
</a>
<?php endif ?>
Here's my ACF code for the current image :
<?php
$image = get_field('image_cover');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
But how to do the same thing (get_previous_link) for my ACF image ?
You can use
$image = get_field('image_cover', $prev_post->ID);
This will get the custom field image_cover from the previous post using the ID supplied by the previous post object.
I am using Advanced Custom Fields plugin in Wordpress and have managed (with very limited PHP knowledge) to use their repeater fields to create an accordion.
Everything is working really well except the image field (company_logo). So long as the user selects an image for this custom field it displays fine but if they do not select an image I get some strange text instead.
Using my current code I'm trying to add in an 'if' statement so if they do not select an image it displays a default image instead. I've stride lots of variations but cannot get it to work.
Can anyone help/point me in the right direction please? Also, if theres a way I can clean this up as I seem to use a lot of
<div id="accordion">
<?php if( have_rows('exhibitor') ): ?>
<?php while( have_rows('exhibitor') ): the_row(); ?>
<h4 class="accordion-toggle"><?php the_sub_field('exhibitor_type'); ?></h4>
<div class="accordion-content">
<?php while( have_rows('table') ): the_row(); ?>
<div class="exhibitor-single">
<p class="table-field">Table <?php the_sub_field('table_no'); ?></p>
<p><?php the_sub_field('company_name'); ?></p>
<?php $image = wp_get_attachment_image_src(get_sub_field('company_logo'), 'logo'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo get_the_title(get_sub_field('company_logo')) ?>" />
<p><?php the_sub_field('company_website'); ?></p>
</div>
<?php endwhile; ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
You should be able to just wrap the image 'section' in this:
<?php
if(get_sub_field('company_logo')) :
$image = wp_get_attachment_image_src(get_sub_field('company_logo'), 'logo');
?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo get_the_title(get_sub_field('company_logo')) ?>" />
<?php
else :
?>
<!-- Your default image here -->
<img src="" alt="" />
<?php
endif; ?>