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)
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!