displaying posts in laravel - laravel

I have a carousel slider to display posts. I want to display latest 3 posts and then on next slide other 3 posts which are in row. So for example 9,8,7 -> 6,5,4 -> 3,2,1 But i dont know how to take latest 3 on active and then display other 3 posts in row.
Controller:
$posts = Post::all();
Carousel:
<section class="news">
<h1 class="section-heading text-highlight"><span class="line">Novinky</span></h1>
<div class="carousel-controls">
<a class="prev" href="#news-carousel" data-slide="prev"><i class="fas fa-caret-left"></i></a>
<a class="next" href="#news-carousel" data-slide="next"><i class="fas fa-caret-right"></i></a>
</div><!--//carousel-controls-->
<div class="section-content clearfix">
<div id="news-carousel" class="news-carousel carousel slide">
<div class="carousel-inner">
<div class="item carousel-item active">
<div class="row">
#foreach($posts->take(3) as $post) // Taking 3 posts but not latest
<div class="col-lg-4 col-12 news-item">
<h2 class="title">{{ $post->title }}</h2>
<img class="thumb" src="{{ Storage::disk('public')->url('post/'.$post->image) }}" alt="{{ $post->title }}" />
<p>Suspendisse purus felis, porttitor quis sollicitudin sit amet, elementum et tortor. Praesent lacinia magna in malesuada vestibulum. Pellentesque urna libero.</p>
<a class="read-more" href="news-single.html">Číst více<i class="fas fa-chevron-right"></i></a>
asd
</div><!--//news-item-->
#endforeach
</div><!--//row-->
</div><!--//item-->
<div class="item carousel-item">
<div class="row">
#foreach($posts->take(3) as $post) // Taking the same 3 posts :/
<div class="col-lg-4 col-12 news-item">
<h2 class="title">{{ $post->title }}</h2>
<img class="thumb" src="{{ Storage::disk('public')->url('post/'.$post->image) }}" alt="{{ $post->title }}" />
<p>Suspendisse purus felis, porttitor quis sollicitudin sit amet, elementum et tortor. Praesent lacinia magna in malesuada vestibulum. Pellentesque urna libero.</p>
<a class="read-more" href="news-single.html">Číst více<i class="fas fa-chevron-right"></i></a>
</div><!--//news-item-->
#endforeach
</div><!--//row-->
</div><!--//item-->
</div><!--//carousel-inner-->
</div><!--//news-carousel-->
</div><!--//section-content-->
</section><!--//news-->
Image:
Active slide:
Next slide

first order them by created at like this:
$posts = Post::orderByDesc('created_at')->get();
then use chunk method in laravel collections to do that like this:
#foreach ($posts->chunk(3) as $key => $chunk)
<div class="item carousel-item {{ $key == 0 ? 'active' : ''}}">
<div class="row">
#foreach($chunk as $post)
<div class="col-lg-4 col-12 news-item">
<h2 class="title">{{ $post->title }}</h2>
<img class="thumb" src="{{ Storage::disk('public')->url('post/'.$post->image) }}" alt="{{ $post->title }}" />
<p>Suspendisse purus felis, porttitor quis sollicitudin sit amet, elementum et tortor. Praesent lacinia magna in malesuada vestibulum. Pellentesque urna libero.</p>
<a class="read-more" href="news-single.html">Číst více<i class="fas fa-chevron-right"></i></a>
asd
</div><!--//news-item-->
#endforeach
</div><!--//row-->
</div><!--//item-->
#endforeach
this method separates collections to parts that you want like this:
$collection = collect([1, 2, 3, 4, 5, 6, 7]);
$chunks = $collection->chunk(4);
$chunks->toArray();
// [[1, 2, 3, 4], [5, 6, 7]]

$posts = Post::orderBy('created_at', 'desc')->get();

Related

For loop not working correctly with jQuery axois function

