How to implement "Show more" button to load photos on one page in Laravel 8 loop?

Question

HTML

Hello! The page has filtering by photo categories, show all photos and a specific category. The names of the categories are included in the database and the photos themselves are also listed in a separate table and the photo has a category_id. I have such a controller

public function showMainPage()
    {
        $carousel = Category::find('1')->images()->pluck('image'); 

        $categories = Category::get()->except([1])->all();

        $instagram = Instagram::pluck('image');

        return view('index', [
                'carouselInView' => $carousel,
                'categoriesInView' => $categories,
                'instagramInView' => $instagram
                ]);
    }

and two cycles

<div class="row alime-portfolio">
                @foreach($categoriesInView as $category)
                @foreach($category->images->pluck('image') as $image)
                    <!-- Single Gallery Item -->
                    <div class="col-12 col-sm-6 col-lg-3 single_gallery_item {{$category->name}} mb-30 wow fadeInUp" data-wow-delay="100ms">
                        <div class="single-portfolio-content">
                            <img src="/" alt="">
                            <div class="hover-content">
                                <a href="/" class="portfolio-img">+</a>
                            </div>
                        </div>
                    </div>
                @endforeach
                @endforeach
            </div>

            <div class="row">
                <div class="col-12 text-center wow fadeInUp" data-wow-delay="700ms">
                    <a href="#" class="btn alime-btn btn-2 mt-15">View More</a>
                </div>
            </div>

, how can I load photos from the cycle by the view more button on one page, and not so that all photos are loaded at once? Help, please, preferably without js (or if there is already a ready-made script to just insert), I only know PHP and not very good at html css.

Answer 1

Turnkey solution

Answer 2

VakaBaka , firstly, without js, loading will not work in any case. Secondly - as an option without Ajax - load them into separate blocks of 30 pieces, let the first one be vizible, the rest will be non-display. Click the button to show the next hidden block. For a small number of photos of norms, the advantage is that nothing needs to be changed on the backend.
Ajax would be a better solution, the button should have the date attribute of the current page, on click it causes Ajax to load elements from "page number * 30" to "page number * 30 + 30" and change the date attribute to "page number + 1".

Answer 3

It won't work without JS.