在wordpress中显示自定义图像尺寸

Question

在functions.php中我有，

function university_features() {
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
add_image_size('professorLandscape', 400, 260, true);
add_image_size('professorPortrait', 480, 650, true);
add_image_size('pageBanner', 1500, 350, true);
}
add_action('after_setup_theme', 'university_features');

在 single-professor.php 中，我有：

<div class="one-third">
    <?php the_post_thumbnail('professorPotrait'); ?>
 </div>

但是图像尺寸没有改变。但是，如果我设置“缩略图”的默认大小或任何其他大小，如下所示：

    <div class="one-third">
      <?php the_post_thumbnail('thumbnail'); ?>
    </div>

它有效。可能是什么问题？我正在本地主机上工作。

Answer 1

我已经检查了你的代码，看起来一切都运行良好。我认为您错过了在设置新的图像尺寸后您没有重新生成这些图像。您可以尝试上传新图片并检查；确保您上传的尺寸大于

480px X 650px

以进行检查，因为如果您上传的尺寸大于该尺寸，WordPress 将会裁剪图像。对于您已经在管理面板中上传的现有图像，您可以使用第三方插件，例如“重新生成缩略图”，我已经检查了this插件，如果您愿意，您可以尝试这个。希望它会起作用。

Answer 2

尝试在管理面板中编辑默认图像尺寸

而不是添加 post_thumbnail 自定义类。

使用默认值并在 WordPress 管理面板中编辑它们

wordpress 图像的默认值为

• 缩略图尺寸（150 x 150 像素）

• 中等尺寸（最大 300 x 300 像素）

• 大尺寸（最大1024 x 1024像素）

• 全尺寸（上传图像的原始尺寸）

根据https://enginescout.com.au/wordpress-image-sizes/

    <div class="one-third">
        <?php the_post_thumbnail('medium'); ?>
     </div>

1. 转到您的 WordPress 仪表板并登录。
2. 在“设置”菜单中选择“媒体”。在媒体设置中更改宽度和高度尺寸以满足您的需求。
3. 单击“保存更改”确认您的更改。

查看 Visual Composer 的这个示例 https://visualcomposer.com/blog/wordpress-image-sizes-guide/#changing-wordpress-default-image-sizes

另一种可能的解决方案是 您可以为帖子本身添加遮罩，以便图像本身将被锁定到遮罩的特定宽度和高度，例如 100vh 和 100vw

查看 Material Design bootstrap5 中的示例 您可以通过在主题中利用它们的样式来应用相同的内容，或者重新创建另一个类似的内容https://mdbootstrap.com/docs/standard/content-styles/masks/

代码示例

<div class="bg-image">
  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="w-100" />
  <div class="mask" style="background-color: rgba(0, 0, 0, 0.6)"></div>
</div>

Answer 3

如果您需要使用或添加新的尺寸，请在functions.php中添加一些代码来注册新的缩略图尺寸。添加新大小时要小心，这可能会增加 inode 使用量和服务器存储量。

首先启用缩略图

add_theme_support( 'post-thumbnails' );

添加注册新自定义尺寸的操作

add_action( 'after_setup_theme', 'custom_image_sizes' );

function custom_image_sizes() {
    add_image_size( 'picture-blog', 600, 420, true ); 
    add_image_size( 'slider', 500, 400, true ); 
    add_image_size( 'quotes', 65, 51, true ); 
}

请参阅本指南 https://blog.aviada.mx/tech-tips/using-custom-image-sizes-in-wordpress/