I am trying to show product using axois function , i have no idea how can i get data in axois by using for loop Does anyone have an idea please help me thanks.
please check response in console. https://ibb.co/YhqMsYZ
controller
public function store(Request $request)
{
$products = Product::with('productColorGallary')->where('status', 1)->get();
$data = [
'product' => $products
];
return response()->json($data, 200);
}
jquery script
let url = "{{route('products.store')}}";
axios.get(url, {
params:{
}
}).then((res)=>{
let product =res.data;
// console.log(product);
for(var i =0; i< product.length; i++)
{
$('#product').append(
`<div class="col-md-4 col-sm-6 col-6">
<div class="wallprodCard">
<div class="prodcardImage">
<img src="{{url('')}}/assets/images/wallpapers/wallpaper-1-01.jpg" alt="">
<a class="prodcardFancy" href="{{url('')}}/assets/images/wallpapers/wallpaper-1-01.jpg" data-fancybox="images" data-caption="Flooring">
<i class="fa fa-search-plus">
</i>
</a>
</div>
<div class="prodcardDescp">
<a href="{{url('')}}/wallpaper-details">
<h4 class="prodcardtitle">product name
</h4>
</a>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
`);
}
});
});
html view
<div class="tab-content">
<div class="tab tab-active" data-id="tab1">
<div class="row">
<div id="product"> </div>
</div>
</div>
<!--end of tab one-->
</div>
as res.data this is not product array
use this
let product =res.data.product;
as ur loop in javascript and and u r using `` this operator so u can use
string text ${expression} string text ref link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
$('#product').append(
`<div class="col-md-4 col-sm-6 col-6">
<div class="wallprodCard">
<div class="prodcardImage">
<img src="{{url('')}}/assets/images/wallpapers/wallpaper-1-01.jpg" alt="">
<a class="prodcardFancy" href="{{url('')}}/assets/images/wallpapers/wallpaper-1-01.jpg" data-fancybox="images" data-caption="Flooring">
<i class="fa fa-search-plus">
</i>
</a>
</div>
<div class="prodcardDescp">
<a href="{{url('')}}/wallpaper-details">
<h4 class="prodcardtitle">product name
</h4>
</a>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
${dynamicdata} // here u can use your javascript variable
`);
i find this useful and it will be worth trying it. in your component, you can initialize an empty array in the data() methods. assume you use an array called products,then this is how your script tag should be
<script>
export default{
data(){
return{
//now the empty array
products:[]
}
},
methods:{
getProducts:function(){
axios.get(url).then((response)=>{
this.products=response.data
//this saves the json data in the array
//you can then catch the error
//then check the html above
})
}
},
created(){
this.getProducts()
//
}
}
</script>
<div class="row">
<!-- the loop will create n numbers of elements with a col-sm-4 class for all length of products-->
<div class="col-sm-4 col-sm-6 col-6" v-for="product in products" :key="product.id">
<div class="col-md-4 col-sm-6 col-6">
<div class="wallprodCard">
<div class="prodcardImage">
<img :src="assets/images/wallpapers/wallpaper-1-01.jpg" alt="">
<a class="prodcardFancy" href="assets/images/wallpapers/wallpaper-1-01.jpg" data-fancybox="images" data-caption="Flooring">
<i class="fa fa-search-plus">
</i>
</a><!--Kindly Note thatif this field is dynamic, you mightwant to bind the href attribute to the dynamic value ie. the a href should be a :href="dynamic value"-->
</div>
<div class="prodcardDescp">
<a href="/wallpaper-details"><!--Kindly Note thatif this field is dynamic, you mightwant to bind the href attribute to the dynamic value ie. the a href should be a :href="dynamic value"-->
<h4 class="prodcardtitle">product name
</h4>
</a>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
</div>

How can I add a click handler in Vue used in Laravel?

In my Laravel application, I have made a component in Vue. The component itself is rendering properly, but the click handler is not firing. I have read many articles on the issue, but can't find the solution.(https://prnt.sc/tyiwmh + https://prnt.sc/tyiwwb + https://prnt.sc/tyix8l)
<template>
<div class="item border rounded-lg p-3">
<header>
<h2 class="mb-3">John Doe</h2>
<div class="arrows" v-on:click="showContent">
<img src="storage/img/chevron-down-light.svg" alt="" class="arrow-down">
<img src="storage/img/chevron-up-light.svg" alt="" class="arrow-up">
</div>
</header>
<div class="item-content" v-if="visible">
<div class="content-1">
<ul>
<li><b>Email:</b> john.doe#hotmail.com</li>
<li><b>Tel:</b> 0497 99 88 77</li>
</ul>
</div>
<hr>
<div class="content-2">
<ul>
<li><b>Vertrekplaats:</b> Ark van Noë</li>
<li><b>Aankomstplaats:</b> Watermolen Grobbendonk</li>
</ul>
</div>
<hr>
<div class="content-3">
<ul>
<li>2 enkelzitkajaks</li>
<li>3 dubbelzitkajaks</li>
<li>0 canadese kano's</li>
<li>2 zwemvesten</li>
<li>3 tonnetjes</li>
</ul>
</div>
<hr>
<div class="content-4">
<h3>Extra info:</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt fuga dignissimos hic? Velit, ea aliquam! Consequuntur provident vitae, hic repudiandae, animi, ipsa ullam quidem accusamus vero ipsum aut porro nostrum.
</p>
</div>
</div>
</div>
</template>
<script>
export default {
data: function() {
return {
visible: false
}
},
methods: {
showContent: function() {
console.log('the button is clicked');
}
}
}
</script>
This might help no method necessary:
<div class="arrows" #click="visisble = !visible">
<img #click="visisble = !visible"
:src="'storage/img/chevron-' + (visible ? 'down-light.svg':'up-light.svg')"
alt=""
:class="'arrow-' + (visible ? 'down' : 'up' )">
</div>

How to change layout in bootstrap

I want to show my products in horizontal. In one line only three pics shown and 3 rows only 9 latest pics shown. How can I do this?
blade file:
<div class="gallery-grids-row">
<div class="col-md-4">
#foreach($data as $row)
<div class="wpf-demo-4">
<a href="{{ URL::to('/') }}/images/{{ $row->image }}" class="jzBoxLink item-hover" title="Maecenas sodales tortor ac ligula ultrices dictum et quis urna.">
<img src="{{ URL::to('/') }}/images/{{ $row->image }}" class="img-responsive" alt=" " style="width: 380px; height: 263px;" />
<div class="view-caption">
<p>{{ $row->name }}</p>
</div>
</a>
</div>
#endforeach
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
controller:
public function index()
{
$data = Post::all();
return view('index', compact('data'));
}
change your blade to this: one whole line in top of foreach and 1/3 of each line in each foreach:
<div class="gallery-grids-row">
<div class="row"><!-- this changed -->
#php($index = 0)
#foreach($data as $row)
#if($index < 9)
<div class="wpf-demo-4 col-md-4"><!-- this line changed -->
<a href="{{ URL::to('/') }}/images/{{ $row->image }}" class="jzBoxLink item-hover" title="Maecenas sodales tortor ac ligula ultrices dictum et quis urna.">
<img src="{{ URL::to('/') }}/images/{{ $row->image }}" class="img-responsive" alt=" " style="width: 380px; height: 263px;" />
<div class="view-caption">
<p>{{ $row->name }}</p>
</div>
</a>
</div>
#endif
#php($index += 1)
#endforeach
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
in your controller you can limit the collection that you are getting
like this:
$data = Post::orderBy('created_at', 'desc')->get(); //this line gets the posts record ordering by date
This last example looks like this:
Example of display tested
You can try filtering the query and limiting the results to 9 or paginate.
Controller
public function index()
{
$data = Post::orderBy('created_at', 'desc')->limit(9)->get();
return view('home')->with(['data' => $data]);
}
View
<div class="gallery-grids-row">
<div class="row">
#foreach($data as $row)
<div class="wpf-demo-4 col-md-4">
<a href="{{ URL::to('/') }}/images/{{ $row->image }}" class="jzBoxLink item-hover" title="Maecenas sodales tortor ac ligula ultrices dictum et quis urna.">
<img src="{{ URL::to('/') }}/images/{{ $row->image }}" class="img-responsive" alt=" " style="width: 380px; height: 263px;" />
<div class="view-caption">
<p>{{ $row->name }}</p>
</div>
</a>
</div>
#endforeach
<div class="clearfix"></div>
</div>
<div class="clearfix"> </div>
</div>
This last example looks like this:
Example of display without pagination tested
Or alternative paginated
Controller
public function index()
{
$data = Post::orderBy('created_at', 'desc')->paginate(9);
return view('home')->with(['data' => $data]);
}
View
<div class="gallery-grids-row">
<div class="row">
#foreach($data as $row)
<div class="wpf-demo-4 col-md-4">
<a href="{{ URL::to('/') }}/images/{{ $row->image }}" class="jzBoxLink item-hover" title="Maecenas sodales tortor ac ligula ultrices dictum et quis urna.">
<img src="{{ URL::to('/') }}/images/{{ $row->image }}" class="img-responsive" alt=" " style="width: 380px; height: 263px;" />
<div class="view-caption">
<p>{{ $row->name }}</p>
</div>
</a>
</div>
#endforeach
<div class="clearfix"></div>
</div>
<div class="clearfix"> </div>
{{ $data->links() }}
</div>
This last example looks like this:
Example of display tested

