WordPress featured image size uniform height

2 Views

I am setting featured images to posts, and displaying a default image if one isn’t set. My code is here… 

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

Problem is simple. All of the images are different heights. I want them all to be uniform height so my bootstrap grid lines up evenly.

Read More

Any thoughts? Lots of examples online but none work with featured image AND default image.

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. Please Paste below code in your functions.php file

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

    Now when ever you upload any image in wordpress post it automatically resize into 510*520 (but bee care full image size must be bigger than what ratio you want)

    How to call please check Below

    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

  2. In your code, add the “unim” class like so: 

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

    To achieve uniform images on site, you can use the open source library bootstrap-spacer via NPM

    npm install uniformimages

    or you can visit the github page:

    https://github.com/chigozieorunta/uniformimages

    Here’s an example of how this works using the “unim” class (you’d require jQuery for this):

    <!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>