如何只为特定的页面裁剪特定大小的图像?

时间:2013-09-26 作者:Mayeenul Islam

对我来说,add_image_size() 增加服务器空间消耗,因为除了三种常见大小(大、中、缩略图)和原始大小之外,它们还会增加上载到站点的每个图像的较新图像大小<因此,首先,I don\'t want to crop my image physically.

我正在为创建页面my blog 带有自定义WP_Query() 在3列中选择一些帖子。

我的HTML结构如下:

<div class="my-column<?php echo $class; echo $first; echo $one; ?>">
   <div class="the-top-thumbnail">
      <img src="<?php echo catch_that_image(); ?>" alt="top-post-image-soothtruth"/>
   </div>
   <h1 class="post-title"><?php the_title(); ?></h1>
</div> <!-- .my-column -->
在这里,我为3列动态加载自定义类。使用自定义函数检索帖子的第一个图像URL(code from here).

问题是:与常见的<img/> 标记贴子中的第一个图像以原始大小显示。但为了更好的设计,我需要一个裁剪版本的图像,以自定义的宽度x高度显示它们,即217px x 130px。

你知道我可以在<img/> 标签类型:

<img src="<?php echo catch_that_image(); ?>" alt="top-post-image" width="217" height="130"/>
但这行不通,我也不希望这样,因为这样会使图像的大小按不好的比例重新调整。

我想要什么

sooth truth - page design
我希望在217px x 130px中裁剪图像(而不是像上面提到的那样进行物理裁剪),以便在三列循环中加载更快,并且在帖子列表中以相同的大小和比例看起来更智能。即使图像可以是纵向的或横向的,它们也会动态裁剪图像的一部分。

1 个回复
SO网友:gmazzap

如果不想调整图像的大小,则需要show 它们的尺寸不同。

正确的方法就是您提到的方法,(img标记中的宽度和高度),如果不起作用,则仅适用于附加到img的一些css(或者可能是col div的所有子级…)因此,您还必须为图像添加css内联样式。

您所说的以错误的比例显示图像本身是不正确的,因为您可以按比例创建图像大小,例如使用固定宽度,然后使用一些css(组合max-heightoverflow:hidden 用于图像的父元素。

这就是说,这似乎是通用PHP+HTML+CSS技术的组合,等等,在这里脱离主题。

我之所以不投票关闭并回答这个问题,唯一的原因是因为通过WordPress功能,您可以获得图像大小并将其用于您的范围。

在我看来,您正在使用链接答案中的第二个函数,它只返回图像的url。

但在这个函数中,有以下几行

$img = wp_get_attachment_image_src($img);
$img = $img[0];
return $img;
请注意,您返回的是wp_get_attachment_image_src, 但另外两个值是对您有用的图像的宽度和高度。

因此,将上面的三行替换为这一行:

return wp_get_attachment_image_src($img);
在这个whay中,函数返回整个3项数组。

之后,您的标记变成:

<?php
$imgData = catch_that_image();
$src = $imgData[0];
$width = $imgData[1];
$height = $imgData[2];
$desiredWidth = 207;
$desiredHeight = 130;
// now use a custom function to get the sizes resized proportionally:
$sizes = get_proportional_sizes($width, $height, $desiredWidth, $desiredHeight); 
?>
<div class="the-top-thumbnail" style="height:<?php echo $desiredHeight; ?>;overflow:hidden;">
<?php
$format = \'<img src="%1$s" width="%2$d" height="%3$d" style="width:%2$d;height:auto;min-height:%3$d!important;" alt="top-post-image-soothtruth" />\');
printf($format, $src, $sizes[0], $sizes[1]);
?>
</div>
功能get_proportional_sizes 将是:

function get_proportional_sizes($width, $height, $dWidth, $dHeight) {
  $sizes = array();
  $ratio = $width / $height;
  $sizes[0] = $dWidth;
  $sizes[1] = round ( $sizes[0] / $ratio );
  return sizes;
}
仅当原始图像的格式比所需格式更水平时,Whis工作流才会显示非比例图像。

要解决此问题,可以使用非常水平的格式,例如207x80,或修改函数和标记以考虑此问题。

结束

相关推荐

Resize uploaded images

Possible Duplicate:Resizing all images 我有一个我建立的新闻门户,客户想要不同大小的特色图片。我已经准备好了我想要的第一个尺寸,他们已经发布了大约200多篇帖子,都准备好了这个尺寸。现在,如果我改变大小,它只会在新帖子上改变/或重新上传当前的特色图片(手工操作太多了)。我的问题是,有没有办法调整上传图像的大小?