This is what I want to achieve:
But this is the result I get:
The img and text are inserted from the DB. This is the code:
<div class="row" style="margin-top: 8rem;">
#foreach ($rooms as $room)
<div class="col-4" data-category="{{ $room->data_category}}">
<a href="#zoomImg{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#zoomImg{{ $room->id }}">
<img src="{{ $room->img }}" alt="" class="img-fluid">
</a>
<div class="text-left mt-3 mb-5">
<p class="product-subtitle">{{ $room->name }}</p>
<h4 class="product-title">Shop the Look</h4>
<a class="product-price-link" href="#getPriceByRoom{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#getPriceByRoom{{ $room->id }}">get price</a>
</div>
</div>
#endforeach
</div>
I tried positioning the #foreach in a different way and still could't get the result I wanted. Any suggestions?
Found a solution to the layout on this article
.masonry-container {
column-count: 3;
column-gap: 15px;
}
.masonry-item {
display: inline-block;
width: 100%;
}
.masonry-item img {
display:block;
width: 100%;
}
Related
I'm using Bootstrap's 5 card and Laravel to make a car card. When I try to make a row with cards, the image shrinks. If I remove the "row" class, its image fits perfectly. ¿How can I solve this issue?
<h1>Vehículos</h1>
<div class="row">
#foreach ($autos as $auto)
<div class="card" style="width: 18rem; border-radius: 25px;">
<a href="{{ URL('auto/'.$auto->id)}}">
<img src="{{ URL('images/'.$auto->foto)}}" class="card-img-top" alt="..." style="border-top-right-radius: 25px; border-top-left-radius: 25px;">
</a>
<div class="card-body">
<h5 class="card-title">{{$auto->marca." ".$auto->modelo}}</h5>
<p class="card-text">
Año: {{$auto->año}}
Kilometros: {{$auto->kilometros}}
Motor: {{$auto->motor}}
Combustible: {{$auto->combustible}}
Precio: $ {{$auto->precio}}
</p>
</div>
</div>
#endforeach
</div>
</div> ```
[1]: https://i.stack.imgur.com/TviHn.png
I had to reproduce the error on my own end and I found the issue. When using a bootstrap row , you have to add columns using the col class. So change your code to this
<h1>Vehículos</h1>
<div class="row">
#foreach ($autos as $auto)
<div class="col">
<div class="card" style="width: 18rem; border-radius: 25px;">
<a href="{{ URL('auto/'.$auto->id)}}">
<img src="{{ URL('images/'.$auto->foto)}}" class="card-img-top" alt="..." style="border-top-right-radius: 25px; border-top-left-radius: 25px;">
</a>
<div class="card-body">
<h5 class="card-title">{{$auto->marca." ".$auto->modelo}}</h5>
<p class="card-text">
Año: {{$auto->año}}
Kilometros: {{$auto->kilometros}}
Motor: {{$auto->motor}}
Combustible: {{$auto->combustible}}
Precio: $ {{$auto->precio}}
</p>
</div>
</div>
</div>
#endforeach
</div>
</div>
This would fix the issue of the image being shrinked.
SIDENOTE: Do note that the bootstrap col class has prefixes to make it adapt to different screens. You can check out the docs for more info.
i try to show up image in blade file, but the image wont show, i wrote the rigth link but still not show
here is my code
#if ($post->image == 'NULL')
<!-- foto usahakan di crop 3x2 landscape-->
<a href="{{ route('showpost', $post->slug) }}" class="mb-4 d block">
<img style="width: 400px; height: 240px; overflow: hidden;"
src="https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg"
alt="Image" class="img-fluid">
</a>
#else
<a href="{{ route('showpost', $post->slug) }}" class="mb-4 d-block">
<img style="width: 400px; height: 240px; overflow: hidden;"
src="{{ $post->image_url }}" alt="Image" class="img-fluid">
</a>
#endif
anyone know what is the problem?
if you already done php artisan storage:link command so type your path in src like -:
<img style="width: 400px; height: 240px; overflow: hidden;" src="{{Storage::url('your_path/'.$post->image}}" alt="Image" class="img-fluid">
I have a script when I display all what is in collection, I use foreach. One of all collection you can delete clicking specific button, but the problem is you can click collection with ID 17 and it will delete first existing collection, even with id = 1. I do not know what to do because i think that everything looks ok. When I dump controller I see first existing collection id. I mean that moment -> ReviewAnswerController#destroy in code
Can you help me?
#foreach($data->reviewAnswers as $answer)
<div class="row">
<div class="col-md-12" style="position: inherit; display: flow-root; float: right; background: #94969f; margin-top: 15px; margin-right: 15px; padding: 5px; border-radius: 5px; width: 80%; color: white; padding-bottom: 3px;">
<div class="col-md-1">
<?php $avAnswer = App\Models\UserData::where('user_id', $data->sender_id)->first() ?>
#if(empty($avAnswer->avatar))
<img src="{{ asset('img/lock_thumb.jpg')}}" style="width: 50px; height: 50px; border: 2px solid white;border-radius: 50%;">
#else
<img src="{{ asset('/storage/uploads/avatars/'. $av->avatar) }}" style="width: 50px; height: 50px; border: 2px solid white;border-radius: 50%;">
#endif
</div>
<div class="col-md-5">
<div style="float: left;">
{{$answer->id}}
<b>{{$answer->sender_name}} {{$answer->sender_surname}}</b> |
#if($answer->sender_role_specific)
{{$answer->sender_club_role}} ({{$answer->sender_role_specific}})
#else
{{$answer->sender_club_role}}
#endif
</div>
</div>
<div class="col-md-5"></div>
<div class="col-md-1">
#if(Auth::user()->role == 'admin')
<form id="reviewAnswerForm" action="{{ action('ReviewAnswerController#destroy', $answer->id) }}" method="POST">
{{ method_field('DELETE') }} {{ csrf_field() }}
<button class="btn" style="background-color:transparent; float: right;">
<img src="{{ asset('img/review-icons/delete.png')}}" style="float: right;"/>
</button>
</form>
#endif
</div>
<div class="col-md-11" style="border-top: 1px solid; padding-bottom: 5px;">
<p>{{$answer->answer}}</p>
<button class="btn" style="background-color:transparent; float: right;" data-toggle="modal" data-target="#modalreportanswer">
<img src="{{ asset('img/review-icons/report.png')}}" style="width: 15px; height: 15px; float: right; margin-top: 10px;">
</button>
<div class="modal fade" id="modalreportanswer" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">#lang('main.report')</h4>
</div>
<div class="modal-body">
<form action="{{ action('ReviewAnswerReportController#store') }}" method="POST" class="">
{{ csrf_field() }}
<div class="form-group">
<label for="comment">#lang('main.reason'):</label>
<textarea id="text" class="form-control noresize" rows="5" name="reason"></textarea>
<h6 class="pull-right" id="count_message"></h6>
</div>
<div class="form-group">
<input type="hidden" class="form-control" value="{{ $answer->id }}" name="reviewAnswerId">
</div>
<button class="btn btn-primary" type="submit">#lang('main.report')!</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
In your code you have 2 method, POST and DELETE in the same Form
<form id="reviewAnswerForm" action="{{ action('ReviewAnswerController#destroy', $answer->id) }}" method="POST">
{{ method_field('DELETE') }} {{ csrf_field() }}
Try with this , I use Laravel Collective , it is very clear.
Route::delete('answer/{id}', ['as' => 'reviewAnswer.destroy', 'uses' => 'ReviewAnswerController#destroy'] );
#if(Auth::user()->role == 'admin')
{!! Form::open(['method' => 'DELETE','route' => ['reviewAnswer.destroy',
$answer->id, ] ]) !!}
#endif
I'm currently working on a photo gallery index.
How can I make it so that my loop iterates all 4 columns and then proceeds making a new row?
This is my code:
<div class="row">
#foreach($photoGalleries as $photoGallery)
<div class="col-md-3">
<a href="{{ url('/photogalleries/' . $photoGallery->id) }}">
<img class="img-fluid" style="height: 200px; width: 200px;" src="/images/{{ $photoGallery->cover_image }}">
</a>
<h3>{{ $photoGallery->name }}</h3>
</div>
#endforeach
</div>
Now as you can imagine, it'll appear like this:
Alternative solution:
Add margin-top after the col-md-3 attribute, like so:
<div class="col-md-3" style="margin-top: 20px;">
</div>
$collectionOne = $photoGalleries->chunk(4);
#foreach($collectionOne as $collectionTwo)
<div class "row" >
#foreach($collectionTwo as $photoGallery)
<div class="col-md-3">
......
</div>
#endforeah
</div>
#endforeach
The problem here is that red marked news ARE THE SAME. And what I want to do here is to make sure that the new posts wont repeat themselves. Because now as you can see the same posts shows up two times before another is posted.
This is the code:
#extends('app')
#section('content')
<div class="row">
<div class="col-xs-12 col-sm-9">
#if(count($latest))
<div class="col-md-12">
<a href="/post/{{$latest->slug}}/{{$latest->id}}">
<img class="img-responsive" src="{!! url($latest->image) !!}" alt="" style="padding: 0px; height: 400px; width: 720px"></a>
<h2 class="post" style="margin-top: 0; color: #666">
#foreach($latest->category as $cat)
<a style="color: red; text-transform: uppercase; font-size: 13px" href="/categories/{{$cat->name}}">{{$cat->name}}</a>
#endforeach
<br>{!! strip_tags(link_to_action('PostsController#show', $latest->title, [$latest->slug, $latest->id])) !!}</h2>
<span style="color: #b8b8b8">Paskeblta {{$latest->created_at}}</span>
<hr>
</div>
#else
<p>Nėra naujienų</p>
#endif
<div class="row">
#foreach($posts as $post)
<div class="col-xs-6 col-lg-6">
<a href="/post/{{$post->slug}}/{{$post->id}}">
<img class="img-responsive" style="width: 352px; height: 180px" src="{!! url($post->image) !!}" alt=""></a>
<h3 class="post" style="font-size: 1.4em; margin-top: 0; color: #666"><small style="color: red; text-transform: uppercase; font-size: 11px">
#foreach($post->category as $cat)
{{$cat->name}}
#endforeach
</small><br>{{strip_tags($post->title)}}</h3>
<span style="color: #b8b8b8">Paskelbta {{$post->created_at}}</span>
<br><br>
</div><!--/.col-xs-6.col-lg-4-->
#endforeach
</div><!--/row-->
</div><!--/.col-xs-12.col-sm-9-->
#include('comp.sidebar')
</div><!--/row-->
<hr>
#stop
You could add a check in the loop: if the current post is the same as the featured one, ignore it.
#foreach($posts as $post)
#unless ($post == $latest)
// rest of html goes here
#endunless
#endforeach
If the objects aren't actually the same objects, just change the check accordingly - e.g. #unless ($post->id == $latest->id) or similar.