Let’s say I have a foreach post that shows the last 5 posts, and I would like to position them as the boostrap featurette (with text and image changing To left and right side: example: https://getbootstrap.com/docs/4.0/examples/carousel/
i tried but it's not display well and not responsive. so if you have time, pls help.
<div class="container">
#foreach($posts as $post)
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">{{ $post->title }}</h2>
<p class="lead">{{ $post->title }}</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-fluid mx-auto" src="{{ asset('assets/img/laptop-1385702_1920.jpg') }}" alt="Generic placeholder image">
</div>
</div>
<br>
#endforeach
</div>
--> not working : result
Related
I'm developing a website like instagram in laravel
everything was going fine until i implemented the foreach command
this is my code:
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-3 p-5">
<img src="/images/simbolomax.jpg" class="rounded-circle">
</div>
<div class="col-9 pt-5">
<div class="d-flex justify-content-between align-items-baseline">
<h1 class="p-2">{{ $user->username }}</h1>
Aiciona nova receita
</div>
<div class="d-flex">
<div class="pe-5"><strong>153</strong> receitas</div>
<div class="pe-5"><strong>23k</strong> seguidores</div>
<div class="pe-5"><strong>212</strong> seguindo</div>
</div>
<div class="pt-4">{{ $user->profile->description }}</div>
</div>
</div>
<div class="row pt-5">
#foreach($user->posts as $post)
<div class="col-4">
<img src="/storage/{{$post->image}}" class="w-100" style="height:100%">
</div>
#endforeach
</div>
</div>
#endsection
and the error is: Invalid argument supplied for foreach() (View: C:\projetos\easymeal\resources\views\profiles\index.blade.php)
I can't figure out, send help!
If there is a user with no posts... There goes ERROR. So.... Check user for posts before #foreach.
#if(count($user->posts)>0).... #foreach
Try this
#if ($user->posts->isNotEmpty())
#foreach ($user->posts as $item)
<div class="col-4">
<img src="/storage/{{$post->image}}" class="w-100" style="height:100%">
</div>
#endforeach
#endif
I can't find the error, my categories are not shown according to their type, also does not throw laravel error..
blade.php
#extends('store.template')
#section('content')
<!-- Page Content -->
<div style="margin-top: 70px;" class="container text-center">
<!-- Page Heading -->
<div class="card bg-white ht-50 w-60">
<h1 class="">{{$tipo->tipo}}</h1>
</div>
<div style="margin-top: 10px;" class="row">
#foreach($categories as $category)
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="#">
#if(!empty($category->image))
<img class="card-img-top" src="{{url($category->image)}}" alt="">
#else
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
#endif
</a>
<div class="card-body">
<h4 class="card-title">
{{$category->name}}
</h4>
<p class="card-text">{{$category->descripcion}}</p>
</div>
</div>
</div>
#endforeach
</div>
<!-- /.row -->
</div>
<!-- /.container -->
#stop
controller:
public function categoryType($type)
{
$tipo = Tipo::where('tipo',$type)->first();
//dd($tipo->categories);
return view('store.categories-types')->with(['categories'=>$tipo->categories,'tipo'=>$tipo]);
}
in the table categories_type defined the categories
table categories:
error:
I have this:
#foreach($portfolios as $portfolio)
<div id="item-portfolio-expand{{$portfolio->id}}" class="item-portfolio-expand expand">
<div class="container">
<div class="row">
<div class="col-md-8">
col-md-8
</div>
<div class="col-md-4">
{{ __('Name')}}: {{ $portfolio->name }}
</div>
</div>
</div>
</div>
#endforeach
And this:
#foreach ($portfolios as $portfolio)
<div class="portfolio-item {{ $portfolio->tag }} " data-category="transition">
<img src="{{ $portfolio->image_show }}">
<a href="#item-portfolio-expand{{$portfolio->id}}" data-toggle="collapse" data-target="#item-portfolio-expand{{$portfolio->id}}" data-parent="#item-portfolio-expand{{$portfolio->id}}">
<div class="portfolio-item-overlay">
<p class="name-item-overlay">{{ $portfolio->name }}</p>
</div>
</a>
</div>
#endforeach
And when I press the in the first foreach, I want to toggle the second foreach at <div id = "item-portfolio-expand {{$ portfolio-> id}}" class = "item- portfolio-expand expand "> I just don't succeed at anything, I use bootstrap and jquery in the project. .item-portfolio-expand has display: none;
And at the same time when one is open and another is selected, to close the one already open and to appear the one selected with toggle.
Trying to loop through my database and to post a bootstrap card for each "board member" in my database. However, with my current code, they post on top of each other, and I need them in rows. Here is my current code.
<div class="row">
<div class="col-sm-4 my-4">
#if(count($boardMembers) > 0)
#foreach($boardMembers as $boardMember)
<div class="card">
<img class="card-img-top" src="img/user1.jpg" alt="">
<div class="card-body">
<h2 class="card-title">{{$boardMember->name}}</h2>
<p class="card-text">{!!$boardMember->description!!}</p>
</div>
</div>
#endforeach
#else
<p>No Members Found</p>
#endif
</div>
</div>
You need to loop the .col part:
#if(count($boardMembers) > 0)
#foreach($boardMembers as $boardMember)
<div class="col-sm-4 my-4">
<div class="card">
<img class="card-img-top" src="img/user1.jpg" alt="">
<div class="card-body">
<h2 class="card-title">{{$boardMember->name}}</h2>
<p class="card-text">{!!$boardMember->description!!}</p>
</div>
</div>
</div>
#endforeach
#else
<p>No Members Found</p>
#endif
This will create multiple .cols with .cards but make sure you style the <p>No Members Found</p> or you can make it inside a .col too
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