I'm using Laravel to create a project.
Is there a way to concatenate to the end of a url using {{ route('routename') }} in an <a> tag?
I created a list of thumbnail images that link to a collection of fullsize images using a foreach loop.
#foreach ($images as $image)
<a href="{{ route('images') }}"> // link to full size image collection
<img src="{{ $image->url }}">// thumbnail image
</a>
#endforeach
{{ route('image') }} is a link to a paginated page that only contains one image per page.
so the url for the first image is my.site/images?page=1, the second is my.site/images?page=2 and so on and so on.
I'm wanting to route the user to the correct page=# according to the thumbnail they click on so they don't have to start form the beginning of the fullsize images each time the click a link from the thumbnails.
Im thinking I can use a foreach loop to increment a variable by 1 and concatenate that on the end of each href to get the correct page number but I'm not sure how I can do this using Laravel?
Im wanting my resulting html to look like this
<img src="thumbnail1.jpg">
<img src="thumbnail2.jpg">
<img src="thumbnail3.jpg">
<img src="thumbnail4.jpg">
<img src="thumbnail5.jpg">
...
Does anyone know a way?
The method you found out yourself works perfectly fine, but there is a more elegant one. All parameters you pass as second argument that are no actual route parameters (like {page}) will be appended as query string.
{{ route('images', ['page' => $n]) }}
I was able to make this work by using this code
<?php $n = 1; ?>
#foreach ($images as $image)
<a href="{{ route('images') . '?page=' . $n }}"> // link to full size image collection
<img src="{{ $image->url }}">// thumbnail image
</a>
<?php $n++; ?>
#endforeach
Related
I have a database with images related to one product, and I'd like to take those images there only from the second one.
The code to my view is this. I put a line for each image
#foreach($allImages as $image)
<img src="{{ asset('merchants/images/products/' . $image->image) }}" alt="little picture">
#endforeach
I hope I'm clear enough on what I'd like to do...
#foreach($allImages->skip(1) as $image)
<img src="{{ asset('merchants/images/products/' . $image->image) }}" alt="little picture">
#endforeach
This will skip the first record
You can do something like this to skip the first image in the array
#foreach($allImages as $image)
#if($loop->first){
#continue;
}
else{
<img src="{{ asset('merchants/images/products/' . $image->image) }}" alt="little picture">
}
#endforeach
I hope it is helpful for you
I am trying to display the first image from this array ["11.jpg","16.jpg"], the array is stored in a table column called images. I am writing
<img src="{{ asset('images/properties/'. $files->images) }}" class="">
in my blade.php
Nothing appears but it comes with this when I inspect the element
<img src="http://127.0.0.1:8000/images/properties/["11.jpg","16.jpg"]" class="">
I have also tried to display the first item in the array with this code, but the image doesn't appear.
How can I display the first image in blade.php.
<img src="{{ asset('images/properties/'. $files->images[0]) }}" class="">
Wow!!! i have found the solution.
The answer is to use json_decode() function.
<?php $property_images = json_decode($files->images);?>
<img src="{{ asset('images/properties/'. $property_images[0]) }}" class="">
Use array_first()
The array_first function returns the first element of an array
You have to store the array using json_encode. and while retriving just decode that data using json_decode.
<img src="{{ asset('images/properties/'. array_first(json_decode($files->images))) }}" />
I saved files(images) by DropzoneJS and I can get them everywhere I like, but my problem is how to edit them. I go to my products edit page I can see my image but have no idea how to edit them such as (delete some of them or add to them)
here is my code to get them:
public function edit($id)
{
$product = Product::findOrFail($id);
$images = DB::table('images')->where('imageable_id', '=', $product->id)->get();
// rest of codes
}
and I show my images in edit page like:
#foreach($images as $test)
<img src="{{url('/')}}/images/{{$test->name}}" alt="test" width="100" height="100">
#endforeach
screenshot
UPDATE
#linktoahref way works for me if I want to delete each of images, and he suggested to make new uploader for adding images into my product on edit page, not bad idea totally but it's not what I'm exactly looking for.
What I try to achieve is to use DropZone itself to return my exist
images of each product and be able to remove or add to it.
I read many questions,articles, etc. And I get that I have to use mockFile which i have no idea about it. Would be appreciate if someone can help me to get this done.
Thanks.
For DELETE, you could add a button next to the image that would fire the destroy method of the respective controller
#foreach($images as $test)
<img src="{{ url('/') }}/images/{{ $test->name }}" alt="test" width="100" height="100">
<a href="#" class="btn btn-danger"
onclick="event.preventDefault();
document.getElementById('image-{{ $test->id }}').submit();">
DELETE
</a>
<form id="image-{{ $test->id }}"
action="{{ route('images.destroy', ['id' => $test->id]) }}"
method="POST" style="display: none;">
{{ csrf_field() }}
{{ method_field('DELETE') }}
</form>
#endforeach
and handle the deletion of image in your ImageController's destroy method (or your custom controller's method, make sure the method types are same)
public function destroy(Image $image)
{
// Destroy the Image
Storage::delete($image->name);
// Redirect Back
return redirect()->back();
}
I have been learning "code" just over a year for a project i have and have got stuck on a particular function that i am trying to create for the user. I have lots of divs with different information being rendered from a database. Html and css looks great I have then created blade #sections to hold the info but struggling to add functionality.
#foreach($canal as $canal)
#section('water-left')
<img class="img-responsive" src="{{ asset('images/canals/' . $canal->image)}}">
#section('location')
<strong class="words myh4">{{$canal->name}}</strong>
#section('water-right')
<img class="img-responsive" src="{{ asset('images/canals/' . $canal->image)}}">
#endsection
#endsection
#endsection
#endforeach
I have paginated contents of database to 3 and am trying to attatch the id1 image to ('water-left'), the id2 name to ('location') and id3 image to('water-right') currently i get just id1 in all sections any help please my controller looks like this
public function getcanalimage()
{
$canal = Canal::paginate(3);
return view('waters.canal_fishing',compact('canal'));
}
any help would be much appreciated thanks.
Try to use foreach loop, because $canal is array with more one values and you need use a loop to show all them:
#section('water-right')
#foreach($canal as $item)
<img class="img-responsive" src="{{ asset('images/canals/' . $item->image)}}">
#endforeach
#endsection
It has been a while since the question was posted but, for anyone using Laravel 5.8, there seems to be an undocumented blade tag/directive called #overwrite.
So replacing #endsection with #overwrite should do the work.
#foreach($canal as $item)
#section('water-left')
<img class="img-responsive" src="{{ asset('images/canals/' . $canal->image)}}">
#section('location')
<strong class="words myh4">{{$item->name}}</strong>
#section('water-right')
<img class="img-responsive" src="{{ asset('images/canals/' . $item->image)}}">
#overwrite
#overwrite
#overwrite
#endforeach
I am working on the laravel 5.0. I am getting an error: "trying to get property of non-object".I want to get an image on the desired page by clicking on that particular image. There are so many images on the page, i just want after clicking on any image, it will be appear on the desired page.
here is my code:
My Routes:
Route::get('/image/big/{id}' ,[
'uses'=>'GalleryController#bigimage',
'as'=>'bigimage'
]);
My controller:
public function bigimage($id){
$images=image::findorFail($id);
return view('bigimage' , ['images'=>$images]);
}
My view from where i am calling the required Route:
#foreach($gallery->images as $image)
<li>
<a href="{{ URL('/image/big/'.$image->id) }}">
<img id="jumboimage2" src="{{ url($image->file_path) }}"></a>
</li>
<li>
<a href="{{ URL('/image/delete/'.$image->id) }}" id="margin">
<span id="margin" class="glyphicon glyphicon-remove-sign"></span></a>
</li>
#endforeach
My view where i want to get the required image:
<div class="row">
<section class="col-md-3">
#foreach($images as $image)
{{$image->id}}
#endforeach
</section>
</div>
try this one out
$image = image::findOrFail($id);
return view('bigimage' , ['image' => $image])
$images=image::findorFail($id); should be $images=image::findOrFail($id);.
findOrFail() returns a single model, i.e. one image, so I would have:
$image = image::findOrFail($id);
return view('bigimage' , ['image' => $image]);
You don't show where image:: comes from, however usually this is from a facade so is Image:: with a capital.
The view would then not have the #foreach loop as you'd only have a single image.
<div class="row">
<section class="col-md-3">
{{$image->id}}
</section>
</div>
You also need to elaborate on this to get from the id to an image but I'm assuming that's just not shown.
If you were able to give some detail about which line is causing the error this would make it easier to diagnose, as indicated by Maraboc there could be an issue with $gallery as well.