如何强制 WordPress 帖子缩略图以固定大小显示？答案

【问题标题】：How do I force the WordPress post thumbnail to display at a fixed size?如何强制 WordPress 帖子缩略图以固定大小显示？
【发布时间】：2016-07-11 17:40:07
【问题描述】：

无论如何，我都希望帖子缩略图以固定大小（大）显示。如果全尺寸图像较大，请使用大尺寸图像（不要缩小全尺寸图像）。如果全尺寸图像较小，则使用全尺寸，设置 img 元素的宽度/高度属性并让浏览器进行放大。一直在玩get_the_post_thumbnail 和条件句，但未能正确获取宽度/高度属性而不弄乱。

有人愿意分享干净的解决方案吗？

【问题讨论】：

简单地使用 CSS 来固定身高体重
没那么简单。请参阅我在 marcin.gs 答案中的评论。
检查我的答案并找到帖子“缩略图链接到大图像尺寸”将large更改为full

标签： wordpress

【解决方案1】：

重新检查您的主题支持add_theme_support('post-thumbnails');

默认 WordPress 缩略图

the_post_thumbnail( 'thumbnail' );     // Thumbnail (150 x 150 hard cropped)
the_post_thumbnail( 'medium' );        // Medium resolution (300 x 300 max height 300px)
the_post_thumbnail( 'medium_large' );  // Medium Large (added in WP 4.4) resolution (768 x 0 infinite height)
the_post_thumbnail( 'large' );         // Large resolution (1024 x 1024 max height 1024px)
the_post_thumbnail( 'full' );          // Full resolution (original size uploaded)

如果您需要特定的分辨率

the_post_thumbnail( array(500, 500) );  // 500x500 dimension

将缩略图链接到大图像尺寸您可以通过更改large来更改尺寸

if ( has_post_thumbnail() ) {
    $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
    if ( ! empty( $large_image_url[0] ) ) {
        printf( '<a href="%1$s" alt="%2$s">%3$s</a>',
            esc_url( $large_image_url[0] ),
            esc_attr( get_the_title_attribute( 'echo=0' ) ),
            get_the_post_thumbnail()
        );
    }
}

您还可以在主题的功能中创建自定义特色图片尺寸

 add_image_size( 'custom-thumb', 300, 300); //Simple widget size
 add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
 add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
 add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

以下是如何在主题的 functions.php 文件中创建自定义特色图片大小的示例。

if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
    add_image_size( 'custom-thumb', 300, 300); // 300 pixels wide 
 }

在您的 WordPress 主题中显示额外的图片尺寸

the_post_thumbnail( 'your-specified-image-size' ); //Example singlepost-thumb

【讨论】：

主要问题是在浏览器中放大。我无法获得比大图像更小的（！）的完整图像来放大并以大尺寸出现。看不出你的答案是如何解决这个问题的。
发布缩略图使用大图我已经添加了上面的代码请检查
如果完整图像小于大尺寸需求，img 标签将始终将宽度/高度设置为完整图像的（小）值。问题是 wp_get_attachment_image 中的 $hwstring，它由 get_the_post_thumbnail 调用。似乎没有干净的修复。我能想到的最好方法是调用 get_the_post_thumbnail 并替换返回的字符串中的值。

【解决方案2】：

我会尝试这个解决方案：

1) 添加到functions.php 这个：add_theme_support( 'post-thumbnails' );

2) 然后在wordpress loop 中添加：<?php echo get_the_post_thumbnail(get_the_ID(), 'full'); ?>

【讨论】：

没那么简单。假设完整图像比大图像大得多。肯定不希望它出现在图像标签的 src 属性中。将明确将该要求添加到问题中。

【解决方案3】：

这就是我想出的。这太可怕了，但我没有找到其他半体面的方法来解决wp_get_attachment_image 中的$hwstring 问题。

$image_data = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
$lw = get_option( "large_size_w");
// Scale up if full version size is smaller than large
if ($image_data[1] < intval($lw)) {
    $ratio = $lw / $image_data[1];
    $h = round($ratio * $image_data[2]);
    $thumb = get_the_post_thumbnail( null, 'full', array(title => get_the_title()));
    $thumb = preg_replace('#\s(width)="[^"]+"#', ' width="'.$lw.'"', $thumb);
    echo preg_replace('#\s(height)="[^"]+"#', ' height="'.$h.'"', $thumb);
} else {
    the_post_thumbnail('large', array(title => get_the_title() ) );
}

【讨论】：