WP 4.7.3 with Types, Genesis Sample Theme, ACF and a few very well-known plugins, nothing special or non-standard.
I know how to display custom fields from an Advanced Custom Fields Repeater Field on a page or template properly. In my case, for every post, I have entered one of three possible image Custom Fields. So, to retrieve that one image size, that would be something like:
$count = get_post_meta( get_the_ID(), 'items', true );
if ( $count ) {
for ( $i = 0; $i < $count; $i++ ) {
$item_100x100 = get_post_meta( get_the_ID(), 'items_' . $i . '_item_100x100', true );
$item_200x200 = get_post_meta( get_the_ID(), 'items_' . $i . '_item_200x200', true );
$item_300x300 = get_post_meta( get_the_ID(), 'items_' . $i . '_item_300x300', true );
if ( $item_100x100 ) {
echo '<p class="overview">' . wp_get_attachment_image( $item_100x100, 'items' ) . '</p>';
} elseif ( $item_200x200 ) {
echo '<p class="overview">' . wp_get_attachment_image( $item_200x200, 'items' ) . '</p>';
} elseif ( $item_300x300 ) {
echo '<p class="overview">' . wp_get_attachment_image( $item_300x300, 'items' ) . '</p>';
}
}
}
I think that’s correct and it works just fine.
Then I’m working on an archive-cpt.php file which has to show several Custom Fields for every post found, including that image.
Now, if I had to show the Featured Image, I could do:
// Featured image
if ( $image = genesis_get_image( 'format=url&size=item-image' ) ) {
printf( '<a href="https://wordpress.stackexchange.com/questions/261384/%s" rel="bookmark"><img src="https://wordpress.stackexchange.com/questions/261384/%s" alt="https://wordpress.stackexchange.com/questions/261384/%s" class="alignleft" /></a>', get_permalink(), $image, the_title_attribute( 'echo=0' ) );
}
// Entry title
echo '<h2 class="entry-title" itemprop="headline"><a href="' . get_permalink() . '">'. get_the_title() .'</a></h2>';
But I’m not showing the post’s Featured Image, I’m trying to show an image-type custom field from an ACF Repeater Field.
If I do:
if ( $item_100x100 ) {
$image = wp_get_attachment_image( $item_100x100, 'items' );
} elseif ( $item_200x200 ) {
$image = wp_get_attachment_image( $item_200x200, 'items' );
} elseif ( $slope_map_300x300 ) {
$image = wp_get_attachment_image( $item_300x300, 'items' );
}
printf( '<a href="https://wordpress.stackexchange.com/questions/261384/%s" rel="bookmark"><img src="https://wordpress.stackexchange.com/questions/261384/%s" alt="https://wordpress.stackexchange.com/questions/261384/%s" class="alignleft" /></a>', get_permalink(), $image, the_title_attribute( 'echo=0' ) );
I get the image printed on the screen but followed by the string
” alt=”my-alt-text” class=”alignleft” />
next to it.
I’ve tried several other things, but I ended up with the same result or just the post’s title linked to the post and no image.
Can anybody help?
Thanks in advance.
NOTE: I’m not using ACF’s get_field(), etc. commands because a) they’re not the WP native way and b) they add database queries (a lot, dozens if you have several Repeaters or Flexible Contents). With native WP, you add only one database query for everything.
1 Answer
Ok, so here’s the right answer, with the full code for an ACF Repeater Field:
$count = get_post_meta( get_the_ID(), 'items', true );
if ( $count ) {
for ( $i = 0; $i < $count; $i++ ) {
$item_100x100 = intval( get_post_meta( get_the_ID(), 'items_' . $i . '_item_100x100', true ) );
$item_200x200 = intval( get_post_meta( get_the_ID(), 'items_' . $i . '_item_200x200', true ) );
$item_300x300 = intval( get_post_meta( get_the_ID(), 'items_' . $i . '_item_300x300', true ) );
if ( $item_100x100 ) {
$image_id = wp_get_attachment_image_src( $item_100x100, 'full' );
} elseif ( $item_200x200 ) {
$image = wp_get_attachment_image_src( $item_200x200, 'full' );
} elseif ( $item_300x300 ) {
$image = wp_get_attachment_image_src( $item_300x300, 'full' );
}
if ( $image ) {
echo '<a href="' . get_permalink() . '" rel="bookmark"><img src="' . $image[0] . '" alt="' . the_title_attribute( 'echo=0' ) . '">';
}
}
}
Or, instead the
echo
part, you can do:
printf( '<a href="https://wordpress.stackexchange.com/questions/261384/%s" rel="bookmark"><img src="https://wordpress.stackexchange.com/questions/261384/%s" alt="https://wordpress.stackexchange.com/questions/261384/%s" class="alignleft" /></a>', get_permalink(), $image[0], the_title_attribute( 'echo=0' ) );
You just have to change the ‘full’ to your desired image size.
UPDATE: As pointed out below by @bosco, wp_get_attachment_image
will return an entire HTML element. We just want the URL for the image to be able to set the src
attribute. Therefore, we’ll use wp_get_attachment_image_src
in our code. I realize I was messing with the HTML.