Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Mark Watson 102 posts 313 karma points
    7 days ago
    Mark Watson
    0

    How do you truncate text in content grid

    Hi there

    This is my first time using content grids and I have been stuck on this a while. I am using Umbraco cloud.

    I wish to display only the first 50 characters of an article and after 50 characters and ellipsis appears.

    @{
        var selection = Umbraco.Content(Guid.Parse("01284c80-30c0-4891-b349-802237f90443"))
        .Children()
        .Where(x => x.IsVisible());
    
    }
    
        @foreach (var item in selection)
        {
        var typedMediaPickerSingle = item.Value<IPublishedContent>("caseStudyLogo");
                  if (typedMediaPickerSingle != null)
                  {
    
        <div class="main-case">
             <div class="caselogo">
    
    <img src="@typedMediaPickerSingle.Url" />
    
    
                        </div>
        <div class="casebody">
            <div class="truncate-ellipsis">
                <h5><a href="@item.Url">@item.Name</a></h5></div>
            <div class="case">  @Html.GetGridHtml(item, "caseStudyContent", "CSUSKGrid")</div>
    
            </div>
    </div>
    
        <div class="casefooter"><img src="/_assets/css/images/caseimage.png"></div>
    
        }
    }
    

    This displays all the text. I have tried a few versions of @Umbraco.Truncate but keep getting errors. My latest is

    <div class="case">  @Umbraco.Truncate(@Html.GetGridHtml(item, "caseStudyContent", "CSUSKGrid"),50)</div>
    

    Has anyone any ideas. I am still an Umbraco newbie.

  • Claushingebjerg 844 posts 2219 karma points
    5 days ago
    Claushingebjerg
    0

    GetGridHtml gets the entire grid you defined on your page and renders it.

    Truncating that doesn't really make sense as it's a html structure.

  • Bo Jacobsen 294 posts 1282 karma points
    5 days ago
    Bo Jacobsen
    0

    Hi Mark.

    There are a few ways to implement that, but it also depend on how you use your grid system.

    The easiest way would be to use somekind of jQuery Ellipsis Plugin on your case div.

    Another way would be to find your text content from the grid and then truncate it.

  • Sebastian Dammark 508 posts 1152 karma points
    4 days ago
    Sebastian Dammark
    2

    Can't you use Umbraco.StripHtml in combination with Umbraco.Truncate ?

  • Mark Watson 102 posts 313 karma points
    3 days ago
    Mark Watson
    0

    Thanks Sebastion for pointing me in the right direction.

    For Umbraco 8 you need

    @Html.StripHtml(@Html.Truncate(@Html.GetGridHtml(item, "caseStudyContent", "CSUSKGrid"), 300, true))
    
Please Sign in or register to post replies

Write your reply to:

Draft