2

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="%s" rel="bookmark"><img src="%s" alt="%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="%s" rel="bookmark"><img src="%s" alt="%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.

closed as off-topic by Mark Kaplun, Dave Romsey, Howdy_McGee Apr 7 '17 at 19:50

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • Hello @Karls! In this case, I don't think it's important which plugins you're using, though I certainly admire your effort to provide as much information as possible :) . You should remove the references to plugins from your question in order to make it more direct and prevent it from being misinterpreted as off-topic. Really, only the last bit of code is relevant - I'd say just keep that and tell us what types of values the $item_100x100 and associated variables hold. – bosco Mar 27 '17 at 4:32
  • Yep, I know there's a lot of detail. But the thing is I've seen too many people giving solutions for ACF issues that end up using the plugin's proprietary commands get_field() and all that. I thought that some people looking for any similar problems would find interesting how the process is done for Repeater Fields using the WordPress native way. I did some research before posting my issue here and found people saying "you can't use WP code, you must use ACF's API" in answers chosen as the correct ones. Thanks. – Karls Mar 27 '17 at 13:47
  • @bosco I forgot to mention that the use of get_post_meta() instead of get_field() is also the way to keep our meta content (custom fields) showing up, even if we turn off or uninstall ACF or whatever custom fields plugin we have. – Karls Mar 27 '17 at 13:56
1

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="%s" rel="bookmark"><img src="%s" alt="%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.

  • To clarify, the issue was that you were using wp_get_attachment_image() (which returns an entire HTML element) instead of wp_get_attachment_image_src() (which returns a URL for the image) in order to set the src attribute. Putting a whole HTML element within another's src attribute is what was breaking your markup. You should add this information to your answer to improve upon it. – bosco Mar 27 '17 at 4:37

Not the answer you're looking for? Browse other questions tagged or ask your own question.