How to get value of html attribute value with v-on:click inside anchor tag in Vue.js?

Here is the code with vue.js , laravel.......
I want 'h5' attribute value that is {{$subcategory->name}} in my vue app, So I can perform other purpose.
<div class="container" id = "showProd">
<div class = "row">
<div class = "row" align = "center" id = "flash">
<div class="tabpanel">
<ul class="nav nav-tabs" role="tablist">
#foreach($data['subcategories'] as $count => $subcategory)
<li role="presentation" #if($count == 0) class="active" #endif>
<a href="#tab-{{ $subcategory->id }}" aria-controls="#tab-{{ $subcategory->id }}" role="tab" data-toggle="tab" v-on:click = "greet">
<div class="card" id = "category_list" style="width: 17rem;"><img id = "product_image" class="card-img-top" src="/images/0a09d8530691a1c23a4e4f4ec3eeff2a.jpg" alt="Card image cap" style="height:170px;">
<div class="card-body" >
<h5 class="card-title" id = "product_name" >{{$subcategory->name}}</h5>
</div>
</div>
</a>
</li>
#endforeach
</ul>
<div class="tab-content">
#foreach($data['subcategories'] as $count => $subcategory)
<div role="tabpanel" #if($count == 0) class="tab-pane active" #else class="tab-pane" #endif id="tab-{{ $subcategory->id }}">
<h2>{{ $subcategory->name }}</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias enim obcaecati praesentium repellat. Est explicabo facilis fuga illum iusto, obcaecati saepe voluptates! Dolores eaque porro quaerat sunt totam ut, voluptas.</p>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: '#showProd',
data: {
name: 'Vue.js'
},
methods: {
greet: function (event) {
// `this` inside methods point to the Vue instance
var val = this.
alert('Hello ' + this.name + '!')
}
}
});
</script>
You can generate the data object from laravel and use vuejs binding and constructs to generate the html. This means that you won't rely on blade templating for generating the html, but on vuejs.
data () {
return JSON.parse( '{{json_decode($data['subcategories'])}}' )
}
Now you need to update your template to use the info from data and not directly from php via blade.
<div class="container" id = "showProd">
<div class = "row">
<div class = "row" align = "center" id = "flash">
<div class="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li v-for="(subcategory, subindex) in subcategories" role="presentation" :class="{'active': subindex === 0}">
<a :href="'#tab-' + subcategory.id" :aria-controls="'#tab-'+ subcategory.id" role="tab" data-toggle="tab" v-on:click = "greet">
<div class="card" id = "category_list" style="width: 17rem;"><img id = "product_image" class="card-img-top" src="/images/0a09d8530691a1c23a4e4f4ec3eeff2a.jpg" alt="Card image cap" style="height:170px;">
<div class="card-body" >
<h5 class="card-title" id = "product_name" >{{subcategory.name}}</h5>
</div>
</div>
</a>
</li>
</ul>
<div class="tab-content">
<div v-for="(subcategory, subindex) in subcategories" role="tabpanel" :class="{'tab-pane': subindex === 0, 'active': subindex === 0}" #else class="tab-pane" :id="'tab-'+subcategory.id">
<h2>{{ subcategory.name }}</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias enim obcaecati praesentium repellat. Est explicabo facilis fuga illum iusto, obcaecati saepe voluptates! Dolores eaque porro quaerat sunt totam ut, voluptas.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Also, don't rely on id's in vue. Use refs or rely on vue binding.
There are several solutions to this, this is one:
In your html add a ref to your h5
<h5 class="card-title" id = "product_name" ref="product_name_{{$count" >{{$subcategory->name}}</h5>
You could add a parameter to the greet function that will receive the index that has been clicked
greet: function (pIndex) { //
// `this` inside methods point to the Vue instance
console.log(this.$refs['product_name_'pIndex].textContent) // Here
alert('Hello ' + this.name + '!')
}

