Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Custom CSS To Limit Blog Excerpt


StoriedCorey

Question

Using the Basil template, I'm trying to inject code to limit the length (number of characters) of the blog excerpt to just three lines of text, followed by "...", so each and every time I create a new blog post and add an excerpt, the excerpt is always the same length. Is this possible with CSS or with a header code injection on a Blog page? 

Link to comment

12 answers to this question

Recommended Posts

  • 1

@StoriedCorey and @emilykrause  Add this code to Settings -> Advanced -> Code Injection -> Footer

You can adjust the var characterCount to a different number to adjust how much it cuts off. You can also adjust the "trail".

This code will also only cut full words, that way it doesn't cut it at weird points. i.e. "Learn more about Squaresp...."

 

<script>
(function(){
	window.addEventListener('load', function() {
	var characterCount = 140
	var blogParagraph = document.querySelectorAll('.BlogList-item-excerpt p')
	var trail = "..."
    
	// Shorten a string to less than maxLen characters without truncating words.
function shorten(str, maxLen, separator = ' ') {
  if (str.length <= maxLen) return str;
  return str.substr(0, str.lastIndexOf(separator, maxLen));
}

blogParagraph.forEach(item => {
    item.textContent = shorten(item.textContent, characterCount) + trail;
})

})

})()
</script>

Result/Demo:
image.thumb.png.952c24c3d34a8fc447a09266250d9e20.png

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment
  • 0
3 hours ago, emilykrause said:

I would love to know how to shorten the excerpt with css code! I am using the Brine template. Can you please check out this site? I appreciate it! 

https://wynweightloss.com/blog

 

Add this code to Home > Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Cropping-Text-Without-Breaking-Words-jQuery-Limit-Text/limit.text.min.js"></script>
<script>
$(function () {
  $('.BlogList-item-excerpt').addClass('cuttext');
$('.cuttext').limitText({
length: 140
});
})
</script>

Disable Ajax Loading if the code doesn't work.

If the code work, you can download code in jqueryscript.net....& upload to your site (in the event jqueryscript.net website stopped working)

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Thanks, @tuanphan! The only problem with this Javascript... when the excerpt exceeds 140 characters, it shortens it, adds the "..." which is great, but it also adds a Read More and removes the Squarespace Read More hyperlink with arrow. Is there a way to tweak the Javascript to remove Read More from the excerpt and reinstate the Squarespace hyperlink w/ arrow? (You can see the difference in blog 1 & 3 vs. blog 2. 

Screen Shot 2020-08-14 at 8.50.48 AM.png

Link to comment
  • 0
On 8/14/2020 at 10:23 AM, RyanDejaegher said:

<script> (function(){ window.addEventListener('load', function() { var characterCount = 140 var blogParagraph = document.querySelectorAll('.BlogList-item-excerpt p') var trail = "..." // Shorten a string to less than maxLen characters without truncating words. function shorten(str, maxLen, separator = ' ') { if (str.length <= maxLen) return str; return str.substr(0, str.lastIndexOf(separator, maxLen)); } blogParagraph.forEach(item => { item.textContent = shorten(item.textContent, characterCount) + trail; }) }) })() </script>

@RyanDejaegher  I followed your instructions and pasted the code in the footer but for some reason I am not seeing the result. Will you please help me troubleshoot? I would love to get the Squarespace Read More link to work as @StoriedCorey has got it. Here is the blog linkhttps://wynweightloss.com/blog The site build is currently in progress. 

Get a legit brand and website. DESIGNPOWERS.COM

Link to comment
  • 0
On 8/25/2020 at 2:18 AM, emilykrause said:

@RyanDejaegher  I followed your instructions and pasted the code in the footer but for some reason I am not seeing the result. Will you please help me troubleshoot? I would love to get the Squarespace Read More link to work as @StoriedCorey has got it. Here is the blog linkhttps://wynweightloss.com/blog The site build is currently in progress. 

Do you still need help on this?

I see you used js from jqueryscript.net, you should download it & upload it your site. In case the jqueryscript stops working, the code will still work.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...