WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm making a travel site and for each page/post I want to display a google map and an image of the place referenced in the post/page

the image is kind of banner-size so I dont think that the post thumbnail would do (unless I can get the high-res image of which the thumbnail comes from)

I thought of getting the first image of the post and wrap it in a div and display it alongside the google maps iframe

so, is there any way to do this in the template? (I can always resort to cheap tricks like wrapping the image and the iframe in a special div while creating the page but I was wondering if there is any easier way that works for every first image without me having to do anything)

share|improve this question
This should answer your question. stackoverflow.com/questions/2332979/… – Jamie Nov 9 '12 at 2:43
I'll try it, thank you :-D – NorthPole Nov 9 '12 at 19:44
up vote 0 down vote accepted

You can use the featured image (or featured thumbnail) for this type of functionality. You can control which size of the image you use... it doesn't have to be the "thumbnail" size. From the codex:

get_the_post_thumbnail(get_the_ID(), 'thumbnail');     // Thumbnail
get_the_post_thumbnail(get_the_ID(), 'medium');        // Medium resolution
get_the_post_thumbnail(get_the_ID(), 'large');         // Large resolution
get_the_post_thumbnail(get_the_ID(), 'full');          // Original resolution

get_the_post_thumbnail(get_the_ID(), array(100,100) ); // Other resolutions

In your theme, this function needs to be echoed in order to display the image, so your loop might look something like this:

while have_posts(): the_post();
    <h2><?php the_title() ?></h2>
    <? echo get_the_post_thumbnail(get_the_ID(), 'large'); ?>
    <? the_excerpt();

There are other examples and more options to this function on the reference page.

---- Addendum ----

As Andy mentions below, you can also add your own custom sizes to the list of possibilities. Add a few lines of code to your functions.php file:

function my_image_sizes()
    if ( function_exists( 'add_theme_support' ) ) {
        add_theme_support( 'post-thumbnails' );  

    if ( function_exists( 'add_image_size' ) ) { 
        //300 pixels wide (and unlimited height)
        add_image_size( 'category-thumb', 300, 9999 ); 
        // Cropped to exactly 220px wide and 180 high
        add_image_size( 'homepage-thumb', 220, 180, true ); 
add_action('init', 'my_image_sizes');

Then you can use those custom image sizes in get_the_post_thumbnail(). There's a full explanation on the Codex.

share|improve this answer
@jamie above read your question as being primarily about getting the first image, I read your question as being about getting the correct size image. We're probably both right. Jamie, you should post an actual answer with your take! – guiniveretoo Nov 9 '12 at 2:53
thanks for the explanatory answer :-) – NorthPole Nov 9 '12 at 19:49

If all your banner size images are going to be the same dimensions, you can add a new image size in your functions.php (http://codex.wordpress.org/Function_Reference/add_image_size).

For example


then you can upload images and set them as featured image in your individual post, and in your single.php file display the banner by inserting:

<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'banners' ); } ?>
share|improve this answer
thanks, I'll keep it in mind – NorthPole Nov 9 '12 at 19:48

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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