CODEWITHSUNDEEP
phpsqllaravelimage
Milos
Milos

Reputation: 612

Laravel - multiple images explode/implode

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
                    <a href="/products/create" class="btn btn-primary" style="margin-left: 70%">New product +</a></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!

Upvotes: 1

Views: 2505

Answers (3)

Waqas Altaf
Waqas Altaf

Reputation: 392

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.

Upvotes: 0

Abhishek Honrao
Abhishek Honrao

Reputation: 835

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%">

Upvotes: 2

Tarek Adam
Tarek Adam

Reputation: 3525

{{ explode('|', $product->images)[0] }}

However, I'd recommend taking a look at Laravel's ORM HasMany relationship when you have time.

Upvotes: 1

Related Questions