You can do this by adding this function to your funcitons.php
file.
function my_get_image_size_links() {
/* If not viewing an image attachment page, return. */
if ( !wp_attachment_is_image( get_the_ID() ) )
return;
/* Set up an empty array for the links. */
$links = array();
/* Get the intermediate image sizes and add the full size to the array. */
$sizes = get_intermediate_image_sizes();
$sizes[] = 'full';
/* Loop through each of the image sizes. */
foreach ( $sizes as $size ) {
/* Get the image source, width, height, and whether it's intermediate. */
$image = wp_get_attachment_image_src( get_the_ID(), $size );
/* Add the link to the array if there's an image and if $is_intermediate (4th array value) is true or full size. */
if ( !empty( $image ) && ( true == $image[3] || 'full' == $size ) )
$links[] = "<li><a class="image-size-link" href="https://wordpress.stackexchange.com/questions/89979/{$image[0]}">{$image[1]} × {$image[2]}</a></li>";
}
/* Join the links in a string and return. */
return join( $links );
}
and then use this to display links in your theme.
<?php if ( wp_attachment_is_image( get_the_ID() ) ) { ?>
<div class="image-meta">
<ul>
<?php printf( __( 'Sizes: %s', 'example-textdomain' ), my_get_image_size_links() ); ?>
</ul>
</div>
<?php } ?>
This is your modified image.php file. It should work as long as you have the code above in your functions.php file
<?php get_header(); ?>
<div id="content" class="clearfix">
<div id="main" class="clearfix" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<div class="entry-meta">
<?php
$metadata = wp_get_attachment_metadata();
printf( __( 'Published <span class="entry-date"><abbr class="published" title="%1$s">%2$s</abbr></span> at <a href="https://wordpress.stackexchange.com/questions/89979/%3$s" title="Link to full-size image">%4$s × %5$s</a> in <a href="%6$s" title="Return to %7$s" rel="gallery">%7$s</a>', 'noteworthy' ),
esc_attr( get_the_time() ),
get_the_date(),
wp_get_attachment_url(),
$metadata['width'],
$metadata['height'],
get_permalink( $post->post_parent ),
get_the_title( $post->post_parent )
);
?>
<?php edit_post_link( __( 'Edit', 'noteworthy' ), '<span class="sep">|</span> <span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-meta -->
<h1 class="entry-title"><?php the_title(); ?></h1>
</header><!-- .entry-header -->
<div class="entry-content post_content">
<div class="entry-attachment">
<div class="attachment">
<?php
/**
* Grab the IDs of all the image attachments in a gallery so we can get the URL of the next adjacent image in a gallery,
* or the first image (if we're looking at the last image in a gallery), or, in a gallery of one, just the link to that image file
*/
$attachments = array_values( get_children( array( 'post_parent' => $post->post_parent, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID' ) ) );
foreach ( $attachments as $k => $attachment ) {
if ( $attachment->ID == $post->ID )
break;
}
$k++;
// If there is more than 1 attachment in a gallery
if ( count( $attachments ) > 1 ) {
if ( isset( $attachments[ $k ] ) )
// get the URL of the next image attachment
$next_attachment_url = get_attachment_link( $attachments[ $k ]->ID );
else
// or get the URL of the first image attachment
$next_attachment_url = get_attachment_link( $attachments[ 0 ]->ID );
} else {
// or, if there's only 1 image, get the URL of the image
$next_attachment_url = wp_get_attachment_url();
}
?>
<a href="<?php echo $next_attachment_url; ?>" title="<?php echo esc_attr( get_the_title() ); ?>" rel="attachment"><?php
$attachment_size = apply_filters( 'noteworthy_attachment_size', 1200 );
echo wp_get_attachment_image( $post->ID, array( $attachment_size, $attachment_size ) ); // filterable image width with, essentially, no limit for image height.
?></a>
</div><!-- .attachment -->
<!-- Attachment Image Sizes ---->
<?php if ( wp_attachment_is_image( get_the_ID() ) ) { ?>
<div class="image-meta">
<ul>
<?php printf( __( 'Sizes: %s', 'example-textdomain' ), my_get_image_size_links() ); ?>
</ul>
</div>
<?php } ?>
<?php if ( ! empty( $post->post_excerpt ) ) : ?>
<div class="entry-caption">
<?php the_excerpt(); ?>
</div>
<?php endif; ?>
</div><!-- .entry-attachment -->
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'noteworthy' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<footer class="entry-meta">
<?php if ( comments_open() && pings_open() ) : // Comments and trackbacks open ?>
<?php printf( __( '<a class="comment-link" href="#respond" title="Post a comment">Post a comment</a> or leave a trackback: <a class="trackback-link" href="%s" title="Trackback URL for your post" rel="trackback">Trackback URL</a>.', 'noteworthy' ), get_trackback_url() ); ?>
<?php elseif ( ! comments_open() && pings_open() ) : // Only trackbacks open ?>
<?php printf( __( 'Comments are closed, but you can leave a trackback: <a class="trackback-link" href="%s" title="Trackback URL for your post" rel="trackback">Trackback URL</a>.', 'noteworthy' ), get_trackback_url() ); ?>
<?php elseif ( comments_open() && ! pings_open() ) : // Only comments open ?>
<?php _e( 'Trackbacks are closed, but you can <a class="comment-link" href="#respond" title="Post a comment">post a comment</a>.', 'noteworthy' ); ?>
<?php elseif ( ! comments_open() && ! pings_open() ) : // Comments and trackbacks closed ?>
<?php _e( 'Both comments and trackbacks are currently closed.', 'noteworthy' ); ?>
<?php endif; ?>
<?php edit_post_link( __( 'Edit', 'noteworthy' ), ' <span class="edit-link">', '</span>' ); ?>
</footer><!-- .entry-meta -->
</article><!-- #post-<?php the_ID(); ?> -->
<nav id="image-navigation">
<span class="previous-image"><?php previous_image_link( false, __( 'Previous' , 'noteworthy' ) ); ?></span>
<span class="next-image"><?php next_image_link( false, __( 'Next' , 'noteworthy' ) ); ?></span>
</nav><!-- #image-navigation -->
<?php comments_template(); ?>
<?php endwhile; // end of the loop. ?>
</div>
</div>
Attachment Sizes for first image in the post.
<?php
$attachments = get_children(array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order'));
if ( ! is_array($attachments) ) continue;
$count = count($attachments);
$first_attachment = array_shift($attachments);
?>
<div class="image-meta">
<p>Sizes:</p>
<ul>
<?php
$links = array();
$sizes = get_intermediate_image_sizes();
foreach ( $sizes as $size ) {
/* Get the image source, width, height, and whether it's intermediate. */
$image = wp_get_attachment_image_src( $first_attachment->ID, $size );
$links[] = "<li><a class="image-size-link" href="https://wordpress.stackexchange.com/questions/89979/{$image[0]}">{$image[1]} × {$image[2]}</a></li>";
}
echo join( $links ); ?>
</ul>
</div>