Changing Excerpt Size Dynamically

I was working on a custom Wordpress blog design for a client and, unlike most blog designs, we needed to fit the post summary (or excerpt) into a fixed area. Traditional blog designs won't break if the post excerpt exceeds a certain size, but in this case, we had to keep both the title, and the excerpt height no greater than the image as shown below.

We knew the image size, but the title and excerpt sizes were the variables here. We didn't want to cut off the title, so we had to figure out a way to check how much space the title occupied, then figure out how much space was remaining for the excerpt. If the excerpt was larger than the space remaining, we needed to trim the excerpt toward the end and add [...] to indicate the excerpt was truncated.

The following photos are of the homepage layout...each post was shown on the homepage as one of these wide, image, title, and excerpt combinations.

The first photo below shows how we wanted the excerpts to be displayed. The second shows what happens if the excerpt isn't truncated based on the title size...not good.

‍

This will require you to put your thinking cap on, so dig it out from under that pile of clothes, beer cans, or whatever it is you leave all around your house, and set it top of that little idea factory you call your head.

The Code I Used

Here's the code I used to get it done...you're welcome to copy this code, but be sure to read the rest of this post as you'll have to change a few things depending on the font family and font sizes used on your blog.

Now the explanation

First, I took the font used for post titles on the homepage and calculated (roughly) how many characters it took to fill out a full line within the space allocated. That number turned out to be about 35 characters per line.

Then I did the same for the post excerpt font. Turns out that the post excerpt font takes up 42 characters per line.

Then I figured, since every 35 characters in the title takes up one line, and 42 characters of the excerpt occupy a full line, then for every 35 characters in the post title, that was 42 more characters I'd have to truncate off the excerpt text.

You also have to consider the fact that the post title is a block level element. In other words, even if the post title only takes up half a line, the post excerpt won't begin until the following line.

How to Edit the Code for Your Blog

So, to make it work for you, you need to figure out the maximum number of excerpt characters that will fit inside your div element along with 1 line of post title. For me that was 5.

Then edit the code I gave you above as follows:

Replace the number 35 in the following line with the number of characters per line for your title:

1

if($title_len <= 35){

‍

Then skip a line and replace the number 70 in the following line with 2 x the number of characters per line for your title:

1

}elseif($title_len <= 70){

‍
Then skip another line and replace the number 105 in the following line with 3 x the number of characters per line for your title (are you seeing a pattern here?):

1

}elseif($title_len <= 105){

‍
Then skip another line and replace the number  140 in the following line with 4 x the number of characters per line for your title:

1

}elseif($title_len <= 140){

‍

Now, you may want to keep going, I repeated this 4 times because I figured I could fit one line of excerpt in with 4 lines of title at the most.

Now you need to go back and remember the total number of excerpt characters you figured would fit inside that div element. Got that number in front of you? Good. Now you'll need the number of characters per line for your excerpt font. Now subtract the number of characters per line from the total excerpt characters that could fit in the div element. Whatever that number comes to, put it in place of 188 in the following line of code from above:

$rem_len=188; //calc space remaining for excerpt

‍
Now take the number of excerpt characters per line x 2 and subtract that from the total excerpt characters that would fit inside the div. Now put it in place of 146 in the following line of code from above:

$rem_len=146;

Now take the number of excerpt characters per line x 3 and subtract that from the total excerpt characters that would fit inside the div. Now put it in place of 104 in the following line of code from above:

$rem_len=104;

And finally, take the number of excerpt characters per line x 4 and subtract that from the total excerpt characters that would fit inside the div. Now put it in place of the 62 in the following line of code from above:

$rem_len=62;

That's it. Now your excerpt should automatically resize itself depending on the length of the post title.

‍