Guest Posted October 9, 2019 Share Posted October 9, 2019 Hello everyone. I am trying to add something to the start of all my blog posts. Specifically a code block with my breadcrumb in it. I am unsure how to do this in a smart way, as i am not the one writing my blog posts, so i just want the breadcrumb to be there no matter who makes the post. Seems weird to me that you're not able to put in something that'll appear on all blog posts. Link to comment
colin.irwin Posted October 9, 2019 Share Posted October 9, 2019 What would the structure of the breadcrumb be? I'm Colin Irwin aka silvabokis. I've been a Squarespace designer & developer since 2013. I remember when it was all wild prairies round these here parts. 🐃🤠 Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written. That reminds me.. ..you might want to check out my Squarespace template finder or have a look at my other Squarespace tips Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. If you're looking for a Squarespace developer Book a chat or Drop me a line - first meeting is always free Link to comment
Guest Posted October 9, 2019 Share Posted October 9, 2019 (edited) Like this, but at the start of all blog posts. - With a layer more of course. So its like: Home / Knowledge / Compliance blog / "Blog post name" https://gyazo.com/288c48964182256bc63c0e9d7d286a23 <div class="ge-breadcrumb"> <ul class="breadcrumb"> <li><a href="/home">Home</a></li> <li><a href="/knowledge">Knowledge</a></li> <li><a href="/blog">Compliance Blog</a></li> <li class="active">Blog post</li> </ul> </div> Edited October 9, 2019 by GotEthics Typo Link to comment
yh3 Posted January 31, 2021 Share Posted January 31, 2021 did you manage to get this to work? also trying to get breadcrumbs working for blog... mazmac 1 Link to comment
sinan Posted February 2, 2021 Share Posted February 2, 2021 Hi everyone. Is there any update on this topic? I am also trying to add breadcrumbs to all my blog posts. It's actually very frustrating that Squarespace does not provide this simple feature. Hope they consider adding it in the upcoming product updates. mazmac and Florian 2 Link to comment
Solution colin.irwin Posted February 2, 2021 Solution Share Posted February 2, 2021 (edited) The code below is part of a larger function that manages breadcrumbs for multiple sections of a client's site - blog collections, index pages and regular pages. This is just for the news section, which is a blog. First the JavaScript (this requires jQuery to be installed). Also, it's for a 7.0 site with Ajax loading enabled. For 7.1 sites or 7.0 sites with Ajax disabled you would swap out the window.Squarespace.onInitialize(Y, function() for $(document).ready(function(){ window.Squarespace.onInitialize(Y, function(){ processBreadcrumbs(); }); function processBreadcrumbs() { var thisPath = window.location.pathname; var thisPage; var breadcrumbLink; if (thisPath.includes('/news')) { $('.BlogItem-title').addClass('pad-site'); thisPage = $('.BlogItem-title').text(); $('.Main--blog-item .Main-content').prepend('<div id="breadcrumbNewsArticle"><div><a href="/">Home</a> » <a href="/news-and-insights">News</a> » <span class="truncate">'+thisPage+'</span></div></div>'); } } Now some Custom CSS. The first class, .pad-site, is just to format the blog post title to make it consistent with the rest of the site. The second class, .truncate, tidies up long post titles so that the breadcrumb doesn't look too long. It stops the text at 320px wide and inserts an ellipsis to indicate it has been truncated. It looks like this: The third CSS rule that begins with [id^="breadcrumb"] contains the styling for the breadcrumb links. The Custom CSS .pad-site { padding-top: 34px; font-size: 28px; } .truncate { display: inline-block; width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } [id^="breadcrumb"] { font-size: 16px; font-weight: 400; font-style: normal; font-size: 16px; letter-spacing: .1em; a { color: @black; border-bottom: 1px dotted @black; &:hover { opacity:0.8; } } } Finally, a caveat. I haven't tested this code on 7.1 sites. It's probable that it won't work by simply pasting it into your site and would need some editing to make it function correctly. Edited February 2, 2021 by colin.irwin concretenz and Salesdroid 1 1 I'm Colin Irwin aka silvabokis. I've been a Squarespace designer & developer since 2013. I remember when it was all wild prairies round these here parts. 🐃🤠 Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written. That reminds me.. ..you might want to check out my Squarespace template finder or have a look at my other Squarespace tips Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. If you're looking for a Squarespace developer Book a chat or Drop me a line - first meeting is always free Link to comment
PhilHoughton Posted March 22, 2022 Share Posted March 22, 2022 Cheers @colin.irwin Here's it working on 7.1 <script>$(document).ready(function(){ var thisPath = window.location.pathname; var thisPage; var breadcrumbLink; thisPage = $('.blog-item-title').text(); $('.blog-item-top-wrapper').prepend('<div id="breadcrumbNewsArticle"><div><a href="/">Home</a> » <a href="/news-and-insights">News</a> » <span class="truncate">'+thisPage+'</span></div></div>'); }); </script> tuanphan, concretenz, colin.irwin and 2 others 4 1 Link to comment
mazmac Posted September 28, 2022 Share Posted September 28, 2022 Hello @houghtoncreative Can you share how eas the install in 7.1? Still figuring out the installation Thanks Link to comment
tuanphan Posted September 30, 2022 Share Posted September 30, 2022 On 9/29/2022 at 3:19 AM, mazmac said: Can you share how eas the install in 7.1? Still figuring out the installation Thanks Add that code to Code Injection > Footer PhilHoughton 1 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
mazmac Posted October 20, 2022 Share Posted October 20, 2022 @tuanphanHello I think I resolve it by accident, I have a breadcrumb in each post in my blog but looks pretty bad. I ttached you a image capture here. 1. So first I puto the Will Myers breadcrumb for categories and tags code, 2. Then I put the code for LOAD MORE in summary block-grid, 3. Suddenly they just appear in my top of each blog, just like I want it. Can you help me to stilize it and make it appears in normal pages? www.rudagt.squarespace.com not has password. And, how I can apply the load more button to a diferent summary block as LIST type Thanks. Hopefully this can resolve the breadcrumb problem for each blog. Link to comment
tuanphan Posted October 23, 2022 Share Posted October 23, 2022 On 10/21/2022 at 2:00 AM, mazmac said: @tuanphanHello I think I resolve it by accident, I have a breadcrumb in each post in my blog but looks pretty bad. I ttached you a image capture here. 1. So first I puto the Will Myers breadcrumb for categories and tags code, 2. Then I put the code for LOAD MORE in summary block-grid, 3. Suddenly they just appear in my top of each blog, just like I want it. Can you help me to stilize it and make it appears in normal pages? www.rudagt.squarespace.com not has password. And, how I can apply the load more button to a diferent summary block as LIST type Thanks. Hopefully this can resolve the breadcrumb problem for each blog. You want to remove 1 breadcrumb? Add to Design > Custom CSS div#breadcrumbNewsArticle:First-child { display: none; } 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
mazmac Posted October 23, 2022 Share Posted October 23, 2022 5 minutes ago, tuanphan said: You want to remove 1 breadcrumb? Add to Design > Custom CSS div#breadcrumbNewsArticle:First-child { display: none; } thanks, for edit, the other breadcrumb, would I wrote, Second-child ? Thanks Link to comment
mazmac Posted October 23, 2022 Share Posted October 23, 2022 7 minutes ago, tuanphan said: You want to remove 1 breadcrumb? Add to Design > Custom CSS div#breadcrumbNewsArticle:First-child { display: none; } Btw... What would be the right code to aff breadcrumb to all pages? I nos realize it is possible, but how would be written for future projects? Link to comment
tuanphan Posted October 27, 2022 Share Posted October 27, 2022 On 10/23/2022 at 9:08 AM, mazmac said: Btw... What would be the right code to aff breadcrumb to all pages? I nos realize it is possible, but how would be written for future projects? Yes. Not possible. WIth standard page, you can use Text Block to add it manually mazmac 1 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
tuanphan Posted June 26, 2023 Share Posted June 26, 2023 On 6/25/2023 at 5:11 PM, studiofounded said: Hi @houghtoncreative, I have added this code but can't seem to get it working on my site (www.studiofounded.com/journal). Do you know where I'm wrong? #1. Add this line above code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> #2. The url doesn't exist 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
LemonstrikeCreativeStudios Posted June 11 Share Posted June 11 On 3/22/2022 at 3:32 AM, houghtoncreative said: Cheers @colin.irwin Here's it working on 7.1 <script>$(document).ready(function(){ var thisPath = window.location.pathname; var thisPage; var breadcrumbLink; thisPage = $('.blog-item-title').text(); $('.blog-item-top-wrapper').prepend('<div id="breadcrumbNewsArticle"><div><a href="/">Home</a> » <a href="/news-and-insights">News</a> » <span class="truncate">'+thisPage+'</span></div></div>'); }); </script> @houghtoncreative Hi! This is exactly what I've been looking for for a client's site, however I need to target one specific blog and its corresponding posts. Any insight you can provide would be greatly appreciated! mazmac 1 Link to comment
tuanphan Posted June 13 Share Posted June 13 On 6/12/2024 at 2:19 AM, LemonstrikeCreativeStudios said: @houghtoncreative Hi! This is exactly what I've been looking for for a client's site, however I need to target one specific blog and its corresponding posts. Any insight you can provide would be greatly appreciated! You can add code to Page Header instead of Sitewide Code Injection mazmac 1 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
LemonstrikeCreativeStudios Posted June 13 Share Posted June 13 8 hours ago, tuanphan said: You can add code to Page Header instead of Sitewide Code Injection Hi @tuanphan! I actually tried that and it didn't work 😞 It DID work in Code Injection > Footer but affected both blogs my client has. Any ideas? I can add it back to the blog page I'd like it on and send you a link. Let me know. One question–should I be adding it to "Page Header Injection Code" or "Post Blog Item Injection Code?" Link to comment
tuanphan Posted June 15 Share Posted June 15 On 6/13/2024 at 11:10 PM, LemonstrikeCreativeStudios said: Hi @tuanphan! I actually tried that and it didn't work 😞 It DID work in Code Injection > Footer but affected both blogs my client has. Any ideas? I can add it back to the blog page I'd like it on and send you a link. Let me know. One question–should I be adding it to "Page Header Injection Code" or "Post Blog Item Injection Code?" You can share link to blog page where you want to apply, I will check & add ID to code, so you can add it to Code Injection Footer. 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
LemonstrikeCreativeStudios Posted June 18 Share Posted June 18 On 6/15/2024 at 2:35 AM, tuanphan said: You can share link to blog page where you want to apply, I will check & add ID to code, so you can add it to Code Injection Footer. @tuanphan Apologies for the delay! That would be so helpful, thank you. The client has two blogs (/blog and /careers) but I'd like the breadcrumbs to appear on the posts of the Careers blog: https://www.lomi.org/careers. I would just like it to say "← Back to Careers" and link back to /careers. Let me know if you need anything else or have other questions. Thank you! Link to comment
tuanphan Posted June 20 Share Posted June 20 On 6/12/2024 at 2:19 AM, LemonstrikeCreativeStudios said: @houghtoncreative Hi! This is exactly what I've been looking for for a client's site, however I need to target one specific blog and its corresponding posts. Any insight you can provide would be greatly appreciated! Change the code to this <script>$(document).ready(function(){ var thisPath = window.location.pathname; var thisPage; var breadcrumbLink; thisPage = $('body.collection-6668881fe7cc996fb291320a .blog-item-title').text(); $('body.collection-6668881fe7cc996fb291320a .blog-item-top-wrapper').prepend('<div id="breadcrumbNewsArticle"><div><a href="/careers">← Back to Careers</a></div>'); }); </script> 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
LemonstrikeCreativeStudios Posted June 20 Share Posted June 20 9 hours ago, tuanphan said: Change the code to this <script>$(document).ready(function(){ var thisPath = window.location.pathname; var thisPage; var breadcrumbLink; thisPage = $('body.collection-6668881fe7cc996fb291320a .blog-item-title').text(); $('body.collection-6668881fe7cc996fb291320a .blog-item-top-wrapper').prepend('<div id="breadcrumbNewsArticle"><div><a href="/careers">← Back to Careers</a></div>'); }); </script> @tuanphan Thanks so much! You always come in clutch 😎 mazmac 1 Link to comment
MegRae Posted June 24 Share Posted June 24 On 9/29/2022 at 9:23 PM, tuanphan said: Add that code to Code Injection > Footer Hi I am using this code for this website: https://www.brutinel.com/services/smoke-detector-amp-fire-alarm Its repeating the name of the article x2, any suggestions? mazmac 1 Link to comment
tuanphan Posted June 28 Share Posted June 28 On 6/25/2024 at 6:12 AM, MegRae said: Hi I am using this code for this website: https://www.brutinel.com/services/smoke-detector-amp-fire-alarm Its repeating the name of the article x2, any suggestions? It looks fine to me. Can you take a screenshot of problem? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment