Wordpress post_thumbnail showing at the beginning of the page

Question

Im trying to display some post thumbnails with a plug in that i created, but when i add the code to the page, its display the thumbnails at the beginning of the page before the other things that i have. I don´t know why is that.

The plug in:

<?php
add_image_size( 'cortar', 250, 250, true ); // Hard Crop Mode
function wpb_recent_post() { 
$the_query = new WP_Query( 'showposts=1&cat=25' ); 
while ($the_query -> have_posts()) : $the_query -> the_post();
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), cortar, false, '' );?>
<img src="<?php echo $src[0];?>" />
<?php endwhile;
} 
add_shortcode('posts_recientes', 'wpb_recent_post');
?>

The content of the page:

<h3>Poesia</h3>

[three_columns]
[column1]

<h4>This is a heading</h4>
[posts_recientes]

[/column1]
[column2]

<h4>This is a heading</h4>
[posts_recientes]

[/column2]
[column3]

<h4>This is a heading</h4>
[posts_recientes]

[/column3]
[/three_columns]

The way it displays:

http://www.ixmapp.com/circulodepoesia/prueba/

it should display The headings before the thumbnails.

Any help would be really appreciated.

Answer 1

Wordpress executes the function once before the page is loaded, so the output happens at the very beggining.

Try to echo the full img-HTML-tag.

echo '<img src="'.$src[0].'" />';

Answer 2

Thanks eevaa. You are right Wordpress executes the function before the page is loaded. This is how i solved the problem.

<?php
add_image_size( 'cortar', 250, 250, true ); // Hard Crop Mode

function wpb_recent_post() { 
$the_query = new WP_Query( 'showposts=1&cat=25' ); 
while ($the_query -> have_posts()) : $the_query -> the_post();
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), cortar, false, '' );
endwhile;
wp_reset_postdata();
return('<img src=".$src[0]." />');
} 
add_shortcode('posts_recientes', 'wpb_recent_post');
?>