Ask your WordPress questions! Pay money and get answers fast! (more info)

I want to show ACF image field pulling ID info WordPress

  • SOLVED

I have an ACF image field tied to blog posts. I want to pull this image field into my blog excerpt loop, but I want to pull the image data so I can specify the size. Not sure how to make that work.

The code below works but I have to set the image properties in ACF to "URL." Normally that's fine, but these are large images and I don't want to pull the full size on the posts excerpt pages. I want to pull by ID and specify the size as large.

Here's the ACF documentation if that helps: http://www.advancedcustomfields.com/resources/image/



<?php
$args = array( 'posts_per_page' => 50, 'order'=> 'post_date', 'orderby' => 'post_date', post__not_in' => $sticky );
$postslist = get_posts( $args );
foreach ( $postslist as $post ) :
setup_postdata( $post ); ?>

<div class="main-blog-summary" itemscope itemtype="http://schema.org/Blog">

<div class="main-post-image"><img src="<?php the_field('main_post_image'); ?>" alt="<?php the_title(); ?>"></div>
<div class="main-post-date">By <?php the_field('blog_author'); ?> on <span itemprop="dateCreated"><?php the_date(); ?></span></div> <div class="main-post-category"><?php the_category(); ?></div>
<div class="main-post-text">
<h2 class="main-post-title"><?php the_title(); ?></h2>
<span itemprop="blogPost"><?php the_excerpt(); ?></span>
<a href="<?php the_permalink(); ?>">Read more <span style="font-size:15px;padding:.15em 0 0 0;">>></span></a>
</div>

</div>
<?php
endforeach;
wp_reset_postdata();
?>


Answers (1)

2016-03-05

Rempty answers:

You must change the "Return Value" from Image URL to Image ID in the field settings
And change

<div class="main-post-image"><img src="<?php the_field('main_post_image'); ?>" alt="<?php the_title(); ?>"></div>

to

<div class="main-post-image">
<?php
$image = get_field('main_post_image');
$size = 'thumbnail'; // (thumbnail, medium, large, full)
if( $image ) {
echo wp_get_attachment_image( $image, $size );
}
?>
</div>


Kyler Boudreau comments:

Thanks - I tried that and it's not showing up. If I do a view source on the page, the image ID number is there for <img src="">.

Here's my exact code:



<?php
$args = array( 'posts_per_page' => 50, 'order'=> 'post_date', 'orderby' => 'post_date', 'post__not_in' => $sticky );
$postslist = get_posts( $args );
foreach ( $postslist as $post ) :
setup_postdata( $post ); ?>

<div class="main-blog-summary" itemscope itemtype="http://schema.org/Blog">


<div class="main-post-image"><a href="<?php the_permalink(); ?>">

<?php

$image = get_field('main_post_image');
$size = 'full'; // (thumbnail, medium, large, full)

if( $image ) {

echo wp_get_attachment_image( $image, $size );

}

?>

</a></div>

<div class="main-post-text">
<h2 class="main-post-title"><?php the_title(); ?></h2>
<div class="main-post-date">By <span itemprop="dateCreated"><?php the_author_firstname(); ?></span> on <span itemprop="dateCreated"><?php the_date(); ?></span></div>
<div class="main-post-excerpt" itemprop="blogPost"><?php the_field('post_intro'); ?></div>
<a href="<?php the_permalink(); ?>"><div class="post-button">Keep Reading</div></a>
</div>

</div>
<?php
endforeach;
wp_reset_postdata();
?>


Rempty comments:

I think there is cache or something similar because this echo wp_get_attachment_image show a image

But this <img src="<?php the_field('main_post_image'); ?>" alt="<?php the_title(); ?> echo an ID


Kyler Boudreau comments:

it works - thanks!