Skip to content

Instantly share code, notes, and snippets.

@deviationist
Last active April 30, 2020 12:06
Show Gist options
  • Save deviationist/97589e0a28d21ca42fd1f9b03a88c267 to your computer and use it in GitHub Desktop.
Save deviationist/97589e0a28d21ca42fd1f9b03a88c267 to your computer and use it in GitHub Desktop.
A page template to debug the image sizes on WordPress. It will display images in the media library in all sizes with additional dimension and ratio information.
<?php
/**
* Template Name: Image test
*
* Requires PHP version 7 >=.
*
* Available GET parameters:
*
* ?posts_per_page=5
* ?order=ASC
* ?attachment_ids=5,6,7,8,9,10
* ?display_with_template=true
*/
/**
* Get all image sizes in WordPress (native and additional ones).
*
* @return array
*/
function image_size_test_get_all_image_sizes() {
global $_wp_additional_image_sizes;
$default_image_sizes = get_intermediate_image_sizes();
$image_sizes = [];
foreach ( $default_image_sizes as $size ) {
$image_sizes[ $size ][ 'width' ] = intval( get_option( "{$size}_size_w" ) );
$image_sizes[ $size ][ 'height' ] = intval( get_option( "{$size}_size_h" ) );
$image_sizes[ $size ][ 'crop' ] = get_option( "{$size}_crop" ) ? get_option( "{$size}_crop" ) : false;
}
if ( isset( $_wp_additional_image_sizes ) && count( $_wp_additional_image_sizes ) ) {
$image_sizes = array_merge( $image_sizes, $_wp_additional_image_sizes );
}
return $image_sizes;
}
$display_with_template = filter_var($_GET['display_with_template'] ?? false, FILTER_VALIDATE_BOOLEAN);
$valid_order_by = ['DESC', 'ASC'];
$order = $_GET['order'] ?? false;
$order = $order ? mb_strtoupper($order) : $order;
$order = ( $order && in_array($order, $valid_order_by) ) ? $order : 'DESC';
$attachment_ids = (string) ( $_GET['attachment_ids'] ?? '' );
if ( empty($attachment_ids) ) {
$args = [
'post_type' => 'attachment',
'post_status' => 'any',
'post_mime_type' => 'image',
'order' => $order,
'posts_per_page' => (int) ( $_GET['posts_per_page'] ?? 10 ),
'fields' => 'ids',
];
$query = new WP_Query($args);
$attachment_ids = $query->get_posts();
} else {
$attachment_ids = array_filter(array_map(function($attachment_id) {
return (int) trim($attachment_id);
}, explode(',', $attachment_ids)), function($attachment_id) {
return is_numeric($attachment_id) && $attachment_id > 0 && get_post_type($attachment_id) == 'attachment';
});
}
if ( $display_with_template ) get_header();
?>
<h1>Image </h1>
<p>Available GET parameters:</p>
<ul>
<li>?posts_per_page=5</li>
<li>?order=ASC</li>
<li>?attachment_ids=5,6,7,8,9,10</li>
<li>?display_with_template=true</li>
</ul>
<style type="text/css">
table, th, td {
border: 1px solid black;
}
</style>
<p>Does some of your cropped image have wrong proportions? The image dimensions are probably too small. You then have two options - upload a bigger image and/or implement image upscaling (not ideal, but it gives you correct proportions).</p>
<p>An example on how to implement image upscale for images that are too small for image cropping: <a href="https://alx.media/code/2013/10/thumbnail-upscale-correct-crop-in-wordpress/" target="_blank">https://alx.media/code/2013/10/thumbnail-upscale-correct-crop-in-wordpress/</a>.</p>
<?php foreach( $attachment_ids as $attachment_id ) : ?>
<table>
<tr>
<td colspan="100%"><h4 style="margin-top: 7px;margin-bottom: 7px;"><?php echo $attachment_id . ' - ' . basename ( get_attached_file( $attachment_id ) ); ?> - <a href="<?php echo wp_get_attachment_url($attachment_id); ?>" target="_blank"><?php echo wp_get_attachment_url($attachment_id); ?></a></h4></td>
</tr>
<tr>
<td>Original</td>
<?php foreach( image_size_test_get_all_image_sizes() as $size => $size_details ) : ?>
<?php $name_is_size = is_numeric(str_replace('x', '', $size)); ?>
<td><?php echo $size; ?></td>
<?php endforeach; ?>
</tr>
<tr>
<td></td>
<?php foreach( image_size_test_get_all_image_sizes() as $size => $size_details ) : ?>
<td><?php echo $size_details['crop'] ? 'Cropped' : ''; ?></td>
</td>
<?php endforeach; ?>
</tr>
<tr>
<td></td>
<?php foreach( image_size_test_get_all_image_sizes() as $size => $size_details ) : ?>
<td>Size: <?php echo $size_details['width']; ?>x<?php echo $size_details['height']; ?></td>
<?php endforeach; ?>
</tr>
<tr>
<td></td>
<?php foreach( image_size_test_get_all_image_sizes() as $size => $size_details ) : ?>
<td>Size ratio: <?php echo number_format($size_details['width'] / $size_details['height'], 2, '.', ''); ?></td>
<?php endforeach; ?>
</tr>
<tr>
<?php $image_attributes = wp_get_attachment_image_src($attachment_id, 'original'); ?>
<?php list($url, $width, $height, $is_intermediate) = $image_attributes; ?>
<td>Size: <?php echo $width; ?>x<?php echo $height; ?></td>
<?php foreach( image_size_test_get_all_image_sizes() as $size => $size_details ) : ?>
<?php $image_attributes = wp_get_attachment_image_src($attachment_id, $size); ?>
<?php list($url, $width, $height, $is_intermediate) = $image_attributes; ?>
<td>Actual size: <?php echo $width; ?>x<?php echo $height; ?></td>
<?php endforeach; ?>
</tr>
<tr>
<?php $image_attributes = wp_get_attachment_image_src($attachment_id, 'original'); ?>
<?php list($url, $width, $height, $is_intermediate) = $image_attributes; ?>
<td>Ratio <?php echo number_format($width / $height, 2, '.', ''); ?></td>
<?php foreach( image_size_test_get_all_image_sizes() as $size => $size_details ) : ?>
<?php $image_attributes = wp_get_attachment_image_src($attachment_id, $size); ?>
<?php list($url, $width, $height, $is_intermediate) = $image_attributes; ?>
<td>Actual ratio <?php echo number_format($width / $height, 2, '.', ''); ?></td>
<?php endforeach; ?>
</tr>
<tr>
<td><?php echo basename ( get_attached_file( $attachment_id ) ); ?></td>
<?php foreach( image_size_test_get_all_image_sizes() as $size => $size_details ) : ?>
<?php $image = wp_get_attachment_image_src($attachment_id, $size); ?>
<td><a href="<?php echo $image[0]; ?>" target="_blank"><?php echo basename($image[0]); ?></a></td>
<?php endforeach; ?>
</tr>
<tr>
<td>
<?php echo wp_get_attachment_image($attachment_id, 'original'); ?>
</td>
<?php foreach( image_size_test_get_all_image_sizes() as $size => $size_details ) : ?>
<td><?php echo wp_get_attachment_image($attachment_id, $size); ?></td>
<?php endforeach; ?>
</tr>
<tr>
<td></td>
<?php foreach( image_size_test_get_all_image_sizes() as $size => $size_details ) : ?>
<td>
<?php preg_match('/srcset="([^"]*)"/i', wp_get_attachment_image($attachment_id, $size), $array); ?>
<?php echo $array[1]; ?>
</td>
<?php endforeach; ?>
</tr>
</table>
<br><br>
<?php endforeach; ?>
<?php if ( $display_with_template ) get_footer();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment