Jump to content

Custom CSS To Limit Blog Excerpt

Go to solution Solved by RyanDejaegher,

Recommended Posts

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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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
  • Solution

@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
  • 2 weeks later...
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. 

Brand Identity Designer, Website Designer, and Graphic Designer at DESIGNPOWERS.COM
BLOG POSTS | WEB DESIGN SERVICES | WEB DESIGN WORK

Link to comment
  • 1 month later...
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
On 8/14/2020 at 3:23 PM, RyanDejaegher said:

@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>

 

I tried this with my site but it didn't work. It's using v7.1, but for some reason Squarespace doesn't want me to know which template I chose, and I can't remember. I can't find the disable Ajax control in site styles either. The url is wilsonwillis.squarespace.com – but the blog pages are disabled for now as they are not ready for public view. Should this script still work for me? Sorry I may not have given enough information for this query...

UPDATE: I realised that I wanted a script to apply to a summary block, not a blog post page. So the scripts here didn't work. I found a script here that did...

https://nestingzone.com/design-blog/how-limit-blog-post-excerpt-word-count

 

 

Edited by simon_clarke
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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.