在生成最大比例大小的位置添加图像大小

时间:2015-12-23 作者:Chris Montgomery

我想添加一个图像大小,在保留4:3纵横比的情况下,生成的图像将是最大的可能大小。

假设我添加了如下图像大小:

add_image_size( \'cover-image\', 2048, 1536, true );

默认情况下,如果全尺寸图像大于这些尺寸,WP将仅创建具有该尺寸的图像。

但假设我的全尺寸图像只有1000px宽。我仍然希望有一个图像裁剪到最大可能的4:3比例,在这种情况下将是1000x750。

这能做到吗?

1 个回复
最合适的回答,由SO网友:gmazzap 整理而成

我认为最好的方法是在调整图像大小之前“动态”创建图像大小。

您可以使用\'intermediate_image_sizes_advanced\' 过滤器挂钩。这允许您编辑要生成的大小,但要知道存储在阵列中的当前图像大小$metadata 作为第二个参数由筛选器传递。

首先,让我们编写一个类,返回特定比率的最大大小。

class ImageRatio {

  private $ratio;

  function __construct($ratioW = 4, $ratioH = 3) {
    $this->ratio = array($ratioW, $ratioH);
  }

  function getLargestSize($imgW, $imgH) {
    $inverse = false;
    // let\'s try to keep width and calculate new height  
    $newSize = round(($this->ratio[1] * $imgW) / $this->ratio[0]);
    if ($newSize > $imgH) {
       $inverse = true;
       // if the calculated height is bigger than actual size
       // let\'s keep current height and calculate new width
       $newSize = round(($this->ratio[0] * $imgH) / $this->ratio[1]);
    }

    return $inverse ? array( $newSize, $imgH ) : array( $imgW, $newSize );
  }

}
类的用法该类的用法非常简单:

$ratio = new ImageRatio(4, 3)

$ratio->getLargestSize(1000, 500); // return: array(667, 500)
$ratio->getLargestSize(1000, 800); // return: array(1000, 750)
此时,我们可以利用该类根据正在上载的图像动态计算新图像的大小

add_filter( \'intermediate_image_sizes_advanced\', function( $sizes, $metadata ) {

   if (! empty( $metadata[\'width\'] ) && ! empty( $metadata[\'height\'] ) ) {
      // calculate the max width and height for the ratio
      $ratio = new ImageRatio( 4, 3 );
      list($width, $height) = $ratio->getLargestSize( 
         $metadata[\'width\'],
         $metadata[\'height\']
      );
      // let\'s add our custom size
      $sizes[\'biggest-4-3\'] = array(
        \'width\'  => $width,
        \'height\' => $height,
        \'crop\'   => true
      );
   }

   return $sizes;

}, 10, 2 );
使用新尺寸

$image = wp_get_attachment_image( $attachment_id, \'biggest-4-3\' );
当然,这适用于代码到位后上载的所有图像。对于较旧的图像,您应该在使用缩略图时动态地重新生成缩略图,或者使用web上可用的插件之一批量生成缩略图。

相关推荐

Remove <p></p> after images

我对<p></p> 出现在my之后的标记<img....>. 以下是我在本地主机上查看生成的页面时显示的内容。。。<img src=\"/wp-content/themes/wunderful/assets/images/feedback-danielle.png\" alt=\"Danielle Johnson Deal Town FC Treasurer\"> <p></p> 请注意随机生成的<p>&