Avoid html bloating: Cutoff article excerpt on index page instead of hiding via css

[Gnuru]

I would suggest to cutoff the article excerpt to e.g. 500 characters instead of hiding this via css to avoid html-bloating.

e.g. I use this in the template "category articles" but beware I am not a coder

	<section class='ipsType_normal ipsType_richText ipsType_break ipsSpacer_both' data-ipsTruncate data-ipsTruncate-size='7 lines' data-ipsTruncate-type='remove'>
	<a href='{$record->url()}'>
      {{if $record->record_image}}
		<div class="cCmsRecord_image">
			<img class="ipsImage" src="{$record->record_image}">
		</div>
      </a>
		{{endif}}
      
       
       {{$trc=substr($record->truncated(),0,strpos($record->truncated(), ' ', 500));}}
      {$trc|raw} 
      ... 
      <br>
      
      
      <strong><a href='{$record->url()}' title="{lang="read_more_about" sprintf="$record->name"}">{lang="read_more"}</a></strong>
       
      
	</section>

 

[Marcher Technologies]

I would suggest to cutoff the article excerpt to e.g. 500 characters instead of hiding this via css to avoid html-bloating.

e.g. I use this in the template "category articles" but beware I am not a coder

	<section class='ipsType_normal ipsType_richText ipsType_break ipsSpacer_both' data-ipsTruncate data-ipsTruncate-size='7 lines' data-ipsTruncate-type='remove'>
	<a href='{$record->url()}'>
      {{if $record->record_image}}
		<div class="cCmsRecord_image">
			<img class="ipsImage" src="{$record->record_image}">
		</div>
      </a>
		{{endif}}
      
       
       {{$trc=substr($record->truncated(),0,strpos($record->truncated(), ' ', 500));}}
      {$trc|raw} 
      ... 
      <br>
      
      
      <strong><a href='{$record->url()}' title="{lang="read_more_about" sprintf="$record->name"}">{lang="read_more"}</a></strong>
       
      
	</section>

 

​You likely haven't noticed yet, but you've introduced code that will break the HTML output of your page with unclosed or extra closing HTML tags.

Truncating properly in PHP without causing such either requires stripping the HTML content to plain text and losing all styling including line breaks, or is far too resource intensive to be feasible for the widespread use it sees. Such is why IPS went the CSS/JS route.

 

[opentype]

Such is why IPS went the CSS/JS route.

​But it gets really ugly when the article starts with something else than just text, e.g. large images or embedded content. Then it all gets loaded (for example in a recent articles block), just to be hidden again afterwards. 

[Rikki]

Marcher is correct - we do it on the client side because attempting to do it on the backend is too prone to failure when the content can be anything. While simple cases like not cutting between a </strong> tag can be accounted for, it gets difficult when you start considering multi-tag structures, like tables, lists, quotes etc.

[Gnuru]

thank you for the hint for breaking html output.

I have two questions for taking it to client side:

• will google count the content as duplicate?
• on Ipad and iphone with safari and chrome it will only hide the content on the second load/reload of the page