I would like to show pictures on my website.
Here is the code of the view file :
#foreach($posts as $post)
<div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col">
<img src="{{asset("mvbimg/".$post->image)}}" >
<a href="/news/{{ $post->slug }}">
#if(!empty($post->image))
<img class="hover:grow hover:shadow-lg" src="{{ asset("mvbimg/".$post->image."")}}" alt="{{ $post->title }}">
#else
<img class="hover:grow hover:shadow-lg" src="https://www.example.com/img/nopic.jpg" alt="{{ $post->title }}">
#endif
<p style="text-align: center;">{{ $post->title }}</p></a>
</div>
#endforeach
And this is the frontend :
This is an URL of a picture upload on the server :
http://127.0.0.1:8000/mvbimg/202204171949lbc1.jpg
And this is my directory :
Related
i am trying to display an image which is located in storage/app/uploads. I already run the "php artisan storage:link" command and it was a success but its still not showing. When i also inspect the code in the browser the image is there together with the path. 'Upload' is linked to the image path.
#foreach($user->posts as $post)
<div class="col-4">
<img class="w-100" src="/storage/{{ $post->image }}">
</div>
#endforeach
Try this solution:
use asset(), its get files from public folder
#foreach($user->posts as $post)
<div class="col-4">
<img class="w-100" src="{{ asset('images/' . $post->image) }}">
</div>
#endforeach
you have 2 options either use the direct url or asset method--
#foreach($user->posts as $post)
<div class="col-4">
<img class="w-100" src="{{ asset(yourpath) }}">
</div>
#endforeach
OR
#foreach($user->posts as $post)
<div class="col-4">
<img class="w-100" src="{{ url(yourpath) }}">
</div>
#endforeach
your path would be after the storage directory in public directory.
I'm sorry I do not know how to word this question. I'm new to Laravel and I want to either show a photo(s) or if there are no photos I want to show a placeholder. This works but there must be a better way to do it than this.
#foreach ($items as $item)
<?php $totalpics=0; ?>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
#if(! empty($item->photos) )
#foreach ( $item->photos as $photo )
#if ($photo->photo)
<img src="/storage/images/small/{{ $photo->photo }}" class="card-img-top" alt="{{ $item->name }}">
<?php $totalpics++; ?>
#endif
#endforeach
#if(1 > $totalpics)
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="{{ $item->name }}">
#endif
You want to achieve a for loop and an optional statement for when there is nothing to show in the for loop.
Laravel uses the forelse loop for this (see all blade loops in the documentation).
A basic forelse could be:
#forelse($items as $item)
{{$item}}
#empty
There are no items to display
#endforelse
Above code is pseudo code and would not actually run
Which would render as either all the items or as the text There are no items to display.
In your case you could use:
#forelse($items as $item)
<div class="col-md-4">
<div class="card mb-4 box-shadow">
#forelse ( $item->photos as $photo )
#if ($photo->photo)
<a href="/storage/images/large/{{ $photo->photo }}">
<img src="/storage/images/small/{{ $photo->photo }}" class="card-img-top" alt="{{ $item->name }}">
</a>
#endif
#empty
<a href="/items/{{ $item->id }}">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="{{ $item->name }}">
</a>
#endforelse
</div>
</div>
#endforeach
Side note, this will not render any photos if there is a photo model attached to your item but the photo model does not have the photo property set, i.e. the for loop will be used but the if statement will fail.
You can do
#foreach ($items as $item)
<div class="col-md-4">
<div class="card mb-4 box-shadow">
#unless($item->photos)
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="{{ $item->name }}">
#else
#foreach ( $item->photos as $photo )
#if ($photo->photo)
<img src="/storage/images/small/{{ $photo->photo }}" class="card-img-top" alt="{{ $item->name }}">
#endif
#endforeach
#endunless
There is another way to do that in laravel 5.3+ by using
#forelse($item->photos as $photo)
<img src="/storage/images/small/{{ $photo->photo }}" class="card-img-top" alt="{{ $item->name }}">
#empty
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="{{ $item->name }}">
#endforelse
So I'm building my first blog, and I'd like to dynamically show to posts on my landing page. I want the layout to become like this (might be a little weird):
post-image - post-preview
post-preview - post-image
post-image - post-preview
This is what I have right now to show to blog posts:
#foreach($posts as $post)
<div class="col-sm-4">
<a href="/post/{{ $post->slug }}">
<img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">
<span>{{ $post->title }}</span>
</a>
</div>
#endforeach
web.php (route):
$posts = App\Post::take(3)->orderBy('created_at')->get();
return view('welcome', compact('posts'));
Now as I'd like to make the layout dynamically. I think I can do this by checking if the ID even or odd. However I have no idea on how to do this even when I've searched 50% of the web already :) .
If there is a better way on doing this just let me know! Greatly appreciated guys!
Yes you can do it by checking if current post or loop iteration is odd or even. (https://laravel.com/docs/5.5/blade#the-loop-variable) For Odd loop iteration, you can write image code first and in even loop iteration you can write preview code first to achieve your desired layout. You can check the following code:
#foreach($posts as $post)
<div class="row">
#if( $loop->iteration % 2 == 0 )
<div class="col-md-4">
<a href="/post/{{ $post->slug }}">
<img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">
</a>
</div>
<div class="col-md-8">
<span>{{ $post->title }}</span>
</div>
#else
<div class="col-md-8">
<span>{{ $post->title }}</span>
</div>
<div class="col-md-4">
<a href="/post/{{ $post->slug }}">
<img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">
</a>
</div>
#endif
</div>
#endforeach
Ok I guess I got your question. so there is no direct solution but you can measure inside your for loop by adding extra variable such as:
<?php $inc = 0;?>
#foreach($posts as $post)
<div class="col-sm-4">
<a href="/post/{{ $post->slug }}">
#if($inc%2 == 0)
<img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">
<span>{{ $post->title }}</span>
#else
<span>{{ $post->title }}</span>
<img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">
#endif
<?php $inc++;?>
</a>
</div>
#endforeach
Or you can use for loop instead of foreach of loop and inside for loop you can check variable i.e. i is odd or even.
I am trying to add and display a image from mysql database stored in BLOB type in my web App, but while using {{ Auth::user()->profile_pic }} getting errors, can someone tell me what mistake i am doing and how to do this using laravel 5.
dashboard.blade.php
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Profile</div>
<div class="panel-body">
<img src="{{ Auth::user()->profile_pic }}" class="img-circle" width="200" height="200">
<h3>{{ Auth::user()->name }}</h3>
<h5>{{ Auth::user()->email }}</h5>
<hr>
<h6>{{ Auth::user()->created_at }}</h6>
</div>
</div>
</div>
<div class="col-md-9">
</div>
</div>
</div>
#endsection
The html <img src="{{ Auth::user()->profile_pic }}" class="img-circle" width="200" height="200"> needs address url instead of {{ Auth::user()->profile_pic }}
Add code in route first get the address using response object
Route::get('/' function($user) {
$Image = Auth::user()->profile_pic;
return response($Image)->header('Content-Type', 'image/jpeg');
}
then now pass address of response to the html element
Route::get('/dashboard', function() {
$id = Auth::user()->id;
$Image_url = "user/$id/profile-pic";
return view('/dashboard', ['Image_url' => $Image_url]);
}
Passing address in blade
<img src="{{ $Image_url }}" class="img-circle" width="200" height="200">
I need your help. Here is my template file. How can I make to work that template? Main problem is that I don't know how to change div class values. Now I can make working only <div class="thumb-left"> but I also need <div class="thumb-middle"> and <div class="thumb-right">.
Thank you.
#extends('_layouts.main')
#section('content')
<div id="content-section">
#foreach ($uploads as $upload)
<div class="thumb-left">
<img alt="{{ $upload->image_title }}" title="{{ $upload->image_title }}" src="/files/images/{{ $upload->imagefile }}" height="250" width="300">
<div class="thumb-info">
{{ $upload->image_title }}
<a class="cat" href="#">PHOTOS</a>
</div>
</div>
#endforeach
<div class="thumb-middle">
<img alt="sunset" title="Sunset HDR" src="img/thumb.jpg" height="250" width="300">
<div class="thumb-info">
{{ $upload->image_title }}
<a class="cat" href="#">PHOTOS</a>
</div>
</div>
<div class="thumb-right">
<img alt="sunset" title="Sunset HDR" src="img/thumb.jpg">
<div class="thumb-info">
City Sunset HDR
<a class="cat" href="#">PHOTOS</a>
</div>
</div>
</div>
#stop
You could do:
#foreach ($uploads as $upload)
<div class="thumb-{{ array('left', 'middle', 'right')[($loop->iteration-1)%3] }}">
<img alt="{{ $upload->image_title }}" title="{{ $upload->image_title }}" src="/files/images/{{ $upload->imagefile }}" height="250" width="300">
<div class="thumb-info">
{{ $upload->image_title }}
<a class="cat" href="#">PHOTOS</a>
</div>
</div>
#endforeach
The $loop variable is a build in blades variable - check the docs:
When looping, a $loop variable will be available inside of your loop.
This variable provides access to some useful bits of information such
as the current loop index and whether this is the first or last
iteration through the loop. For instance: $loop->iteration - the current loop
iteration (it starts at 1).
You probably want to change your foreach to also use a key, so you can know at which index in your array you are:
<div id="content-section">
#foreach ($uploads as $index => $upload)
<div class="thumb-left">
<img alt="{{ $upload->image_title }}" title="{{ $upload->image_title }}" src="/files/images/{{ $upload->imagefile }}" height="250" width="300">
<div class="thumb-info">
{{ $upload->image_title }}
<a class="cat" href="#">PHOTOS</a>
</div>
</div>
#endforeach
</div>
Now, if I understand properly, what you're looking for is to switch from thumb-left, to thumb-middle and then finally thumb-right, and then loop again. You could use modulo to assign your class name based on the current index. This is untested code but you could probably use something along the lines of:
<div id="content-section">
{{ $classnames = array("thumb-left", "thumb-middle", "thumb-right"); }}
#foreach ($uploads as $index => $upload)
<div class="{{ $classnames[$index % count($classnames)] }}">
<img alt="{{ $upload->image_title }}" title="{{ $upload->image_title }}" src="/files/images/{{ $upload->imagefile }}" height="250" width="300">
<div class="thumb-info">
{{ $upload->image_title }}
<a class="cat" href="#">PHOTOS</a>
</div>
</div>
#endforeach
</div>