(Squarespace) How to add category text to Portfolio Page

[tuanphan]

To add category text to Portfolio Page, like this.

#1. First, find Portfolio item url

In my example, we will have:

/work/project-one-ephnc-s8d6b

/work/project-two-llrgk-smeeh

/work/project-three-8zgh7-sjnd4

#2 . Use this code to Custom CSS

h2.category-header {
    grid-column-start: 1 !important;
    grid-column-end: 4 !important;
}
  @media screen and (max-width:767px) {
  h2.category-header {
    grid-column-end: 2 !important;
}
  }

#3. Use this code to Portfolio Page Header Injection
You can also use this Portfolio tool so you can add/customize Portfolio easier.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
var categories = {
    "Design": ["/work/project-one-ephnc-s8d6b"],
    "Digital Marketing": ["/work/project-two-llrgk-smeeh", "/work/project-three-8zgh7-sjnd4", "/work/project-five-jkmzy-6y8p6", "/work/project-six-sz8wl-2kgdg"]
};
$(document).ready(function() {
    var $gridContainer = $('#gridThumbs');
    var $items = $gridContainer.find('.grid-item');
    
    $gridContainer.empty();
    
    $.each(categories, function(categoryName, itemUrls) {
        var $categoryHeader = $('<h2 class="category-header">' + categoryName + '</h2>');
        $gridContainer.append($categoryHeader);
        
        $.each(itemUrls, function(index, url) {
            $items.each(function() {
                var $item = $(this);
                if ($item.attr('href') === url) {
                    $gridContainer.append($item);
                    return false;
                }
            });
        });
    });
});
</script>

Remember to update Category Text + Portfolio item urls

#4. Result