Display specific images with captions

What's your data look like? Can you post some code?

right now i am displaying all the incoming images and only some have captions.

 @foreach ($packages as $key => $package)
                
                <div class="carousel-item{{ $key == 0 ? ' active' : '' }}">
              
                    <img class="d-block w-100" src="{{ Storage::disk('local')->url('img/package/' . $package->image) }}">
                    <div class="carousel-caption d-none d-md-block">
                        <div class="container">
                            {!! $package->caption !!}
                            <a class="button-theme" href="{{ route('travel.itinerary', $package->slug) }}">learn more</a>
                        </div>
                    </div>
                </div>
                @endforeach

index.blade.php file

Use like this and check your controller function,

$packages = Packages::get()->toArray();
 
  {{ $package->caption }}

and you can get images like this as well,

          <img class="d-block w-100" src="{{ asset('img/package/' . $package->image) }}">

@munazzil ok, but I need to get only those images which have captions. Currently, I have stored captions for only 4 images and I have 8 total images. how do I get those 4 images with the captions??

Something like below you can try,

 {{ $package->image->caption }}

else you can get sort data from controller,

  $packages = Packages::pluck('images')->sortBy('caption')->get();

here is a tip for this forum

ignore anything @munazzil tells you

     @foreach ($packages as $key => $package)
            @if( $package->caption)
                <div class="carousel-item{{ $key == 0 ? ' active' : '' }}">
              
                    <img class="d-block w-100" src="{{ Storage::disk('local')->url('img/package/' . $package->image) }}">
                    <div class="carousel-caption d-none d-md-block">
                        <div class="container">
                            {!! $package->caption !!}
                            <a class="button-theme" href="{{ route('travel.itinerary', $package->slug) }}">learn more</a>
                        </div>
                    </div>
                </div>
          @endif
       @endforeach

and never use {!! !!} unless you REALLY know what you are doing and have previously sanitized the data

@snapey ok, I am using TinyMce to record the data so I had to use {!! !!} to get the exact format that I needed to display it in the page.

So did this work for you?

Regarding the {!! !!} - what happens if a user inserts javascript into the caption?

@snapey Sorry for the late reply, Ya that worked perfectly thanks for the help. Now I feel stupid that I couldn't think of such a simple solution.

no problems for the delay. Please mark it solved