I'm trying to add some smarty to my template , to first element i want to give
<div class="item active">
and for next elements
<div class="item">
I tried to do something like this:
{foreach $imageCollection as $image key=slider}
{if $slider < 1}
<div class="item active">
<img class="img-responsive" src="{$image->getPath('1400x469')}" alt="caption1" />
<div class="carousel-caption">
{else}
<div class="item">
<img class="img-responsive" src="{$image->getPath('1400x469')}" alt="caption1" />
<div class="carousel-caption">
{/if}
{/foreach}
It's doesn't work, all elements are displaying with
<div class="item active">
use #first:
{foreach $imageCollection as $image}
<div class="item {if $image#first}active{/if}">
...
{/foreach}
The correct syntax for getting the index key in Smarty is as following:
{foreach from=$imageCollection item=image key=slider}
// Your code
{/foreach}
Related
I have two separate divs, one where the images are loaded and the other where the data is displayed.
<div class="banner-slider-image">
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slide Item -->
<div class="swiper-slide">
<div class="bg" style="background-image: url(include/assets/images/main-slider/1.jpg);">
</div>
</div>
</div>
</div>
</div>
<div class="banner-slider-content">
<div class="side-text">AVANT</div>
<div class="swiper-container banner-slider">
<div class="swiper-wrapper">
#if(count($listings) > 0)
#foreach($listings as $listing)
<!-- Slide Item -->
<div class="swiper-slide">
<div class="content-outer">
<div class="content-box">
<div class="inner">
<h5>{{$listing->first_name}} {{$listing->last_name}}</h5>
<h1><span>{{$listing->name}}</span> </h1>
<div class="text">{{$listing->property_description}}.</div>
<div class="link-box">View Listing</div>
</div>
</div>
</div>
</div>
#endforeach
#endif
</div>
</div>
</div>
So the first div will also be in a foreach loop, but I dont know how I can combine the two where they show the same related data.
Use 2 foreach loops . It is the easiest and desired solution for you. or you can define two variable and concat the contents using one forloop and then display them later like
#php
$first='';
$second='';
#endphp
#if(count($listings) > 0)
#foreach($listings as $listing)
#php
$first.='first div content';
$second.='second div content';
#endphp
#endforeach
#endif
<div class="banner-slider-image">
<div class="swiper-container">
<div class="swiper-wrapper">
{!!$first!!}
</div>
</div>
</div>
<div class="banner-slider-content">
<div class="side-text">AVANT</div>
<div class="swiper-container banner-slider">
<div class="swiper-wrapper">
{!!$second!!}
</div>
</div>
</div>
<html>
<body>
#section('sidebar')
This is the master sidebar.
#show
<div class="container">
#yield('content')
</div>
</body>
use for yield
I want to fetch category wise data in home page's sections but I am unable to do this. Only one category section is working[enter image description here][1]
I made Section model and under this model Category model My IndexController Code :
<?php
namespace App\Http\Controllers\Front;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Slider;
use App\Category;
use App\Section;
class IndexController extends Controller
{
public function index(){
$sliders = Slider::where('status',1)->get();
$categories = Category::with('sections')->where('status',1)->get();
//dd($categories);die;
return view('frontend.index')->with(compact('sliders','categories'));
}
}
and blade file code is :
<section class="latest_work">
<div class="container">
<div class="row sub_content">
<div class="col-md-12">
<div class="dividerHeading">
<h4><span>Find your best tours</span></h4>
</div>
<div id="recent-work-slider" class="owl-carousel">
#foreach($categories as $category)
#if($category['sections']['section_name'] == "Tours")
<div class="product">
<figure class="touching effect-bubba">
<div class="product-img">
<img class="img-responsive" src="{{ asset('images/categories/'.$category['category_banner']) }}">
<div class="option">
<a class="fa fa-shopping-cart" href="portfolio_single.html"></a>
<a class="fa fa-search mfp-image" href="{{ asset('images/categories/'.$category['category_banner']) }}"></a>
</div>
</div>
</figure>
<div class="product-info">
<div class="product-title">
<h3>
{{ $category['category_name'] }}
</h3>
</div><br>
</div>
</div>
#endif
#endforeach
</div>
</div>
</div>
</div>
</section>
<section class="latest_work">
<div class="container">
<div class="row sub_content">
<div class="col-md-12">
<div class="dividerHeading">
<h4><span>Find your best stays</span></h4>
</div>
<div id="recent-work-slider" class="owl-carousel">
#foreach($categories as $category)
#if($category['sections']['section_name'] == "Stays")
<div class="product">
<figure class="touching effect-bubba">
<div class="product-img">
<img class="img-responsive" src="{{ asset('images/categories/'.$category['category_banner']) }}">
<div class="option">
<a class="fa fa-shopping-cart" href="portfolio_single.html"></a>
<a class="fa fa-search mfp-image" href="{{ asset('images/categories/'.$category['category_banner']) }}"></a>
</div>
</div>
</figure>
<div class="product-info">
<div class="product-title">
<h3>
{{ $category['category_name'] }}
</h3>
</div><br>
</div>
</div>
#endif
#endforeach
</div>
</div>
</div>
</div>
</section>
<section class="latest_work">
<div class="container">
<div class="row sub_content">
<div class="col-md-12">
<div class="dividerHeading">
<h4><span>Find your best cars</span></h4>
</div>
<div id="recent-work-slider" class="owl-carousel">
#foreach($categories as $category)
#if($category['sections']['section_name'] == "Cars")
<div class="product">
<figure class="touching effect-bubba">
<div class="product-img">
<img class="img-responsive" src="{{ asset('images/categories/'.$category['category_banner']) }}">
<div class="option">
<a class="fa fa-shopping-cart" href="portfolio_single.html"></a>
<a class="fa fa-search mfp-image" href="{{ asset('images/categories/'.$category['category_banner']) }}"></a>
</div>
</div>
</figure>
<div class="product-info">
<div class="product-title">
<h3>
{{ $category['category_name'] }}
</h3>
</div><br>
</div>
</div>
#endif
#endforeach
</div>
</div>
</div>
</div>
</section>
only one tours section's categories is showing but not showing other categories
Yes Only one tour sections is showing because of this condition in your code
#if($category['sections']['section_name'] == "Tours")
........................
#endif
I would like to output posts in order provided by this image (every 3 posts)
here is my blade code:
<section class="blog_area p_120">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="blog_left_sidebar">
#foreach ($raksti as $raksts)
<article class="blog_style1">
<div class="blog_img">
<img class="img-fluid" src="{{$raksts->image}}" alt="">
</div>
<div class="blog_text">
<div class="blog_text_inner">
<div class="cat">
<a class="cat_btn" href="#">{{$raksts->kato->title}}</a>
<i class="fa fa-calendar" aria-hidden="true"></i> {{$raksts->created_at}}
<i class="fa fa-comments-o" aria-hidden="true"></i> 05
</div>
<a href="#">
<h4>{{$raksts->title}}</h4>
</a>
<p>{{$raksts->short_desc}}</p>
<a class="blog_btn" href="#">Lasīt vairāk</a>
</div>
</div>
</article>
#endforeach
</div>
</div>
</div>
</div>
</section>
For those small blocks the "article" tag have class ="blog_style1 small"
I guess that there need to work with a "for" loop, so can anyone help me to achieve this task and explain a little how that works?
Take a look, you need to tell your code that one image of three has to be wide.
So that you can use modulo:
#foreach ($raksti as $key => $value)
#if($key % 3 = 0)
// set width 100%
#else
// set width 50%
#endif
#endforeach
That makes every third element as 100% wide.
try next code
#foreach ($raksti as $key => $raksts)
//
#if($key % 3 == 1)
// set here style css width 100 %
#else
// set here style css width 50 %
#endif
#endforeach
Laravel has loop variables:
https://laravel.com/docs/5.8/blade#the-loop-variable
You can use $loop->index inside yor foreach and check whether your article must have class small
<article class="blog_style1 #if($loop->index % 3 !== 0) small #endif">
Or you can simply use CSS nth-child
https://css-tricks.com/how-nth-child-works/
Give class small each third element
<section class="blog_area p_120">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="blog_left_sidebar">
#foreach ($raksti as $key => $raksts)
<article class="blog_style1 {{ ($key % 3 != 0) ? 'small' : '' }}">
<div class="blog_img">
<img class="img-fluid" src="{{$raksts->image}}" alt="">
</div>
<div class="blog_text">
<div class="blog_text_inner">
<div class="cat">
<a class="cat_btn" href="#">{{$raksts->kato->title}}</a>
<i class="fa fa-calendar" aria-hidden="true"></i> {{$raksts->created_at}}
<i class="fa fa-comments-o" aria-hidden="true"></i> 05
</div>
<a href="#">
<h4>{{$raksts->title}}</h4>
</a>
<p>{{$raksts->short_desc}}</p>
<a class="blog_btn" href="#">Lasīt vairāk</a>
</div>
</div>
</article>
#endforeach
</div>
</div>
</div>
</div>
</section>
Hope this helps you
no need to do this in the backend. Use the nth-child functionality of CSS:
.blog_style1{
width: 50%;
}
.blog_style1:nth-child(4n){
width: 100%;
}
I am trying to figure out a way to cycle through the inner loop view items in the following manner:
First:
<div class="col-sm-6">
<h3 class="padding-bot-20">{$row->service}</h3>{$row->content}
</div>
<div class="col-sm-6">
<img class="img-responsive" src="{$this->images->frontend_check_image($row->main_image)}" alt="Service">
</div>
Second:
<div class="col-sm-6">
<img class="img-responsive" src="{$this->images->frontend_check_image($row->main_image)}" alt="Service">
</div>
<div class="col-sm-6">
<h3 class="padding-bot-20">{$row->service}</h3>{$row->content}
</div>
and so on... so the presentation is content/image, image/content, content/image .etc.
This is the main code:
<div class="container">
{if count($row_services) == 0}
No services published.
{else}
{assign var=i value=0}
{foreach from=$row_services item=row}
<div class="row scroll-animated-from-bottom {if $i > 0}padding-top-50{/if}" id="service-data-1">
<div class="col-sm-6">
<h3 class="padding-bot-20">{$row->service}</h3>{$row->content}
</div>
<div class="col-sm-6">
<img class="img-responsive" src="{$this->images->frontend_check_image($row->main_image)}" alt="Service">
</div>
</div>
{capture assign=i}{$i+1}{/capture}
{/foreach}
{/if}
</div>
I know how to accomplish this is php, but I'm unsure how to do it in smarty. I'm trying to avoid having any child views.
This is the best I could come up with. If anyone has a more elegant solution, feel free to share:
<div class="container">
{if count($row_services) == 0}
No services published.
{else}
{assign var=i value=0}
{foreach from=$row_services item=row}
<div class="row scroll-animated-from-bottom {if $i > 0}padding-top-50{/if}" id="service-data-1">
{if ($i % 2 == 0)}
<div class="col-sm-6">
<h3 class="padding-bot-20">{$row->service}</h3>{$row->content}
</div>
<div class="col-sm-6">
<img class="img-responsive" src="{$this->images->frontend_check_image($row->main_image)}" alt="Service">
</div>
{else}
<div class="col-sm-6">
<img class="img-responsive" src="{$this->images->frontend_check_image($row->main_image)}" alt="Service">
</div>
<div class="col-sm-6">
<h3 class="padding-bot-20">{$row->service}</h3>{$row->content}
</div>
{/if}
</div>
{capture assign=i}{$i+1}{/capture}
{/foreach}
{/if}
</div>
I am trying to display 3 results in each row. 1 result contains image,title and description. If description is a lengthy one, the 4th result in the second row will break. So I need to give after each row. I tried the following code, but didn't work.Thanks in advance.
<div class="row">
#if(count($reports['data']) > 0)
#foreach($reports['data'] as $reportsUser)
<div class="col-md-4 wow">
<article class="post post-2 post-2_mod-c clearfix">
<div class="entry-media">
#if($reportsUser['image'])
<img src="{{ asset(App\Http\Controllers\Controller::getThumbPath($reportsUser['image'])) }}"
alt="Foto" class="img-responsive" style="width:360px;height:192px;"/>
#else
<img src="{{asset('images/no_image.jpg')}}" alt="Foto" class="img-responsive"/>
#endif
</div>
<div class="entry-main">
<div class="entry-header">
<h2 class="entry-title ">{{$reportsUser['title']}}</h2>
</div>
<div class="entry-content">
<p>{!! str_limit($reportsUser['description'],127,"....") !!}</p>
</div>
<div class="entry-footer"><a href="{{ url('view-report/'.$reportsUser['id'])}}"
class="btn-link clsComClrRed">Continue Reading</a></div>
</div>
</article>
</div>
#endforeach
#endif
</div>
Change your #foreach statement to:
#foreach($reports['data'] as $i => $reportsUser)
Then, just before your first #endforeach (and after </div>), add:
#if ( $i % 3 == 2 )
<div class="clearfix"></div>
#endif