1

My theme, Grisaille, currently shows thumbnails in the post preview on the "home" page. How do I make it so that full size images show both on the "home" page and on the individual post?

functions.php:

<?php


if ( ! isset( $content_width ) )
    $content_width  = '590';


/**
* Add Menu Support
**/

add_theme_support('automatic-feed-links');
register_nav_menu('main', 'Main Nav');

/**
* Add editor style - recommended according to Theme-Check
**/
add_editor_style('editor-style.css');


/**
* Add custom background with custom background colour fix 
* as shown here: http://devpress.com/blog/custom-background-fix-for-theme-developers/
**/

add_custom_background( 'grisaille_custom_background_callback' );

function grisaille_custom_background_callback() {

    /* Get the background image. */
    $image = get_background_image();

    /* If there's an image, just call the normal WordPress callback. We won't do anything here. */
    if ( !empty( $image ) ) {
        _custom_background_cb();
        return;
    }

    /* Get the background color. */
    $color = get_background_color();

    /* If no background color, return. */
    if ( empty( $color ) )
        return;

    /* Use 'background' instead of 'background-color'. */
    $style = "background: #{$color};";

?>
<style type="text/css">body { <?php echo trim( $style ); ?> }</style>
<?php

}

/**
* Add custom header
**/

define('HEADER_TEXTCOLOR', '334759');
define('HEADER_IMAGE', ''); // %s is the template dir uri
define('HEADER_IMAGE_WIDTH', 960); // use width and height appropriate for your theme
define('HEADER_IMAGE_HEIGHT', 200);

// gets included in the site header

function grisaille_header_style() {

    ?><style type="text/css">
        #site-title {
            background: url(<?php header_image(); ?>) 0 0 no-repeat;
            min-height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
            margin: 20px 0;          
        }
        #site-title h1 a {
            color:#<?php header_textcolor(); ?> ;
            min-height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
        }
        #site-description {
            color:#<?php header_textcolor(); ?> ;
        }
        <?php if ( 'blank' == get_header_textcolor() ) { ?>
        #site-title h1 {
            padding: 0;
        }
        #site-title h1 a  {
            display:block;
            text-indent:-99999px;
        }
        #site-description {
            display: none;
            text-indent:-99999px;
        }

<?php } ?>
</style>
<?php
}
// gets included in the admin header
function grisaille_admin_header_style() {
    ?>
        <style type="text/css">
            @font-face {
            font-family: 'WoodenNickelBlackRegular';
    src: url('<?php echo get_template_directory_uri(); ?>/type/WOODENNI-webfont.eot?') format('eot'),
         url('<?php echo get_template_directory_uri(); ?>/type/WOODENNI-webfont.woff') format('woff'),
         url('<?php echo get_template_directory_uri(); ?>/type/WOODENNI-webfont.ttf') format('truetype'),
         url('<?php echo get_template_directory_uri(); ?>/type/WOODENNI-webfont.svg#webfontDYhQeecV') format('svg');
    font-weight: normal;
    font-style: normal;
}

        #headimg h1 {
            margin-bottom: 0;
        }
        #headimg h1 a{
            font:80px WoodenNickelBlackRegular, "Times New Roman", Times, serif;
            padding-left: 30px;
            text-transform:uppercase;
            text-decoration:none;
            width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
            height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
        }
        #desc {
            font:26px  Geneva, Verdana, sans-serif;
            padding-left: 30px;
        }
    </style><?php
}
add_custom_image_header('grisaille_header_style', 'grisaille_admin_header_style');

/**
* Change Excerpt length
**/
function grisaille_new_excerpt_length($length) {
    return 20;
}
add_filter('excerpt_length', 'grisaille_new_excerpt_length');

/**
* Change excerpt [...] to something else
**/

function grisaille_new_excerpt_more($more) {
    global $post;
    return ' ... <br /><a class="more-link" href="'. get_permalink($post->ID) . __('">keep reading</a>', 'grisaille');
}
add_filter('excerpt_more', 'grisaille_new_excerpt_more');

/**
* Thumbnail support
**/

add_theme_support( 'post-thumbnails' );  
set_post_thumbnail_size( 590, 275, true ); // 590 pixels wide by 275 pixels tall, hard crop mode
add_image_size( 'following-post-thumbnails', 590, 275, true ); // 590 pixels wide by 275 pixels tall, hard crop mode

// THIS LINKS THE THUMBNAIL TO THE POST PERMALINK
add_filter( 'post_thumbnail_html', 'grisaille_post_image_html', 10, 3 );
function grisaille_post_image_html( $html, $post_id, $post_image_id ) {

    $html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title', $post_id ) ) . '">' . $html . '</a>';

    return $html;
}

/**
* Google font API - adding Ubuntu font
**/
function grisaille_enqueue_scripts_styles() {
         wp_enqueue_style( 'Marvel', 'http://fonts.googleapis.com/css?family=Marvel');                                                 
}     
add_action('wp_enqueue_scripts', 'grisaille_enqueue_scripts_styles'); 

