Expression Engine Addon: Conditional TrunchHTML

Feature image

I've been working on an Expression Engine site recently where I needed to truncate some HTML to fit within a certain sized space.

I've done similar truncations tasks before, right here on the SuperGeekery home page, with Oliver Heine's handy TruncHTML. I use it in combination with my own SuperGeekery Tagstripper to selectively strip out some of the HTML tags. (On a side note, it looks like Hacksaw has now combined these functions to some extent into a single plugin.)

Unfortunately I couldn't get the existing solutions to work for what I wanted to do this time around. On the site I was working on, the designs called for different truncation lengths for the body copy area, based on how long the headline for a particular entry was. A headline that was 2 lines long needed a shorter body company excerpt than a headline that was only 1 line long.

This was problematic because if I parsed the "title" EE tag and used a little PHP to get its length to feed into the TruncHTML plugin, the "body" and it's surrounding plugin tags would already be processed.

In talking to Low at EECI 2011, he suggested writing a plug in where you pass in the title text instead of passing in a number. That made sense and I got to work. (Thanks, Low!)

Using Oliver Heine's TruncHTML as a starting point, I added in some new parameters to pass in. (I've tried reaching Oliver but have not been successful in doing so. Oliver, if you're reading about this for the first time here, my apologies.)

How does ConditionalTruncHTML work?

Let's take a look at the code that built the image at the top of this entry.

<h1><a href='/newsroom/{channel_short_name}/{url_title}' title='View: {title}'>{title}</a></h1>
<p>{exp:conditionaltrunchtml basedontext="{title}" maxlengths="50|105" charstolimits='330|250' defaultchars="330" inline="..." ending="&nbsp;<a href='/newsroom/{channel_short_name}/{url_title}' class='readmore'>read more</a><span class='active arrow'>&raquo;</span>"}{exp:tagstripper:tagsToSave tags="strong|sup"}{body}{/exp:tagstripper:tagsToSave}{/exp:conditionaltrunchtml}</p>

In line 1, I'm simply showing the 'title'. This line with either be 1 or 2 lines long based on what the author enters into the control panel.

In line 2, let's look at the inner tags first. I've got the 'body' area wrapped in my Tagstripper plugin and I'm saving the 'strong' and 'sup' tags. Nothing new here yet.

Now lets deconstruct the 'conditionaltrunchtml' tag which wraps the stripped body copy. The first parameter is 'basedontext' which I pass in the 'title'. This text is what 'maxlengths' set of values will be tested against. For the 'maxlengths' I have a series of integers separated by a pipe character, '50|105'. The plug in tests for 'maxlengths' in the order you put them in. They must be from smallest to largest. That means if if the 'title' is 50 characters or under, it passes that test and breaks out of that test loop and continues on, if it isn't under 50 character, it continues testing the 'title' length, and if 'title' in the next loop is 105 characters or less, it will break out of the test loop and move on.

The next parameter is 'maxlengths' which is also a set of integers separated by a pipe character. The order of these integers corresponds to the order in the 'maxlengths' parameter. In this example, the '50' maxlength corresonds to the '330' charactertolimit value. In other words, if the title is 50 characters or less, the length of the truncation will be set to 330. If the maxlength is 105 or less, the length of the truncation will be set to 250. You'll see that these 'maxlengths' values increases in size as the 'charstolimits' values decreases. This is because I'm trying to balance out the sizes of the 2 blocks of text.

The 'defaultchars' parameter is an integer that is used when the 'basedontext' is longer than the maximum value in the 'maxlengths' set of values. So, in this case, if the 'title' is 106 characters, the truncation will be 330 characters. The 'inline' parameter is the string used as the text that indicates the end of the truncated text. The 'ending' is a string that is tacked on to the end of your truncated text.

Everying about the actual truncation process is exactly as Oliver originally wrote it. It's an extremely handy plug in and I can take no credit for the work he's done on it. It's a great tool and he's made it available as Freeware to the Expression Engine community. This variation on his plug in is also free for you to use. I hope you find it useful.

Download your free copy of ConditionalTruncHTML

Currently, I've got it posted to GitHub. You can find ConditionalTruncHTML here. I will eventually add this to my Devotee page as well and will update this post with that URL.

Comments on this post.

I am eager to use this plug-in, but I’m having a little trouble getting it to work.  I have uploaded it to my site (third party folder) but it dosen’t show it up in my add-ons.  I was wondering if you plan on posting installation instructions. 

Thanks

By Brent on Mar 08 2012

Hi Brent,

Had the same problem - just figured out that you only have to add a folder “conditionaltrunchtml” in your third_party folder. Then put the plugin into this foldder. Done.

Cheers,
Michael

By Mascha on May 19 2012

This looks super handy! I’ve been using TruncHTML for a while and just did a search because I was looking for some more functionality than TruncHTML provides and I came across your plugin. I have a couple feature requests if you decided to update the plugin again.

First, will this work like TruncHTML without the “basing the truncation on another field” functionality. I would like to replace TruncHTML with yours if possible.

Second, How about a way to add a Prefix to the truncated text. On multiple occasions I wanted to add quotes around truncated text, but could’t.

Thanks!

By Mike on Jan 11 2013

Hi Mike,

Conditional TrunchHTML doesn’t fallback to typical TrunchHTML right now. It does what it does only. (I built it for just what I needed at the time.) There should be no conflicts with having both in your EE install though. They’re basically just different functions that are being called.

As for the “prefix” request, what prevents you from adding an opening quote character before the call to the plugin tag? I don’t think I’m understanding your situation well enough.

-John

By John Morton on Jan 11 2013

John,

Because the opening quote is outside of the paragraph tag from the content, it isn’t inline with the first line of the paragraph. I might be able to float it left or something to get it in the right spot. Just seems like it would be easier to add it inside the opening tag of the content. It’s not a big deal though, just an idea. Thanks!

By Mike Lohrman on Jan 14 2013

That makes complete sense. Are you looking to do that with my add on here or in the original TrunchHTML?

By John Morton on Jan 15 2013

I use the normal TruncHTML functionality a lot more than I would the functionality of your updated plugin. Unfortunately it doesn’t seem like the original developer updates the plugin anymore.

By Mike Lohrman on Jan 16 2013

Leave Your Comment:

name:

email:

location:

url:

your comment:

Remember my personal information

Notify me of follow-up comments?

Twitter Feed

John Morton talking on Twitter




Meanwhile on Instagram… //

My latest shot from Instagram.
Hazy night in Union Square