Products

Solutions

Learn More

Partners

Community

Blog

About

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


Tutorial: Create Teasers with Connect Razor Blade

This is a short tutorial so you can learn to leverage Razor Blade to generate short teaser text, no matter what the source is. 

Why Teaser-Texts are so Hard

So the goal is, that you can show a shortened text on a list page or similar, to indicate what is behind the link. The challenges usually are:

  1. We need a short text of a certain length. Maybe the user had entered something in the data for this (but the length could still be off) or we should auto-generate it.
  2. If the text is longer than the allowed length, it should show an ellipsis (...), otherwise not
  3. We should probably check various fields (Teaser, Body) based on a priority, to check which one to show. 
  4. If there is no teaser-text, we should auto-generate it from the body, but cut off at the right place - ideally not in the middle of the word
  5. The body is probably HTML, so it contains tags which mess up the character count, and could result mismatched tags if we cut it off
  6. HTML-text can also contain entities (things like & or umlauts like ö) which can be cut off by accident
  7. If we strip the html, there are various cases where a text could have multiple spaces or combinations of enters and spaces, resulting in bad character-count
  8. New-line characters, tabs etc. will mess up our character count

There are a few more challenges, but these are the most common.

Razor Blade to the Rescue

Razor Blade is a helper library for Razor developers. It solves many challenges like the one above - to learn more about it, read the release-blog or the documentation on Github. You can also find a tutorial app which will help you see real code. 

Note that the following examples assume you have Razor Blade installed (either as a DNN module, or because you have 2sxc 9.40+) and that your CSHTML file contains the @using Connect.Razor.Blade;

Generating Clean Text from HTML

Do this using the var teaser = Tags.Strip(teaserWithHtml) command. It will remove all the html-tags from the string, and replace them with spaces. It will then scan the resulting text and shrink all the spaces together, so multiple white-spaces incl. new-lines and tabs are reduced to a single space. Here's a short screenshot from the tutorial-app:

Tags-Strip-Example

Now repeat this for the body, and we're ready for the next step. 

Picking the right Text

Let's say you used Tags.Strip(...) to clean both the teaser and the body. Now you want to take the teaser if it has something, but you don't want to use it if it just had a space - or now has a space because the wysiwyg had an empty <p> tag, which is now reduced to a space. You also don't want to use it, if it only has an &nbsp;. So let's use var finalTeaser = Text.First(teaser, body, "no description"). This will take the teaser, if it really has something (so more than whitespaces, &nbsp; etc., otherwise it will take the body, and if that doesn't work, it will take the default text "no description".

Properly Cropping and Adding Ellipsis

Now for the cropping. We don't want to split words or html-entities (&amp;, &quot; etc.), and if the text really has more characters, we want to add an ellipsis (…) - ideally as the &hellip; (…) character, not three dots (...). This is done using Text.Ellipsis(finalTeaser). Below you'll see a screenshot where we ran Ellipsis on various lengths of tricky strings, comparing it to basic Crop and other methods:

Crop-And-Ellipsis

That's All :)

So that was it - painless, simple, and you'll save yourself so many complaints because "it didn't work again". I recommend you download the tutorial app and mess around with it to get started. 

Love from Switzerland,
Daniel


Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see github), an open source module for creating attractive content and DNN Apps.



Read more posts by Daniel Mettler

Comments

There are currently no comments, be the first to post one.

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (22)
Alec Whittington (11)
Alessandra Davies (3)
Alex Shirley (10)
Andrew Hoefling (3)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (37)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (213)
Chris Paterra (55)
Clint Patterson (105)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (172)
Daniel Valadas (33)
Dave Buckner (2)
David Poindexter (12)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (80)
Francisco Perez Andres (14)
Geoff Barlow (12)
George Alatrash (12)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Kelly Ford (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matt Rutledge (2)
Matthias Schlomann (16)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (36)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Oliver Hine (1)
Patrick Ryan (1)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Sacha Trauwaen (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Steven Fisher (1)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (3)
Tycho de Waard (4)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (173)
William Severance (5)

Content Layout

Subscribe to DNN Digest

Subscribe to DNN Digest

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.  

What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out