Search code examples
phpcontrollerlaravel-8laravel-bladelaravel-9

Laravel : get only the clicked image to display, and not all of them


Yo everyone!

I'm actually working on a lil' project to learn laravel and here is the thing I struggle to achieve : I want the image I click on to be displayed in a view, but not all of my images (my images are stored in a database).

I think the code is pretty simple, I'll share it with you :

the controller I use:

<?php

namespace App\Http\Controllers;

use App\Models\Images;
use Illuminate\Support\Facades\DB;

class ShowAdults extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $query = DB::table('images')->where('type', 'F');

        $images = $query->orWhere('type', 'M')->get();
    
        return view('showimages.chiens',compact('images'));
    }

     /**
     * Display the specified resource.
     *
     * @param  \App\Models\Images  $images
     * @return \Illuminate\Http\Response
     */
    public function show(Images $images)
    {
        $images = DB::table('images')->select('*')->get();
        
        return view('showimages.displaydog',compact('images'));
    }

    
}

And the part of the view that's displaying the images:

@foreach($images as $image)
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Name:</strong>
                    {{ $image->name }}
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Details:</strong>
                    {{ $image->detail }}
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Image:</strong>
                    <img src="/image/{{ $image->image }}" width="500px">
                </div>
            </div>
        </div>
@endforeach

Now, I know this logic is supposed to display all of the imgaes I stored in my DB, but let's say I'm sharing it like that because all the others methods that I tried where... chaotic lol.

Do you guys know how I can change the logic in my loop so when I click on my image it displays the one I clicked instead of all the stored images?

Thanks a lot for your time, and sorry in advance cause even to me, it seems dumb that I can't find it after hours of searching, I think I need to know how to search things better ^^'.


Solution

  • Ok so all I had to do was to put the links to the images like that :

    <a href="/displaydog/{{ $image->id }}" ><img src="/image/{{ $image->image }}" width="140px"></a>
    
    

    I thought I had to do something in the controller and/or the route but I just had to modify the route in the link to the image itself.

    Thanks again for helping me, have a nice day everyone!

    Edit : got rid of the foreach loop in my view for it to work like that