Summary block and linking to blog

Site URL: https://www.probation-institute.org/the-griffins-society-research-listings

Hi everyone, 

We've been asked to host around 65 research listings from another website that's shutting down and I'd be grateful for some advice please - https://www.thegriffinssociety.org/our-research/our-research-listings

The page on our website is here: https://www.probation-institute.org/the-griffins-society-research-listings

I've done the page with an unlinked blog page and two summary blocks on there so far (as I know they can only take 30 in each). I've done it this way so I can replicate the layout and format of the original site where I can - as I don't know if this is possible in the blog page. I have some specific questions as follows: 

1. I've added an archive filter list down the side, how do I pull in categories/tags from both summary blocks? If that's not possible is there a better way?
2. When you click on one of the filters, for example Probation, it filters but takes you to the unlinked 'blog' page rather than staying on the listings page and just filtering out the ones that don't match. Any way to change this?

I'm sure I'm probably doing some things wrong and maybe there's a better way to achieve what I need, so I'd really welcome any advice. 

Thank you, 

Richard

You can use the Universal Filter (affiliate) to achieve more than 30, along with other functionality.

Thank you, I have seen that but wondered if there were other options. 

Any thoughts on this @tuanphan?

Very grateful for any advice. 

On 11/9/2024 at 6:49 PM, RichardR said:

Any thoughts on this @tuanphan?

Very grateful for any advice. 

Last month I helped a site with similar filter on Summary Block without using plugin,  However, it has one disadvantage: when you need to add a new category filter, you will need to update the code. If you still want this, I can give you a quick guide

5 hours ago, tuanphan said:

Last month I helped a site with similar filter on Summary Block without using plugin,  However, it has one disadvantage: when you need to add a new category filter, you will need to update the code. If you still want this, I can give you a quick guide

Yes  please. That would be amazing thank you, 

Hi @tuanphan be great if you have time to share a guide for the filter please. Will it work with 2 or 3 summary blocks as I'll need to add multiple? 

Many thanks. 

hey @tuanphan I think I'm getting there a little. I managed to link two summary blocks, as per your post below: 

It links the two summer block on the page but when you click on the last post from the first blog, 'Time to Listen', 'Lost Spaces' doesn't appear as the next blog post. So it's linking them on the page, but not when you click through. 

Also, the archive block doesn't pull in tags from both summary blocks, only the first one. 

Finally, what would the code be to link 3 summary blocks? 

Any help really appreciated. 

On 11/15/2024 at 4:36 AM, RichardR said:

Hi @tuanphan be great if you have time to share a guide for the filter please. Will it work with 2 or 3 summary blocks as I'll need to add multiple? 

Many thanks. 

The code has some problems, I'm trying to fix it, I'll send you a guide early this week

Thanks so much @tuanphan I really appreciate it. 

Hi @tuanphan any luck with this please? 

You can follow this to add Filter Category to Summary Block

Summary has a limit of 30 items, you can use this to combine 2 or more Summary Blocks together

Thanks so much @tuanphan I really appreciate this. Not sure if I've followed correctly as it's not working. Still playing around with it. 

Hey @tuanphan, I've tried this with one category to see where I'm going wrong and just can't quite figure it out.

At the moment clicking on relationships in the code block links to the relationship category but doesn't segment the blog posts. If I click on relationships in pink above one of the posts, it takes it to the wrong page. Ideally, the categories shown in pink I'd like not to be visible if possible. 

Really grateful for your help. 

What I've inserted below. 

Code block
<h5 class="blog-custom-filter">
  <span style="line-height:2em;">
    <a href="?category=All" class="active">ALL</a> <br>
    <a href="?category=Relationships" target="_self">Relationships</a>
  </span>
</h5>

Code injection on page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    // Map categories in filter to their corresponding summary-item URLs
    const categoryMap = {
        '#Relationships': [‘?category=Relationships’]
    };
    // Handle click events on links in .blog-custom-filter
    $('.blog-custom-filter a').on('click', function (e) {
        e.preventDefault(); // Prevent default behavior of the link
        // Remove the 'active' class from all links and add it to the clicked link
        $('.blog-custom-filter a').removeClass('active');
        $(this).addClass('active');
        // Get the category from the href of the clicked link
        let category = $(this).attr('href');
        if (category === '#all') {
            // Show all summary-item elements if 'ALL' is clicked
            $('.summary-item').show();
        } else if (categoryMap[category]) {
            // Hide all summary-item elements
            $('.summary-item').hide();
            // Show only summary-item elements containing the matching category link
            $('.summary-item').filter(function () {
                // Check for both URL formats
                return categoryMap[category].some(cat => {
                    return $(this).find(`a[href="/blog?category=${cat}"], a[href="/blog/?category=${cat}"]`).length > 0;
                });
            }).show();
        }
    });
});
</script>

On 11/30/2024 at 11:55 PM, RichardR said:

Hey @tuanphan, I've tried this with one category to see where I'm going wrong and just can't quite figure it out.

At the moment clicking on relationships in the code block links to the relationship category but doesn't segment the blog posts. If I click on relationships in pink above one of the posts, it takes it to the wrong page. Ideally, the categories shown in pink I'd like not to be visible if possible. 

Really grateful for your help. 

What I've inserted below. 

Code block
<h5 class="blog-custom-filter">
  <span style="line-height:2em;">
    <a href="?category=All" class="active">ALL</a> <br>
    <a href="?category=Relationships" target="_self">Relationships</a>
  </span>
</h5>

Code injection on page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    // Map categories in filter to their corresponding summary-item URLs
    const categoryMap = {
        '#Relationships': [‘?category=Relationships’]
    };
    // Handle click events on links in .blog-custom-filter
    $('.blog-custom-filter a').on('click', function (e) {
        e.preventDefault(); // Prevent default behavior of the link
        // Remove the 'active' class from all links and add it to the clicked link
        $('.blog-custom-filter a').removeClass('active');
        $(this).addClass('active');
        // Get the category from the href of the clicked link
        let category = $(this).attr('href');
        if (category === '#all') {
            // Show all summary-item elements if 'ALL' is clicked
            $('.summary-item').show();
        } else if (categoryMap[category]) {
            // Hide all summary-item elements
            $('.summary-item').hide();
            // Show only summary-item elements containing the matching category link
            $('.summary-item').filter(function () {
                // Check for both URL formats
                return categoryMap[category].some(cat => {
                    return $(this).find(`a[href="/blog?category=${cat}"], a[href="/blog/?category=${cat}"]`).length > 0;
                });
            }).show();
        }
    });
});
</script>

You can share link to page where you want to run the code, I can check easier

note

1. Keep # format

so your Code Block should be

<h5 class="blog-custom-filter">
  <span style="line-height:2em;">
    <a href="#All" class="active">ALL</a> <br>
    <a href="#Relationships" target="_self">Relationships</a>
  </span>
</h5>

2. top arrow is invalid, your apostrophe is slanted, you can see bottom arrow, the apostrophe is vertical and it is correct

Thank you. https://www.probation-institute.org/the-griffins-society-research-listings

Hey @tuanphan I've made those changes, but still not quite there yet. 

So, you can see on the first screenshot when you select either 'all' or 'relationship' as a filter, it removes everything. 

On the second screenshot, be good if I can have the categories not showing. 

Many thanks. 

Hi @tuanphan just wondered if you’ve had chance to take a look yet? Appreciate you’ll be busy, I am grateful for your help.