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)


2 Answers 2


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.

  • @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!
    – Jen
    Nov 9, 2012 at 2:53

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' ); } ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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