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">
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.
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%;
}
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/portfolio/1.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category:-
</div>
<div class="project-name">
Mobile
</div>
</div>
</div>
</a>
</div>
//1.jpg image is appearing in the view i want to switch to another view after clicking on this image.
You can achieve this with css:
#my-div{
background-color: #000;
width: 200px;
height: 200px }
a.fill-div {
display: block;
height: 100%;
width: 100%;
text-decoration: none}
<div class="col-lg-4 col-sm-6" id="my-div">
the rest of it.
</div>
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.
I use the following code:
.contain {
max-width: 960px;
text-align: center;
}
.category {
position: relative;
display: inline-block;
float: left;
padding: 10px;
}
<div align="center" class="category">
<img src="img/Tariffs-Booking-Icon.png" style="width:100; height:60px;margin-right: 124px;" />
</div>
<div align="center" class="category">
<img src="img/driver_icon.jpg" style="width:100; height:100px;margin-right:124px;" />
</div>
<div align="center" class="category">
<img src="img/user.png" style="width:100; height:100px" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;margin-left:58px;" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;" />
</div>
I am unable to display three images in one rows and in second row next three images.
but i got the images in one rows. so there is any possibility to show images like as in one
row 1 2 3 and second row 4 5 6 images.
Thanks and regards
Add clear: left; to .category:nth-child(4)
JSFiddle - DEMO
.category:nth-child(4) {
clear: left;
}
The clear CSS property specifies whether an element can be next to
floating elements that precede it or must be moved down (cleared)
below them. - by Mozilla MDN
The easiest way would be to have one div for each row and each div having just those 3 images inside them.
<div align="center" class="category">
<img src="img/Tariffs-Booking-Icon.png" />
<img src="img/driver_icon.jpg" />
<img src="img/user.png" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" />
<img src="img/abuse.jpg" />
<img src="img/abuse.jpg" />
</div>
See it here: http://jsfiddle.net/vj4kLdjh/1/
A slightly better approach would be to wrap each row into another div what would have display set to block (default) and the inside divs should either lose the float, or you need to add a clear:both element to the end of each row.
<div class="row>
<div align="center" class="category">
<img src="img/Tariffs-Booking-Icon.png" />
</div>
<div align="center" class="category">
<img src="img/driver_icon.jpg" />
</div>
<div align="center" class="category">
<img src="img/user.png" />
</div>
</div>
<div class="row>
<div align="center" class="category">
<img src="img/abuse.jpg" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" />
</div>
</div>
See it here: http://jsfiddle.net/vj4kLdjh/2/
I've marked the rows with a red border in both cases. I've also removed the inline styling in my answer, and I suggest you do the same in your code. Define classes for those elements and avoid inline styling whenever possible.
This will do exactly what you need - 2 rows containing 3 pictures each to 960px (Which you can of course modify). Don't forget that the child element (category) is width + padding(x2) for actual width - in this case, 320px each.
CSS:
div.contain {
width:960px;
}
# Each div takes 320px (times 3 is 960px)
div.category {
display: inline-block;
padding:5px;
width: 310px;
}
Then
<div class="contain">
<div class="category"># image 1</div>
<div class="category"># image 2</div>
<div class="category"># image 3</div>
</div>
<div class="contain">
<div class="category"># image 4</div>
<div class="category"># image 5</div>
<div class="category"># image 6</div>
</div>
You have to add a wrapper div to each row as:
.row_wrap {
width: 100%;
display: inline-block;
}
.contain {
max-width: 960px;
text-align: center;
}
.category {
position: relative;
display: inline-block;
float: left;
padding: 10px;
}
<div class="row_wrap">
<div align="center" class="category">
<img src="img/Tariffs-Booking-Icon.png" style="width:100; height:60px;margin-right: 124px;" />
</div>
<div align="center" class="category">
<img src="img/driver_icon.jpg" style="width:100; height:100px;margin-right:124px;" />
</div>
<div align="center" class="category">
<img src="img/user.png" style="width:100; height:100px" />
</div>
</div>
<div class="row_wrap">
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;margin-left:58px;" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;" />
</div>
</div>
Hope this helps
div{
width: 400px;
}
div>img{
width: 100px;
float: left;
}
div>img:nth-child(3n+1){
clear: left;
}
<div>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
</div>