How to return images sequentially inside a "for loop"?

Question

My view displays collections from four different tables. $redtable is my longest collection.

@for ($i = 0; $counter < $redtable->count(); $i++)
    <div>
        {{ $red->slice($i, 1)->first()?->content }}
        {{ $green->slice($i, 1)->first()?->content }}
        {{ $blue->slice($i, 1)->first()?->content }}
        {{ $gray->slice($i, 1)->first()?->content }}
    <div>
@endfor

My image table:

+----+------------------------------------+-------------------------+--------------+
| id | image                              | imageable_type          | imageable_id |
+----+------------------------------------+-------------------------+--------------+
|  1 | /path/redtable/image.png           | App\Models\Red          |            1 |
|  2 | /path/greentable/image.png         | App\Models\Green        |            1 |
|  3 | /path/blue/image1.png              | App\Models\Blue         |            1 |
|  4 | /path/blue/image2.png              | App\Models\Blue         |            1 |
|  5 | /path/blue/image3.png              | App\Models\Blue         |            1 |
|  6 | /path/blue/image4.png              | App\Models\Blue         |            1 |
|  7 | /path/blue/image5.png              | App\Models\Blue         |            1 |
|  8 | /path/gray/image.png               | App\Models\Gray         |            2 |
+----+------------------------------------+-------------------------+--------------+

My Controller:

class ColorsController extends Controller
{
    public function index()
    {
        $red = \App\Models\Red::with('polymorphicRelationship')->limit(3)->orderby('id', 'desc')->get();
        $green = \App\Models\Green::with('polymorphicRelationship')->limit(3)->orderby('id', 'desc')->get();
        $blue = \App\Models\Blue::with('polymorphicRelationship')->limit(3)->orderby('id', 'desc')->get();
        $gray = \App\Models\Gray::with('polymorphicRelationship')->limit(3)->orderby('id', 'desc')->get();
        
        return view('home.colors', [
            'red' => $red,
            'green' => $green,
            'blue' => $blue,
            'gray' => $gray
        ]);
    }

How to display the images of the "Model Blue" table in the view.

I did a test using $picture->first()?->polymorphicRelationship()->first()->image, but it only displays the image of the first line of the table.

@for ($i = 0; $counter < $red->count(); $i++)
    <div class="general">
        {{ $red->slice($i, 1)->first()?->content }}
        {{ $green->slice($i, 1)->first()?->content }}
        {{ $blue->slice($i, 1)->first()?->content }}
        <div class="slide">
            <!-- First slide image -->
            {{ $blue->polymorphicRelationship->image1 }}
            <!-- Second slide image -->
            {{ $blue->polymorphicRelationship->image1 }}
            <!-- Third slide image -->
            {{ $blue->polymorphicRelationship->image1 }}
            <!-- Fourth slide image -->
            {{ $blue->polymorphicRelationship->image1 }}
            <!-- Fifth slide image -->
            {{ $blue->polymorphicRelationship->image1 }}
        </div>
        {{ $graytable->slice($i, 1)->first()?->content }}
    </div>
@endfor

Answer 1

Assumming the relationship is defined as a polymorphic one to many, you can just add another loop.

Also you can replace slice($i, 1)->first() with get($i).

@for ($i = 0; $counter < $red->count(); $i++)
    <div class="general">
        {{ $red->get($i)?->content }}
        {{ $green->get($i)?->content }}
        {{ $blue->get($i)?->content }}
        <div class="slide">
            @foreach ($blue->polymorphicRelationship as $image)
                {{ $image->image }}
            @endforeach
        </div>
        {{ $graytable->get($i)?->content }}
    </div>
@endfor