[Share] Summary Block load more

To add a Load more feature on Summary Block, something like this

#1. First you need to add a Summary Block with List or Grid Layout

#2. Find Summary Block ID.

In my example, we will have: #block-yui_3_17_2_1_1728035268472_14593

#3. Use this code to Page Header Injection (page where you use Summary Block)

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
div.summary-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
span.summary-metadata-item a {
    background-color: #ececec;
    padding: 2px 5px;
    border-radius: 5px;
}
  .summary-title {
    overflow: hidden;
}
a.summary-title-link:before {
    content: "\f061";
font-family: "Font Awesome 6 Free";
font-weight: bold;
margin-right: 3px;
transform: translateX(-30px);
    transition: all 0.35 ease;
    display: inline-block;
}
a.summary-title-link:hover:before {
    transform: translateX(0);
    transition: all 0.35 ease;
}
  button#show-more {
    background-color: transparent;
    border: none;
    overflow: hidden;
    text-decoration: underline;
}
button#show-more:before {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    margin-right: 3px;
    transform: translateX(-30px);
    transition: all 0.35 ease;
    display: inline-block;
}
button#show-more:hover:before {
    transform: translateX(0);
    transition: all 0.35 ease;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.summary-item').hide(); // Ẩn tất cả
            $('.summary-item').slice(0, 10).show(); // show first 10 items
            // add "Show More"
            $('.summary-item-list').after('<button id="show-more">Show More</button>');
            $('#show-more').click(function() {
                $('.summary-item:hidden').slice(0, 10).slideDown(); // show more 10 items
                if ($('.summary-item:hidden').length === 0) {
                    $(this).hide(); 
                }
            });
        });
    </script>

#4. I used this code to add arrow icon before Load more, so you can remove it you don’t use arrow icon

#4.2. First (1) code will set Metadata style (background, round corners), you can remove it.

Second (2) + Third (3) will add arrow before Summary Title, you can also remove them

#4.3. First (1) will set Load more button style

Second (2) + Third (3) will set an arrow icon before button, you can remove it

#5. First (1) will show 10 items initial

Second (2), you can changed Load more/Show more text

Third (3) will load 10 more items when users click Load more

On 10/14/2024 at 3:52 AM, tuanphan said:

To add a Load more feature on Summary Block, something like this

#1. First you need to add a Summary Block with List or Grid Layout

#2. Find Summary Block ID.

In my example, we will have: #block-yui_3_17_2_1_1728035268472_14593

#3. Use this code to Page Header Injection (page where you use Summary Block)

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
div.summary-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
span.summary-metadata-item a {
    background-color: #ececec;
    padding: 2px 5px;
    border-radius: 5px;
}
  .summary-title {
    overflow: hidden;
}
a.summary-title-link:before {
    content: "\f061";
font-family: "Font Awesome 6 Free";
font-weight: bold;
margin-right: 3px;
transform: translateX(-30px);
    transition: all 0.35 ease;
    display: inline-block;
}
a.summary-title-link:hover:before {
    transform: translateX(0);
    transition: all 0.35 ease;
}
  button#show-more {
    background-color: transparent;
    border: none;
    overflow: hidden;
    text-decoration: underline;
}
button#show-more:before {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    margin-right: 3px;
    transform: translateX(-30px);
    transition: all 0.35 ease;
    display: inline-block;
}
button#show-more:hover:before {
    transform: translateX(0);
    transition: all 0.35 ease;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.summary-item').hide(); // Ẩn tất cả
            $('.summary-item').slice(0, 10).show(); // show first 10 items
            // add "Show More"
            $('.summary-item-list').after('<button id="show-more">Show More</button>');
            $('#show-more').click(function() {
                $('.summary-item:hidden').slice(0, 10).slideDown(); // show more 10 items
                if ($('.summary-item:hidden').length === 0) {
                    $(this).hide(); 
                }
            });
        });
    </script>

#4. I used this code to add arrow icon before Load more, so you can remove it you don’t use arrow icon

#4.2. First (1) code will set Metadata style (background, round corners), you can remove it.

Second (2) + Third (3) will add arrow before Summary Title, you can also remove them

#4.3. First (1) will set Load more button style

Second (2) + Third (3) will set an arrow icon before button, you can remove it

#5. First (1) will show 10 items initial

Second (2), you can changed Load more/Show more text

Third (3) will load 10 more items when users click Load more

 

@tuanphan wow, so wonderful that you shared this, thanks a lot! Exactly what I was looking for and am excited to try it out. One question, though. I also have a Universal Filter Plugin code in my blog's advanced settings. Will that cause any disturbances? I'm only asking before pasting your code because I can't test it right now. Any thoughts would be much appreciated!

Cheers, Mirjam

6 hours ago, mirjamhlastan said:

@tuanphan wow, so wonderful that you shared this, thanks a lot! Exactly what I was looking for and am excited to try it out. One question, though. I also have a Universal Filter Plugin code in my blog's advanced settings. Will that cause any disturbances? I'm only asking before pasting your code because I can't test it right now. Any thoughts would be much appreciated!

Cheers, Mirjam

If you used Universal Filter Plugin, you can consider purchase Lazy Load Plugin, it can help you remove Summary 30 items limit + Add load more button without adding extra code.

If you still want to use my code, will need to adjust a bit, because Filter Because Filter Plugin loads before this code, the code will not run. You can send me the last 10 lines (last 10 lines only, don't send all) of the Filter Plugin you inserted, I can check it easily.