Advanced Custom field loop images - wordpress

I need to show the loop inside Advanced custom field. This code return only the first image.
<?php if( have_rows('colors') ): ?>
<ul>
<?php while( have_rows('colors') ): the_row(); ?>
<?php $image = wp_get_attachment_image_src(get_field('colori'), 'full'); ?>
<img src="<?php echo $image; ?>" alt="<?php echo get_the_title(get_field('colors')) ?>" />
<?php endwhile; ?>
</ul>
<?php endif; ?>

Inside a ACF Repeater Field you must use get_sub_field(), not get_field(). So your code should look like this:
<?php if( have_rows('colors') ): ?>
<ul>
<?php while( have_rows('colors') ): the_row(); ?>
<?php $image = wp_get_attachment_image_src(get_sub_field('colori'), 'full'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo get_the_title(get_sub_field('colors')) ?>" />
<?php endwhile; ?>
</ul>
<?php endif; ?>
It is possible that it returns false values again because I don't know how you named your ACF (repeater) sub fields.
The sub field 'colori' must be an ACF image field that outputs an ID. Not an array or something else.
wp_get_attachment_image_src() returns an array. [0] => url , [1] => width, [2] => height
Read the doc for a repeater field here.

Related

Wordpress post object getting page title rather than object title

I have an ACF repeater, which repeats post objects. I am changing the postdata to the post object rather than the page so that i can get the title and thumbnail image. This works perfectly for the first one, however the subsequent objects pull the correct thumbnail but the title is pulled from the page title.
Heres the code:
<?php if( have_rows('service_repeater') ): ?>
<?php while ( have_rows('service_repeater') ) : the_row(); ?>
<?php $post_object = get_sub_field('service'); ?>
<?php if( $post_object ): ?>
<?php $post = $post_object; ?>
<?php setup_postdata( $post ); ?>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<a href="<?php the_permalink(); ?>" class="service">
<div class="background" style="background-image: url('<?php echo $url; ?>');"></div>
<div class="content">
<h3><?php the_title(); ?></h3>
<p><?php the_field('read_more_text'); ?></p>
</div>
</a>
<?php unset($post_object, $post); ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
<?php endwhile; ?>
Any help would be greatly appreciated!
Ok, so i removed the <?php unset($post_object, $post); ?> and it works now. Im concerned that this will give me trouble later down the line with variables however.

ACF get sub_field of repeater FROM a parent page

I try to implant this
- Page A0 (images + texts)
-- Page A1
-- Page A1
---Page A2
In page A1 & A2, I need to retrieves galerie and texts from a group of field.
If I use a normal field, not in a goup, I achieve this... But I need to stay in a group field.
<?php
$post_ID = get_the_ID();
$parentpost_id = wp_get_post_parent_id( $post_ID );
$images_images = get_sub_field( "images", $parentpost_id ); //use parents-post field: "broschuren-download"
?>
<div class="hero__image-wrapper <?php if (count ($images_images) > 1) { echo "heroslide" ;} ?> ">
<?php if ( $images_images ) : ?>
<?php foreach ( $images_images as $images_image ): ?>
<img class="hero__image fit-cover" src="<?php echo $images_image['sizes']['large']; ?>" alt="<?php echo $images_image['alt']; ?>" />
<?php endforeach; ?>
<?php endif; ?>
</div>
The get_sub_field() function only works within a have_rows() loop that you run on the parent field. If you still want to use get_sub_field(), you would have to do something like this:
<?php
$post_ID = get_the_ID();
$parentpost_id = wp_get_post_parent_id( $post_ID );
if( have_rows('broschuren-download', $parentpost_id) ): while( have_rows('broschuren-download', $parentpost_id) ): the_row();
$images_images = get_sub_field('images');
if ( $images_images ):
?>
<div class="hero__image-wrapper <?php if (count ($images_images) > 1) { echo 'heroslide'; } ?>">
<?php foreach( $images_images as $images_image ): ?>
<img class="hero__image fit-cover" src="<?php echo $images_image['sizes']['large']; ?>" alt="<?php echo $images_image['alt']; ?>" />
<?php endforeach; ?>
</div>
<?php
endif;
endwhile; endif;
?>

Display images knowing their ID

I'm trying to use a gallery field add-on to Wordpress' ACF plugin. The add-on is Navz Photo Gallery. All it does is to give you a way to get the gallery photos' IDs. Now I want to actually display the images.
By calling the following code
<?php if ( get_field( 'field_name') ) { ?>
<img src="<?php the_field( 'field_name' ); ?>" />
<?php } ?>
all I get are the actual IDs, like this:
<img src="21,22,23">
Does anybody know how to loop thru this group of images and display them individually, not just the ID, but the actual image?
For reference, ACF has an official (paid) gallery add-on, and it displays the attached images like this:
<?php $images = get_field('gallery'); if( $images ): ?>
<?php foreach( $images as $image ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endforeach; ?>
<?php endif; ?>
Navz has helped me with this:
<?php
$images = get_field('fotos_do_projeto'); if( $images ): $images = explode(',', $images); $images = array_filter($images); if( count($images)):
?>
<ul>
<?php foreach( $images as $image ): $alt = get_the_title($image); $url = get_post_meta($image, 'field_5802bd6e39e9b_url', true); ?>
<li>
<a href="<?php echo $url; ?>" title="<?php echo $alt; ?>">
<?php echo wp_get_attachment_image($image, "thumbnail", false, ['alt' => $alt]); ?>
</a>
</li>
<?php endforeach; endif; ?>
</ul>
<?php endif; ?>
You can try this,
$attachment_id = get_field( 'field_name');
$image_attributes = wp_get_attachment_image_src( $attachment_id );
if ( $image_attributes ) : ?>
<img src="<?php echo $image_attributes[0]; ?>" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>" />
<?php endif; ?>

Slider with ACF field-type 'Image'

For a portfolio page, I have created a custom post type for each reference called “referenzen”. Since I need more than one image per reference (displayed in different ways), I have created some custom post types.
Now, on the front page, I want to display the newest references in a slider (kind of this type, exmple 4: http://www.wpcue.com/wordpress-plugins/advanced-post-slider/template-one/).
I tried to use some plugins, but there just created for regular post thumbs.
For now, I’m having the following code to display the latest 3 references.
<section class="entry-content cf" itemprop="articleBody">
<?php query_posts( array (
'post_type' => 'referenzen',
'posts_per_page' => 4 // minus 1
)); while ( have_posts() ) : the_post(); ?>
<?php
$image = get_field('bg');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
<?php endwhile; wp_reset_query(); ?>
Now I need to bring this into some slider/carousel…
Any help is much appreciated
If you need to show posts in the form of slider/carousel, please follow below steps
1. Please download bxslider.js & include it in header.php of your theme file like below -
<script src="your-theme-directory-path/js/jquery.bxslider.min.js"></script>
Make sure that field you have created to upload image is of image type with "Image Object" option.
Correct Your code as below -
'referenzen',
'posts_per_page' => 4 // minus 1
)); while ( have_posts() ) : the_post(); ?>
<?php
$image = get_field('bg');
if( !empty($image) ): ?>
<li> <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /></li>
<?php endif; ?>
<?php endwhile; wp_reset_query(); ?>
</ul>
Add below Javascript code in the footer.php
jQuery('.slider2').bxSlider({
slideWidth: 350,
minSlides: 1,
maxSlides: 1,
slideMargin: 5
});
</script>

Displaying a custom post type title within another loop

I have a Custom Post Type set up called Venues. I'm also using a plugin called Event Organiser, and I want to display the title and link to the venue within one of the Event Organiser templates.
The code is:
<?php if( $eo_event_loop->have_posts() ): ?>
<ul <?php echo $id; ?> class="<?php echo esc_attr($classes);?>" >
<?php while( $eo_event_loop->have_posts() ): $eo_event_loop->the_post(); ?>
<?php
//Generate HTML classes for this event
$eo_event_classes = eo_get_event_classes();
//For non-all-day events, include time format
$format = ( eo_is_all_day() ? $date_format : $date_format.' '.$time_format );
?>
<li class="<?php echo esc_attr(implode(' ',$eo_event_classes)); ?>" >
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><?php the_title(); ?></a> at VENUE NAME HERE <?php echo __('on','eventorganiser') . ' '.eo_get_the_start($format); ?>
</li>
<?php endwhile; ?>
</ul>
Where VENUE NAME HERE is, I want the title and link to my custom post type. Might be just something really simple I'm missing, but any help much appreciated.
I used Advanced Custom Fields plugin and used 'Relationship' field so that I could choose a Venue for each event. Then used this code to bring through the Venue link:
<?php $venue = get_field('location_venue'); ?>
<?php foreach( $venue as $venue ): ?>
<?php echo get_the_title( $venue->ID ); ?>
<?php endforeach; ?>
More info available here:
http://www.advancedcustomfields.com/resources/tutorials/querying-relationship-fields/

Resources