Hi Ryan

Could you please show the code where you're using this?

In order to understand your issue a bit better in the proper context it would be nice to see it.

Why do you need to truncate the text? I don't think it's the right approach if you need to make sure that the text fits inside a small box or something like that. Then I think you should consider using CSS and do something like overflow:hidden; and then give your box specific width and height. Then you can also use the text-overflow:ellipsis property.

Looking forward to hearing from you.

/Jan

Hey Jan,

 

Thanks for the quick reply. 

 

I'm trying to create a News or blog post overview. This news overview would show a list of news and display snippet of each news limiting to just 1000 characters. The idea is to just show the user a glimpse of what the topic is, and if it interest them they could read more by clicking on the read more button.  Hence, I am using the Umbraco.Truncate method to truncate the content.  Please let me know if this is the right approach.

 

Below is my short simple source code that I mocked up.

 

Thanks

 

Ryan

 

 

UmbracoTemplatePage

@{

    // Model.Content is the current page that we're on

    // AncestorsOrSelf is all of the ancestors this page has in the tree

    // (1) means: go up to level 1 and stop looking for more ancestors when you get there

    // First() gets the first ancestor found (the home page, on level 1)

    var homePage = CurrentPage.AncestorsOrSelf(1).First();

 

    // Find all pages with document type alias umbNewsOverview

    // We do that using the plural, umbNewsOverviews (note the extra "s" in the end)

    // Then take the first one, as we know there will only be on news overview page

    var newsOverview = homePage.NewsOverviews.First();

 

    // Similar to above: find all pages with document type umbNewsItem under the news overview page

    // Then order them, first by publishDate (a property the editor can explicitly set on the news item)

    // and then by createDate, which is set by Umbraco automatically when a page gets created.

    // Finally, take the first 5 items to show in the news overview

    var newsItems = newsOverview.NewsItems.OrderBy("publishDate desc, createDate desc").Take(3);

 

}

 

<!-- Blog -->

@foreach (var item in newsItems)

{

 

    <div class="col-md-12">

        <h3>@item.Name</h3>

        <p>@item.CreateDate.ToString("MM/dd/yyy")</p>

        <img class="img-responsive thumbnail" src="@item.Image" />

   

        @Umbraco.Truncate(item.Content, 1000)

        @*<p> @item.Content</p>*@

 

    </div>

}

 

 

Hi Ryan

Last time I used the truncate method it took all characters from the RTE, which means that the HTML tags are being truncated as well. And that's something you don't want.

Perhaps you should consider adding a "Teaser" field to your news document type based on a multiple text data type. Then you should be able to use the truncate method in a predictable manner since it will now only deal with text content and no HTML.

And then in combination with the CSS approach I mentioned above I think that will be the better option.

Hope this helps and makes sense.

/Jan

If formatting of that teaser isn't important then you could use stripHtml to just give you just the plain text content before truncating to your required length.

As @Mike said,

You could use

 @Umbraco.Truncate(library.StripHtml(item.Content), 1000)

Thanks Guys for the response.

Unfortunately, I need to keep all the formatting, so I can't strip away the html.  I want the users to do all their editing, formatting, etc and I just take what they have and display it.

Thanks

Ryan

Yeah, the approach of trimming and truncating is not the way to go about imho. You also risk cutting of text that Google might index and then sometimes the text could read "We have a lot of new products you sh..." - That's the same text that goes into the source code, which Google bot and other is reading.

Therefore I really think you should consider using the CSS approach I mentioned above to deal with this - See this page where Chris Coyer has made a nice demo http://css-tricks.com/almanac/properties/t/text-overflow/

Hope this helps and make my intention clearer :)

/Jan

Hmmm... Isn't the idea that this is a teaser and you'd want the actual news page to be the one that hits for seo? Also on a bandwidth issue it  wouldn't be long before a news section became unwieldy for mobile delivery with all that potentially substantial hidden text, and then needed progressive loading?

I'd probably go with your teaser parameter as a separate entity as best practice then you really don't need to get involved with trimming or truncating :-) or vast hidden HTML. Writing a concise abstract for each page is actually a great way to educate your content writers for both the abstract and the actual full content.

Yeah, a teaser field would make sense - Also what I had in mind but forgot to re-mention in my latest post where I suggest using the CSS tricks - But using a teaser field with the CSS trick mentioned above to make sure that "..." is shown if the entered teaser is for some reason too long to fit the container :)

/Jan

is working on a reply...