Last active
April 30, 2020 12:06
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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