Get random images from database with Laravel

Question

I have a database full of images. I want to show 4 images in my view and make them set to Random so new images show on every refresh.

This is usually pretty basic, but I'm needing to use a different class name for each image so that's throwing me off.

Here is my Controller:

$randpics = Pic::inRandomOrder()
->where('status', 'Active')
->limit(4)
->get();

return view('page.index',compact('randpics'));

Here is my View: (This gives me the same random image, 4 times) I was hoping the PHP logic would loop 4 times giving me 4 different images, but that's not the case.

I even tried writing it 4 different times with 4 different variable names, but still only get 4 of the same image.

   @foreach($randpics as $randpic)
    @php
      $cin = $randpic->cin ;
      $mi = $randpic->my_img;
      $rand = (asset("storage/images/cdp/$cin/profile-img/$mi"));
    @endphp
   @endforeach

 <div class="pic-grid">
   <div class="box-a" style="background-image: url({{ $rand }}"></div>
   <div class="box-b" style="background-image: url({{ $rand }}"></div>
   <div class="box-c" style="background-image: url({{ $rand }}"></div>
   <div class="box-d" style="background-image: url({{ $rand }}"></div>
 </div>

I realize to do this correctly it should look like this in my view...

 @foreach($randpics as $randpic)
   <div class="box-a" style="background-image:url({{ asset("storage/images/cdp/$randpic->cin/profile-img/$randpic->my_img") }}")>
   </div>
 @endforeach

But due to the 4 different classes, that loop will not work unless I can somehow add a different class to each of the 4 outputted images. ( box-a, box-b, box-c & box-d )

Any help would be appreciated.

Answer 1

First of all, you need to output the <div> s inside your foreach loop

@foreach($randpics as $randpic)
@php
  $cin = $randpic->cin ;
  $mi = $randpic->my_img;
  $rand = (asset("storage/images/cdp/$cin/profile-img/$mi"));
@endphp
<div ...>
@endforeach

Next, to handle assigning a different class, you can to pass the 4 classes in an array, and reference them in your loop:

$classes = ["box-a", "box-b", "box-c", "box-d"];
return view('page.index',compact('randpics', 'classes'));

@foreach($randpics as $index => $randpic)
...
<div class="{{ $classes[$index] }}"...>
@endforeach

So, putting it all together:

Controller.php:

$randpics = Pic::inRandomOrder()
->where('status', 'Active')
->limit(4)
->get();

$classes = ["box-a", "box-b", "box-c", "box-d"];

return view('page.index',compact('randpics', 'classes'));

View.blade.php:

<div class="pic-grid">
  @foreach($randpics as $index => $randpic)
  @php
  $cin = $randpic->cin ;
  $mi = $randpic->my_img;
  $rand = (asset("storage/images/cdp/$cin/profile-img/$mi"));
  @endphp
  <div class="{{ $classes[$index] }}" style="background-image: url({{ $rand }}"></div>
  @endforeach
</div>