pagerAnchorBuilder - trying to add classes

I'm using Cycle2 to build a carousel gallery and I've run into a little problem regarding styling the pager buttons. What I've gathered is that Cycle2 creates its own pager span tags for each slide which is a bummer becaus I've already styled my the sub-nav markup. This should be a minor issue as long as I can assign individual classes to the spans and change my css accordingly.
However, I can't get this to work.
TLDR: I was hoping that I could use pagerAnchorBuilder to create individual classes for each span. I can't. Help.
The original markup (pre Cycle2) looks like the following:
<div id ="sub-nav" class="sub-nav">
<ul>
<li><a id="available" class="available" href="#"></a></li>
<li><a id="reliable" class="reliable" href="#"></a></li>
<li><a id="use" class="use" href="#"></a></li>
<li><a id="reports" class="reports" href="#"></a></li>
<li class="last"><a id="software" class="software" href="#"></a></li>
</ul>
</div>
<div id="sliding-gallery" class="sliding-gallery home-content">
<ul>
<li>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg">
<section>
<h2>Lorem ipsum dolor</h2>
<p>Sed augue lacus pretium vitae molestie eget rhoncus quis elit. Fusce orci wisi vel ipsum in p</p>
Read More
</section>
</li>
<li>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg">
<section>
<h2>Lorem ipsum dolor</h2>
<p>Sed augue lacus pretium vitae molestie eget rhoncus quis elit. Fusce orci wisi vel ipsum in p</p>
Read More
</section>
</li>
</ul>
<span id="#prev" class="prev">Previous</span>
<span id="#next" class="next">Next</span>
</div>
With Cycle2 it looks like this (note the addition of the span tags)
<div id ="sub-nav" class="sub-nav">
<ul>
<li><a id="available" class="available" href="#"></a></li>
<li><a id="reliable" class="reliable" href="#"></a></li>
<li><a id="use" class="use" href="#"></a></li>
<li><a id="reports" class="reports" href="#"></a></li>
<li class="last"><a id="software" class="software" href="#"></a></li>
</ul>
<span class="cycle-pager-active">•</span><span>•</span><span>•</span><span>•</span><span>•</span></nav>
</div>
<div id="sliding-gallery" class="sliding-gallery home-content">
<ul>
<li>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg">
<section>
<h2>Lorem ipsum dolor</h2>
<p>Sed augue lacus pretium vitae molestie eget rhoncus quis elit. Fusce orci wisi vel ipsum in p</p>
Read More
</section>
</li>
<li>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg">
<section>
<h2>Lorem ipsum dolor</h2>
<p>Sed augue lacus pretium vitae molestie eget rhoncus quis elit. Fusce orci wisi vel ipsum in p</p>
Read More
</section>
</li>
</ul>
<span id="#prev" class="prev">Previous</span>
<span id="#next" class="next">Next</span>
</div>
Cycle2
$('#sliding-gallery ul').cycle({
fx: 'carousel',
carouselVisible: 1,
speed: 'fast',
timeout: 10000,
slides: '>li',
next: '.next',
prev: '.prev',
pager: '.sub-nav',
pagerAnchorBuilder: function(idx, slide) {
return '.sub-nav span:eq(' + idx + ')';
}
});
I hope you are looking for something similar to this demo
jQuery(document).ready(function($){
var slideshows = $('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
// advance the other slideshow
slideshows.not(this).cycle('goto', opts.currSlide);
});
$('#cycle-2 .cycle-slide').click(function(){
var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
slideshows.cycle('goto', index);
});
});
also you can find the above fiddle code on cycle2 website
can you provide your fiddle for this?

Resources