是否可以将 add_image_size 与 get_theme_file_uri 一起使用？

Posted 2023-03-25

【中文标题】是否可以将 add_image_size 与 get_theme_file_uri 一起使用？

【英文标题】：Is it possible to use add_image_size with get_theme_file_uri?

【发布时间】：2021-11-12 19:47:15

【问题描述】：

我创建了一个 ACF 自定义图像字段，该字段连接到我的自定义帖子类型。但是，如果没有选择图像，它将从媒体库中检索默认图像。

要显示图像，如果检查 get_field('box_image') 为空/null，则默认使用 get_theme_file_uri('/assets/images/img.jpg'); 选择图像功能。

所有图像都正确显示在下面，因为我已将 add_image_size 设置为 250x180，但是如何使默认图像（第二张）也渲染为 250x180？

这是我的代码：

<?php
  $image = get_field('box_image');
  //$size = ['sizes']['box_bg_image'];

  if (!empty($image))  ?>
    <img src="<?php echo esc_url($image['sizes']['box_bg_image']); ?>" />
  <?php  else  ?>
    <img src="<?php echo get_theme_file_uri('/assets/images/img.jpg'); ?>" />
  <?php  ?>

functions.php：

add_image_size('box_bg_image', 250, 180, array('center', 'center'));

css:

.bg-image img  opacity: 0.4; width: 100%; vertical-align: top; transition: opacity 0.35s; 

我已经尝试了这些类似的输出，但我得到了错误：

<img src="<?php echo get_theme_file_uri('/assets/images/city.jpg')['sizes']['box_bg_image']; ?>" />
<img src="<?php echo get_theme_file_uri('/assets/images/city.jpg'), $size; ?>"  />

我已经尝试在网上搜索是否可以设置 get_theme_file_uri 图像的大小，但我似乎找不到解决方案。

我应该使用不同的函数来分配大小吗？

编辑：

我想出了这个，虽然我不是 100% 这样做的正确方法。：

<img src="<?php echo wp_get_attachment_image_src(158, 'box_bg_image')[0]; ?>" />

我知道 get_theme_file_uri() 检索一个参数，而 wp_get_attachment_image_src() 可以接受多个参数，所以我认为这是选择默认图像的一种方法？

如果有人有其他建议，请告诉我。

【问题讨论】：

与get_theme_file_uri函数无关。这完全取决于您的“默认/占位符”图像的大小（即img.jpg）。尝试将您的“默认”图像上传到 wordpress“媒体库”，它会生成默认的 wordpress 图像尺寸以及您在 functions.php 中定义的任何自定义尺寸，它还会为您提供一个 url 到那个“占位符”具有不同的大小。所以，你可以使用你想要的大小而不是使用get_theme_file_uri('/assets/images/img.jpg');。 url 是这样的：http://example.com/wp-content/uploads/2021/09/img-250x180.jpg

好的。但是，我想避免像这样在 url 中硬编码width=""。这就是我最终使用wp_get_attachment_image_src(158, 'box_bg_image')[0]; 的原因，它为我提供了更多参数。

你不会的！ Wordpress 默认会生成url。然后您可以转到您的文件目录并重命名它并从您的文件中删除250x180。

好的。我明白了，就像添加 url 的常规 html 方式。使用wp_get_attachment_image_src(158, 'box_bg_image')[0]; 选项有什么问题吗？我认为使用 wordpress 功能更好。

啊，好吧，很酷。 box_bg_image 是自定义图像大小。感谢您的帮助@Ruvee

【参考方案1】：

为此目的使用object-fit 属性

这里有一些，可以refer to this for more info abut object-fit：包含：图像保持其纵横比，但调整大小以适应给定尺寸封面： strong> 图像保持其纵横比并填充给定尺寸。图像将被剪裁以适合none ：图像未调整大小scale-down ：图像被缩小到最小版本 none 或包含

【讨论】：

如何通过 add_image_size 将图像渲染为 250x180，就像我为 get_field ['sizes']['box_bg_image'] 所做的那样？

抱歉不知道php 方式认为这可能会有所帮助，因为它很好地解决了我对于不同尺寸图像的问题并修复了某些尺寸

【参考方案2】：

试试这个

<img src="<?php echo $fetch['image]"  >

【讨论】：

我确实尝试了 ，但这是硬编码。我想让默认图像获得分配的 add_image_size，而不是像那样的 css。