i would have the class "opacity" inserted only at the first "carousel-cell".
For the rest in the loop, they should not be there.
<div class="main-carousel">
#foreach($projects as $p)
#if($p->getMedia('teaser')->first() ?? "")
<div class="carousel-cell">
<div class="row">
<div id="project-info" class="col-lg-3 text-md-right pr-md-5 project-info">
<div class="project opacity">
<h2 class="project-title mb-0">{{$p->name}}</h2>
<h3 class="project-category">Foto / Video Produktion</h3>
</div>
</div>
<div class="col-lg-9 project-img opacity">
<a href="{{url('projects')}}/{{$p->slug}}">
<div class="start-teaser">
<img src="{{asset('storage')}}/{{$p->getMedia('teaser')->first()->id}}/{{$p->getMedia('teaser')->first()->file_name}}" alt="Land Rover">
</div>
</a>
</div>
</div>
</div>
#endif
#endforeach
</div>
You could use the $loop->first variable to add a class only on the first iteration of the loop.
Like this: <div class="carousel-cell {{ $loop->first ? 'opacity' : '' }}">
See more here:
https://laravel.com/docs/9.x/blade#the-loop-variable
Related
I am a total amateur on Laravel and I am trying to find a way to display by default a specific category with it's services instead of showing ALL the services for alla the categories that exist.
<section class="categories sp-80-50 bg-dull">
<div class="container">
<div class="row">
<div class="col-12">
<div class="all-title">
<p>#lang('front.categoriesTitle')</p>
<h3 class="sec-title">
#lang('front.categories')
</h3>
</div>
</div>
</div>
<div id="categories" class="row justify-content-center">
#foreach ($categories as $category)
#if($category->services->count() > 0)
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 mb-30 categories-list" data-category-id="{{ $category->id }}">
<div class="ctg-item" style="background-image:url('{{ $category->category_image_url }}')">
<a href="javascript:;">
<div class="icon-box">
<i class="flaticon-fork"></i>
</div>
<div class="content-box">
<h5 class="mb-0">
{{ ucwords($category->name) }}
</h5>
</div>
</a>
</div>
</div>
#endif
#endforeach
</div>
</div>
</section> */
<section class="listings sp-80 bg-w">
<div class="container">
<div class="row">
<div class="col-12">
<div class="all-title">
<p> #lang('front.servicesTitle') </p>
<h3 class="sec-title">
#lang('front.services')
</h3>
</div>
</div>
</div>
<div id="services" class="row">
#foreach ($services as $service)
<div class="col-lg-3 col-md-6 col-12 mb-30 services-list service-category-{{ $service->category_id }}">
<div class="listing-item">
<div class="img-holder" style="background-image: url('{{ $service->service_image_url }}')">
<div class="category-name">
<i class="flaticon-fork mr-1"></i>{{ ucwords($service->category->name) }}
</div>
</div>``
and
var categories = `
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 mb-30 categories-list">
</div>`;
response.categories.forEach(category => {
if (category.services.length > 0) {
var url = category.category_image_url;
categories += `
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-4 col-12 mb-30 categories-list" data-category-id="${category.id}">
<div class="ctg-item" style="background-image:url('${url}')">
<a href="javascript:;">
<div class="icon-box">
<i class="flaticon-fork"></i>
</div>
<div class="content-box">
<h5 class="mb-0">
${category.name}
</h5>
</div>
</a>
</div>
</div>`
}
});
$('#categories').html(categories);
var services = '';
if (response.services.length > 0) {
response.services.forEach(service => {
services += `
<div class="col-lg-3 col-md-6 col-12 mb-30 services-list service-category-${service.category_id}">
<div class="listing-item">
<div class="img-holder" style="background-image: url('${ service.service_image_url }')">
<div class="category-name">
<i class="flaticon-fork mr-1"></i>${service.category.name}
</div>
<div class="time-remaining">
<i class="fa fa-clock-o mr-2"></i>
<span>έως ${service.time} ${makeSingular(service.time, service.time_type)}</span>
</div>
</div>
You can access the webpage at https://click-away.store
I need to set the default Services view for the 1st Button Category.
Sorry if my question is silly or the solution is simple but I couldn't find out what to do!
Your error is that you never loop over the category's services.
You check if there are any services, but you never loop over them. So, within the #if you should do that.
#foreach ($categories as $category)
#if($category->services->count() > 0)
#foreach($category->services as $service)
// your code
#endforeach
#endif
#endforeach
I have a strange problem in Blade. I think is something obvious but I'm just stuck at it.
I have a Bootstrap carousel with cards in Larvel Blade view. I'm creating new "carousel-item" (slides) using if in for loop, but I'm facing the problem that it generates one empty slide. I cant figure it out why this is happening.
The following code should generate 2 slides with 4 cards in it. Unfortunately it creates 3 slides the last of them empty.
This is my code:
<div id="carousel{!! $type !!}" class="carousel slide" data-ride="carousel" data-touch="true">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row justify-content-center latest__properties_row">
#for($i=0;$i<=7;$i++)
#if(isset($latest[$type][$i]))
<div class="col-md-3 mb-3 latest__properties">
<div class="card">
#if(isset($latest[$type][$i]['photos']))
#if(isset($latest[$type][$i]['photos'][0]))
<a href="/properties/{!! $latest[$type][$i]['slug'] !!}"><img
class="img-fluid latest__properties__photo"
alt="{!! $latest[$type][$i]['title'] !!}"
src="/images/properties/{!! $latest[$type][$i]['photos'][0]['url'] !!}"></a>
#endif
#endif
<div class="card-body">
<div class="title">
<a href="/properties/{!! $latest[$type][$i]['slug'] !!}"><h4
class="card-title">{!! $latest[$type][$i]['title'] !!}</h4>
</a>
</div>
<!-- Slide like buttom -->
<button class="slide__like-btn">
<i class="far fa-heart"></i>
</button>
<!-- Slide badge -->
#if(isset($latest[$type][$i]['terms']['property_labels']))
#for($k=0;$k<=count($latest[$type][$i]['terms']['property_labels']);$k++)
#if(isset($latest[$type][$i]['terms']['property_labels'][$k]))
<div class="slide__badge {!! ($latest[$type][$i]['terms']['property_labels'][$k]['attributes'] != '' || $latest[$type][$i]['terms']['property_labels'][$k]['attributes'] != null) ? $latest[$type][$i]['terms']['property_labels'][$k]['attributes'] : '' !!} text-uppercase">
{!! $latest[$type][$i]['terms']['property_labels'][$k]['name'] !!}
</div>
#endif
#endfor
#endif
<ul>
#if(isset($latest[$type][$i]['rooms']) && $latest[$type][$i]['rooms'] != 0)
<li><b>Стаи:</b> {!! $latest[$type][$i]['rooms'] !!}</li>
#endif
#if(isset($latest[$type][$i]['bathrooms']) && $latest[$type][$i]['bathrooms'] != 0)
<li><b>Бани:</b> {!! $latest[$type][$i]['bathrooms'] !!}
</li>
#endif
#if(isset($latest[$type][$i]['sqm']) && $latest[$type][$i]['sqm'] != 0)
<li><b>Квадратура:</b> {!! $latest[$type][$i]['sqm'] !!} m²</li>
#endif
</ul>
<p class="latest__properties__id">
ID: {!! $latest[$type][$i]['unique_code'] !!}</p>
<p class="latest__properties__price">
<span class="euro">€ {!! $latest[$type][$i]['price'] !!}</span>
<span
class="bgn">{!! $latest[$type][$i]['price_bgn'] !!} лв.</span>
</p>
<p class="latest__properties__created__at">
{!! $latest[$type][$i]['created_at'] !!}
</p>
</div>
</div>
</div>
#if($i == 3)
</div>
</div>
<div class="carousel-item">
<div class="row justify-content-center latest__properties_row">
#endif
#endif
#endfor
</div>
</div>
<div class="carousel-item">
<div class="row justify-content-center latest__properties_row">
</div>
</div>
</div>
</div>
I just figured it out... I was looking like 1000 times the code and that I realize I just forgot an empty slide right after the for loop.
sorry for asking here but I can't seem to get my head around what I need to do to complete this.
I have a gallery that is pulled from the database and i'd like it so every division of 4 it adds a new row.
Here is my website: https://creativehedgehog.co.uk/gallery
i.e
<div class="row">
col3
col3
col3
col3
</div>
Is this correct? Here is my code
<div class="gallery-container">
<div class="gallery cf">
#php
$i=0;
#endphp
#foreach($galleries as $gallery)
#if($i % 4 == 0)
{{$i}}
<div class="row">
#endif
<div class="col-md-3">
<a href="{{$gallery->link}}" data-lightbox="image-1" data-title="{{$gallery->title}}">
<img src="{{$gallery->link}}" alt="{{$gallery->title}}">
</a>
</div>
#if($i % 4 == 0)
{{$i}}
</div>
#endif
#php
$i++;
#endphp
#endforeach
</div>
</div>
Use array_chunk function. array_chunk
<div class="gallery-container">
<div class="gallery cf">
#foreach(array_chunk($galleries,4,true) as $chank)
<div class="row">
#foreach($chank as $gallery)
<div class="col-md-3">
<a href="{{$gallery->link}}" data-lightbox="image-1" data-title="{{$gallery->title}}">
<img src="{{$gallery->link}}" alt="{{$gallery->title}}">
</a>
</div>
#endforeach
</div>
#endforeach;
</div>
</div>
You are adding a row element every fourth iteration, not placing 4 iteration into each row.
Look below:
<div class="gallery-container">
<div class="gallery cf">
#php
$i=0;
#endphp
#foreach($galleries as $gallery)
#if($i % 4 == 0)
#if($i != 0)
</div>
#endif
{{$i}}
<div class="row">
#endif
<div class="col-md-3">
<a href="{{$gallery->link}}" data-lightbox="image-1" data-title="{{$gallery->title}}">
<img src="{{$gallery->link}}" alt="{{$gallery->title}}">
</a>
</div>
#php
$i++;
#endphp
#endforeach
</div><!-- last row end -->
</div>
</div>
Try this and let the bootstrap flexbox do their job
<div class="gallery-container">
<div class="gallery cf">
<div class="container-fluid">
<div class="row">
#foreach($galleries as $gallery)
<div class="col-md-3">
<a href="{{$gallery->link}}" data-lightbox="image-1" data-title="{{$gallery->title}}">
<img src="{{$gallery->link}}" alt="{{$gallery->title}}">
</a>
</div>
#endforeach
</div>
</div>
</div>
</div>
I am making a forum and when the user clicks on a theme, a page shows up with every topic that belongs to that theme. The problem is, how do I do this?
I made a for each loop which shows ALL the topics from the database instead of the topics that belong to that theme I clicked on. How can I do this?
Web.php
Route::get('/', 'ThemesController#index')->name('home');
Route::get('/theme/{id}', 'ThemesController#show')->name('showtheme');
ThemesController.php
I only show the show method because I believe that's the only one necessary here
public function show($id)
{
$topics = Topic::all($);
return view('themes/topics')->with('topics', $topics);
}
topics.blade.php
#extends('layouts.default')
#section('content')
<div class="container main-content">
<div class="row first-row">
<div class="col s12">
<div class="card">
<div class="card-content clearfix">Nieuw topic</div>
</div>
</div>
<div class="col s12">
<div class="card">
<div class="card-content"><span class="card-title"> - Topics</span>
<div class="collection">
#foreach($topics as $topic)
<a href="" class="collection-item avatar collection-link"><img src="/uploads/avatars/{{ $topic->user->avatar }}" alt="" class="circle">
<div class="row">
<div class="col s6">
<div class="row last-row">
<div class="col s12"><span class="title">Theme - {{ $topic->topic_title }}</span>
<p>{!! str_limit($topic->topic_text, $limit = 100, $end = '...') !!}</p>
</div>
</div>
<div class="row last-row">
<div class="col s12 post-timestamp">Gepost door: {{ $topic->user->username }} op: {{ $topic->created_at }}</div>
</div>
</div>
<div class="col s2">
<h6 class="title center-align">Replies</h6>
<p class="center replies">{{ $topic->replies->count() }}</p>
</div>
<div class="col s2">
<h6 class="title center-align">Status</h6>
<div class="status-wrapper center-align"><span class="status-badge status-open">open</span></div>
</div>
<div class="col s2">
<h6 class="title center-align">Laatste reply</h6>
<p class="center-align">Naam</p>
<p class="center-align">Tijd</p>
</div>
</div>
</a>
#endforeach
</div>
</div>
</div>
</div>
<div class="col s12">
<div class="card">
<div class="card-content clearfix">Nieuw topic</div>
</div>
</div>
</div>
</div>
#endsection
I believe I'm doing something obviously wrong but I can't see what.
Help will be appreciated. Thanks in advance
If I miss some code, Please inform me.
How are you defining the relationship between a theme and it's topics? You'll have to have something like a one to many or many to many established in your database for you to be able to query correctly. Do you have anything like that yet?
****edit****
public function show($id)
{
$topics = Theme::find($id)->topics;
return view('themes/topics')->with('topics', $topics);
}
I have these models:
ForumCategory
Forum
Topic
Reply
In the main forum page, I want to count and display the number of replies that associated to this forum.
All the models have relationships.
This is the view:
#foreach ($categories as $category)
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default striped">
<div class="panel-heading">
<div class="row">
<div class="col-md-11">{{ $category->name }}</div>
<div class="col-md-1 text-right"><a><span class="fa fa-arrow-down"></span></a></div>
</div>
</div>
#foreach ($category->forums as $forum)
<div class="panel-body">
<div class="row">
<div class="col-md-1 text-right"><span class="fa fa-envelope fa-4x"></span></div>
<div class="col-md-7">
<h4>
{{ $forum->name }}
<br>
<small>{{ $forum->description }}</small>
</h4>
</div>
<div class="col-md-1 post-num">
<h5>{{ $forum->topics->count() }}<br>
<small>Topics</small></h5>
<h5>{{ $forum->topics->replies->count() }}<br>
<small>Replies</small></h5>
</div>
<div class="col-md-3">
<img src="" class="img-circle last-comnt-img">
Last comment<br>
By Username<br>
<span class="text-muted">12:31</span>
</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
#endforeach
This line won't work:
$forum->topics->replies->count()