Level 102
And the view? Welcome to the forum :)
1 like
Apr 8, 2022
33
Level 1
Get only the clicked image to display, and not all of them
0
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 images I stored in my DB, but let's say I'm sharing it like that because all the others methods that I tried were... 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 ^^'.
I know I could use something like {{ $image[0]->name }} but I want it to be dynamic so every image getting uploaded would be ready to be clicked on.
Don't hesitate to ask me for more bits of code if needed, I can share without any problem.
Level 1
@Sinnbeck here is the view (that was supposed to be in the original post but idk it somehow bugged lmao, and thanks for welcoming me)
@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
Level 102
@SepulcherZ Ok so the images are shown, and you just need to make them clickable ? Just guessing the url as you havent shown the route :)
<a href="/displaydog/{{ $image->id }}" target="_blank"><img src="/image/{{ $image->image }}" width="500px"></a>
Level 1
@Sinnbeck Oh yeah sorry. So, for my route I have
Route::get('/displaydog', [ShowAdults::class, 'show'], function(){
return view('showimages.displaydog');
})->name('Showdoggo');
and for the link I have
@foreach ($images as $image)
<div class="placeholder2"><a href="{{ route('Showdoggo') }}"><img src="/image/{{ $image->image }}" width="140px"></a></div>
@endforeach
edit : needed to show the foreach cause in this view I need all the images
Level 102
@SepulcherZ For the show route to work you need to add the route model binding name
Route::get('/displaydog/{images}', [ShowAdults::class, 'show'])->name('Showdoggo');
Level 1
Wow that's weird, idk why my post is bugged like that, let me fix this thing lol...
Level 102
@SepulcherZ No worries :)
Level 56
On your show method, Laravel will auto inject the "ciicked" image model automatically (if you built your link properly with the image's id), so you don't need to query the database again.
Try this:
<?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()
{
$images = DB::table('images')->whereIn('type', ['F', '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)
{
return view('showimages.displaydog',compact('images'));
}
}
Notes:
- I replaced the "wheres" on the first query by a
whereIn - I would name the parameter in the
showmethod as singular. I kept it in plural so you can test it easily without changing the parameters on the links you might already have on your blade files.
Level 102
@rodrigo.pedra Your missed a variable. $query should be $images :)
1 like
Level 1
@Sinnbeck Yeah I fixed that quickly, but now I get a "Attempt to read property "name" on bool", what does it mean?
Level 102
@SepulcherZ It means you have a variable, which you assume is an object, but is actually a boolean (true/false), and you try to get ->name
$someVariableThatIsABoolean->name;
What code is giving that error? Inside 'showimages.displaydog' ?
Level 1
@Sinnbeck Yeah it's once I click on the image, so in the displaydog view exactly
Level 102
@SepulcherZ Show the code for that view
Level 1
@Sinnbeck here is the entire view :
@extends('layouts.master')
@section('title', 'Du Rêve Des Lutins - Test2')
@section('content')
<main>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('Chiens') }}"> Back</a>
@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
</main>
@endsection
Level 102
@SepulcherZ You are trying to use foreach on a single image :) Your naming might confuse you. Naming the variable $image might have been better. So remove the foreach, and just use the stuff inside it.
public function show(Images $image)
{
return view('showimages.displaydog',compact('image'));
}
and
Route::get('/displaydog/{image}', [ShowAdults::class, 'show'])->name('Showdoggo');
1 like
Level 56
@Sinnbeck Sure thing! thanks for the heads up, will fix the snippet for posterity.
Level 1
@Sinnbeck Thanks, I really feel like we are progressing, but now, in the index I get "Missing required parameter for [Route: Showdoggo] [URI: displaydog/{image}] [Missing parameter: image]." And about the "showdoggo" view, I get a 404.
Level 102
@SepulcherZ Can you show what you have now. I have posted bits here and there, so it might be hard to get the right stuff :) Show both routes + the controller
Level 1
@Sinnbeck Haha, of course it might be confusing! So here's the route :
Route::get('/displaydog/{image}', [ShowAdults::class, 'show'])->name('Showdoggo');
and here is the controller :
<?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()
{
$images = DB::table('images')->whereIn('type', ['F', '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 $image)
{
return view('showimages.displaydog',compact('image'));
}
}
edit: I didn't forget to get rid of the foreach loop in the view if it helps
Level 102
@SepulcherZ And the route for the index ? I would assume it looked like this
Route::get('/displaydog', [ShowAdults::class, 'index'])->name('somename');
Level 1
@Sinnbeck for the index, I have this :
Route::get('/chiens', [ShowAdults::class, 'index'], function () {
return view('showimages.chiens');
})->name('Chiens');
When I say index, it's not really the index of the website, but rather the page before I click on the images if you prefer. I can show the view for that if you need it too
Level 102
@SepulcherZ Yeah an index method is just a listing of a resource so the name is correct. Also you should either use a controller (recommended) or a function. Not both
Route::get('/chiens', [ShowAdults::class, 'index'])->name('Chiens');
So when you go to /chiens it works, but when you go to /displaydog/1 it gives an error?
Level 1
@Sinnbeck Oh ok, didn't know about the thing you recommended, I'll pay attention now.
So about the error Missing required parameter for [Route: Showdoggo] [URI: displaydog/{image}] [Missing parameter: image]., it's straight in /chiens and for the showdoggo (/displaydog) I get a 404
edit : /displaydog/1 works perfectly fine tho
Level 102
@SepulcherZ You need to give it the ID of the image as a parameter. For instance image ID 1 is /displaydog/1
Level 1
Level 1
btw all my images in the DB have their own IDs, can I use that as a parameter like {{$image->id}} or something like that?
Level 102
@SepulcherZ Yeah that is what the href here does :) Notice how I set the $image->id as part of the url
<a href="/displaydog/{{ $image->id }}" >
<img src="/image/{{ $image->image }}" width="500px">
</a>
1 like
Level 1
@Sinnbeck Thanks a lot! You fixed everything! :D Thank you so much mate!!! I knew the problem wasn't so difficult to fix but that was way out of my knowledge range haha.
Level 102
@SepulcherZ No worries. Just happy to help. Mark a best answer to set the thread as solved.
A tiny bonus tip. I suggest using laravels naming conventions. It will make your life so much easier down the road.
For instance models, should be the singular version of the table. So images will be class Image not class Images. This is because the model represents a single image. And controller genereally are suffixed with Controller. So it would be ShowAdultsController. That makes it very easy to see what ShowAdults is used for.
Here is a full list: https://github.com/alexeymezenin/laravel-best-practices#follow-laravel-naming-conventions
1 like
Level 1
@Sinnbeck I made sure to mark your previous answer as best answer, since it was the only bit of code I needed for all of my views! I didn't have to change my routes or even add the "show()" in my controllers, I went too far for nothing hahaha. Now I'll be checking on the links you've shared so I can learn more about this beautiful framework. Thanks again for your tips and I hope you have a nice day sir!
Level 102
@SepulcherZ Same to you :)
1 like
Level 102
Can I btw suggest watching this free series. It will be an awesome start into laravel 8 and will give you a better understanding of how routings, models, controllers etc. work
1 like
Level 1
@Sinnbeck I'll make sure to check this series, thanks for linking it! :)
Please or to participate in this conversation.