Laravel - multiple images explode/implode - php

Question

I have project with multiple images and it is all working fine. All I want is to have just one image in products.blade.php and all images on productshow.blade.php. So this is my ProductsController:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Product;
class ProductsController extends Controller
{
/**
* Display a listing of the resource.
*
* #return \Illuminate\Http\Response
*/
public function index()
{
$products = Product::all();
return view('products')->with('products', $products);
}
/**
* Show the form for creating a new resource.
*
* #return \Illuminate\Http\Response
*/
public function create()
{
return view('createprod');
}
/**
* Store a newly created resource in storage.
*
* #param \Illuminate\Http\Request $request
* #return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$input=$request->all();
$images=array();
if($files=$request->file('images')){
foreach($files as $file){
$name=$file->getClientOriginalName();
$file->move('storage/image',$name);
$images[]=$name;
}
}
/*Insert your data*/
Product::insert( [
'images'=> implode("|",$images),
'title' =>$input['title'],
//you can put other insertion here
]);
return redirect('/products');
}
/**
* Display the specified resource.
*
* #param int $id
* #return \Illuminate\Http\Response
*/
public function show($id)
{
$product = Product::find($id);
return view('productshow')->with('product', $product);
}
/**
* Show the form for editing the specified resource.
*
* #param int $id
* #return \Illuminate\Http\Response
*/
public function edit($id)
{
//
}
/**
* Update the specified resource in storage.
*
* #param \Illuminate\Http\Request $request
* #param int $id
* #return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
}
/**
* Remove the specified resource from storage.
*
* #param int $id
* #return \Illuminate\Http\Response
*/
public function destroy($id)
{
//
}
}
And this is my products.blade.php:
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">All products
New product +</div>
<hr>
<div class="card-body">
#foreach($products as $product)
<h2>{{$product->title}}</h2>
#foreach (explode('|', $product->images) as $image)
<br>
<a class="image-popup-vertical-fit" href="/storage/image/{{$image}}">
<img src="/storage/image/{{$image}}" style="width:100%">
</a>
#endforeach
<br>
<hr style="border: 1.5px solid grey">
#endforeach
<small><?php echo now() ?></small>
</div>
</div>
</div>
</div>
</div>
#endsection
So in my products.blade.php all images are showing(explode) but I only need to show one image, for example first image. How can I do that? I'm not so good at multiple images. Please help! Thanks!

Answer 1

As you said you just wanted to display a first image from set.
In your products.blade.php instead of #foreach use -
#php $img = explode('|', $product->images); #endphp
Remove -
#foreach (explode('|', $product->images) as $image)
<br>
<a class="image-popup-vertical-fit" href="/storage/image/{{$image}}">
<img src="/storage/image/{{$image}}" style="width:100%">
</a>
#endforeach
And add
<img src="/storage/image/{{$img[0]}}" style="width:100%">

Answer 2

{{ explode('|', $product->images)[0] }}
However, I'd recommend taking a look at Laravel's ORM HasMany relationship when you have time.

Answer 3

It looks like you are saving multiple images in one column?
That's not good approach. make a new model of product images with product as foreign key and save images there and get using Relationship.
** For Now ** you can do this
#foreach($products as $product)
<h2>{{$product->title}}</h2>
<?php
$allImages=explode('|', $product->images)
?>
<br>
<a class="image-popup-vertical-fit" href="/storage/image/{{$allImages[0]->images}}">
<img src="/storage/image/{{$allImages[0]->images}}" style="width:100%">
</a>
<br>
<hr style="border: 1.5px solid grey">
#endforeach
after converting to array, get first index [0] of array instead of looping it.