Wordpress 特色图片大小统一高度

Question

我正在为帖子设置特色图片，如果没有设置则显示默认图片。我的代码在这里...

 <?php if ( has_post_thumbnail() ) {
 the_post_thumbnail( 'full', array( 'class' => 'img-responsive' ) );
 } else { ?>
 <img src="default-image.jpg" class="img-responsive" />
 <?php } ?>

问题很简单。所有的图像都是不同的高度。我希望它们都具有统一的高度，以便我的 bootstrap 网格均匀排列。

有什么想法吗？网上有很多示例，但 none 使用特色图片和默认图片。

Answer 1

请将以下代码粘贴到您的 functions.php 文件中

add_image_size('image_size', 510, '520', true);//510 is width and 520 in height

现在，当你在 wordpress 中上传任何图片时 post 它会自动调整大小为 510*520（但 bee care 完整图片尺寸必须大于你想要的比例）

如何调用请查看下方

the_post_thumbnail( 'image_size', array( 'class' => 'img-responsive' ) );// image size is the parameter you pass in functions.php file you can add as many size as you want

Answer 2

在您的代码中，像这样添加 "unim" class：

the_post_thumbnail( 'full', array( 'class' => 'unim' ) );

现场图片统一，可以通过NPM使用开源库bootstrap-spacer

npm install uniformimages

或者您可以访问 github 页面：

https://github.com/chigozieorunta/uniformimages

这里有一个使用 "unim" class 的例子（你需要 jQuery）：

<!DOCTYPE html>
<html>
<head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
      <link href="uniformimages.css" rel="stylesheet" type="text/css"/>
      <script src="uniformimages.js" type="text/javascript"></script>
</head>

<body>
    <section>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-4">
                    <a href="product1.html">
                        <img src="image1.jpg" class="unim"/>
                    </a>
                </div>
                <div class="col-sm-4">
                    <a href="product2.html">
                        <img src="image2.jpg" class="unim"/>
                    </a>
                </div>
                <div class="col-sm-4">
                    <a href="product3.html">
                        <img src="image3.jpg" class="unim"/>
                    </a>
                </div>
            </div>
        </div>
    </section>
</body>

Wordpress 特色图片大小统一高度

Wordpress featured image size uniform height

wordpress

image

twitter-bootstrap

wordpress-featured-image