/**
* checks if the visitor is browsing either a page or a post and adds the 
* JavaScript required for threaded comments if they are
**/
function grisaille_queue_js(){
  if (!is_admin()){
    if ( is_singular() AND comments_open() AND (get_option('thread_comments') == 1))
      wp_enqueue_script( 'comment-reply' );
  }
}
add_action('get_header', 'grisaille_queue_js');

/**
* register_sidebar()
**/

add_action( 'widgets_init', 'grisaille_register_sidebars' );

function grisaille_register_sidebars() {

    /* Register the 'primary' sidebar. */
    register_sidebar(
        array(
            'id' => 'grisaillesidebar',
            'name' => __( 'Grisaille Sidebar', 'grisaille' ),
            'description' => __( 'Main right sidebar.', 'grisaille' ),
            'before_widget' => '<div class="sidebaritem">',
            'after_widget' => '</div>',
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>'
        )
    );

}   

/**
* Load the Theme Options Page for social media icons
*/
require_once ( get_template_directory() . '/inc/theme-options.php' );


/**
* Loads the theme's translated strings
*/

add_action('after_setup_theme', 'grisaille_language_theme_setup');
function grisaille_language_theme_setup(){
    load_theme_textdomain('grisaille', get_template_directory() . '/lang');
}   
?>

index.php:

<?php

  get_header();

  if (have_posts()): ?>

  <ol id="posts">
  <?php while (have_posts()) : the_post(); ?>

    <li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>


      <h2 class="postTitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
       <span class="comments"><?php comments_popup_link('0', '1 ', '%'); ?></span>
       <div class="clearfix"></div>
       <p class="theDate"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_time('F j, Y'); ?></a> <?php _e('by', 'grisaille'); ?> <?php the_author(); ?></p>

      <div class="post-wrap">
      <?php the_post_thumbnail('following-post-thumbnails'); ?>
      <?php the_excerpt(__('keep reading', 'grisaille')); ?></div>
      <?php wp_link_pages(
                array(  'before'           => '<p class="pages-links">' . __('Pages:', 'grisaille'),
                        'after'            => '</p>',
                        'next_or_number'   => 'number',
                        'nextpagelink'     => __('Next page', 'grisaille'),
                        'previouspagelink' => __('Previous page', 'grisaille'),
                        'pagelink'         => '%')); ?>
      <p class="postMeta"><small><?php _e('Category', 'grisaille'); ?> <?php the_category(', ') ?> | <?php _e('Tags', 'grisaille'); ?>: <?php the_tags(' '); ?></small></p>

      <hr class="noCss" />
    </li>

    <?php comments_template(); // Get wp-comments.php template ?>

    <?php endwhile; ?>

  </ol>

<?php else: ?>

  <p><?php _e('Sorry, no posts matched your criteria.', 'grisaille'); ?></p>

  <?php endif; ?>


    <div class="pagination-older"><?php next_posts_link( __('&laquo; Older Entries', 'grisaille')); ?></div>
    <div class=" pagination-newer"><?php previous_posts_link( __('Newer Entries &raquo;', 'grisaille')); ?></div> 






  <?php
  get_footer();
?>
3
  • I thought about posting over there, but the response time/quality isn't the same as it is on this particular board/site. Sorry if that bogs the system, I just really need an answer. Commented Apr 18, 2012 at 14:30
  • exact duplicate of php & wordpress - show full image instead of thumbnail?
    – Your Common Sense
    Commented Apr 18, 2012 at 14:36
  • 2
    Honestly, the response time/quality at WPSE probably isn't as good as it is at SO, for several reasons. 1) We're a newer, less-mature SE community with fewer contributors, and 2) We spend too much time wading through bad questions, while good, on-topic questions such as this one get posted on SE sites other than WPSE. Commented Apr 18, 2012 at 14:43

1 Answer 1

4

Here is the relevant code from home.php (the Blog Posts Index):

<?php 
if($grisaillePostCount == 1) { 
    the_post_thumbnail(); 
} else { 
    the_post_thumbnail('following-post-thumbnails'); 
} 
?>

Here is the relevant code from index.php:

<?php the_post_thumbnail('following-post-thumbnails'); ?>

So, the difference is the default thumbnail size, and the custom 'following-post-thumbnails' image size.

In functions.php, the Theme defines the defualt 'thumbnail' size as:

set_post_thumbnail_size( 590, 275, true ); // 590 pixels wide by 275 pixels tall, hard crop mode

...and sets the 'following-post-thumbnails' size as:

add_image_size( 'following-post-thumbnails', 250, 200, true ); // 250 pixels wide by 200 pixels tall, hard crop mode

So, to see the default 'thumbnail' image size in the default template (index.php), change this:

<?php the_post_thumbnail('following-post-thumbnails'); ?>

...to this:

<?php the_post_thumbnail(); ?>

Edit

And to display the 'full' image size, use this:

<?php the_post_thumbnail( 'full' ); ?>
2
  • Thank you! Now that everything is displaying as the same size (ie <?php the_post_thumbnail(); ?>), is there a way to display the full photo instead of the thumbnail? Commented Apr 18, 2012 at 14:37
  • Indeed there is a way to display the 'full' image, and I just answered that SO question, as well. Commented Apr 18, 2012 at 14:46

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.