StoriedCorey Posted August 12, 2020 Share Posted August 12, 2020 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
tuanphan Posted August 12, 2020 Share Posted August 12, 2020 Yes. You can with Code Injection. Can you share link to blog page? We can check easier. 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
StoriedCorey Posted August 13, 2020 Author Share Posted August 13, 2020 Is that possible, @tuanphan if the site isn't published? Link to comment
StoriedCorey Posted August 13, 2020 Author Share Posted August 13, 2020 I'm using this same format, @tuanphan, although using the Brine template. If there is a way to share a link to an unpublished website, let me know, if you'd like to look at my specific blog. Link to comment
emilykrause Posted August 13, 2020 Share Posted August 13, 2020 (edited) 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 Edited August 13, 2020 by emilykrause Brand Identity Designer, Website Designer, and Graphic Designer at DESIGNPOWERS.COM BLOG POSTS | WEB DESIGN SERVICES | WEB DESIGN WORK Link to comment
tuanphan Posted August 13, 2020 Share Posted August 13, 2020 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
StoriedCorey Posted August 14, 2020 Author Share Posted August 14, 2020 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. Link to comment
RyanDejaegher Posted August 14, 2020 Share Posted August 14, 2020 @StoriedCorey do you have a link to the site? You can do this with JavaScript and save on page load by leaving out jQuery. @tuanphan solution is close it may need a tweak so that it's not targeting the "Read More" as well Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
StoriedCorey Posted August 14, 2020 Author Share Posted August 14, 2020 46 minutes ago, RyanDejaegher said: @StoriedCorey do you have a link to the site? You can do this with JavaScript and save on page load by leaving out jQuery. @tuanphan solution is close it may need a tweak so that it's not targeting the "Read More" as well SITE: debbiemarkswellness.com PW: BEWELL PAGE: Blog Thanks, @RyanDejaegher... Link to comment
Solution RyanDejaegher Posted August 14, 2020 Solution Share Posted August 14, 2020 @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: Brendanmkav, StoriedCorey, earthwindflowermoon and 1 other 2 2 Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
StoriedCorey Posted August 14, 2020 Author Share Posted August 14, 2020 Thanks, @RyanDejaegher! Might be reaching out again. Appreciate the help! RyanDejaegher 1 Link to comment
emilykrause Posted August 24, 2020 Share Posted August 24, 2020 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 link: https://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
tuanphan Posted October 6, 2020 Share Posted October 6, 2020 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 link: https://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
simon_clarke Posted February 28, 2022 Share Posted February 28, 2022 (edited) 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 February 28, 2022 by simon_clarke earthwindflowermoon 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment