1

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

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

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

有什么想法吗？网上有很多例子，但没有一个适用于特色图片和默认图片。

4

2 回答 2

4

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

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

现在，当您在 wordpress 中上传任何图像时，它会自动调整为 510*520（但蜜蜂护理完整图像尺寸必须大于您想要的比例）

拨打方式请查看下方

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
于 2015-04-02T07:45:45.710 回答
0

在您的代码中，添加“unim”类，如下所示：

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

实现现场统一镜像，可以通过 NPM 使用开源库 bootstrap-spacer

npm install uniformimages

或者你可以访问 github 页面：

https://github.com/chigozieorunta/uniformimages

这是一个使用“unim”类如何工作的示例（为此您需要 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>

于 2019-02-09T03:43:42.940 回答