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

Breadcrumb at the start of every blog post.


GotEthics

Question

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

5 answers to this question

Recommended Posts

  • 0

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 by GotEthics
Typo
Link to comment
  • 0

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. 

Link to comment
  • 0

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> &#187; <a href="/news-and-insights">News</a> &#187; <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:

image.thumb.png.8fd851ba527a50ffc0300cf555ae72f4.png

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 by colin.irwin

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

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