Alpine.js show/hide image for a image selector - alpine.js

Here I have an image selector. When an image link is clicked in the second <\li> it will show in the first <\li>. This works fine.
What I'm trying to figure out how to do is also hide the {{--Place holder Image--}} when the image link is clicked in the second <\li>.
<div x-data="{ image: '' }" >
<ul>
<li>
{{--Placeholder Image --}}
<img x-show="image = true" src="/img/image1">
#foreach($images as $image)
<img x-show="image === '{{ $image->id }}'" src="{{ $image->path }}">
#endforeach
</li>
#foreach($image as $image)
</li>
<a href="#" #click.prevent="image = '{{ $image->id }}'">
<img src="{{ $image->path }}">
</a>
</li>
#endforeach
</ul>
</div>

I was able to figure this out.
Just needed to change 'x-show="image = true"' to x-show="image === ''" in the placeholder image tag.

Related

After Click Add to Cart Button then Button Change to Go to Cart in Laravel 8

Please help me, i'm right now try to change Add to Cart Button to Go to Cart after click, how possible I can do that?, please help me, I have trying but didn't work, here my condition code in Controller:
if (Temporary::where('course_id','=', $request->IDCourse)->exists()) {
Session::flash('failed-session','Go to card');
}
else
{
Session::flash('failed-session','Add to cart');
}
and below my blade for looping product on cart box
#foreach($carts as $cart)
<ul class="list-group list-group-flush">
<li class="list-group-item bg-light">
<div class="row">
<div class="col">
<input type="text" name="IDCourse" value="{{ $cart->course_id }}">
<a href="{{ route('course.detail', $cart->course->id) }}" class="text-body">
<div class="d-flex">
#if($cart->course->image == '')
<img src="{{ asset('storage/courses/Default_Photo.png') }}" alt="" class="avatar-md square" />
#else
<img src="{{ asset('storage/courses/'.$cart->course->image) }}" alt="" class="avatar-md square" />
#endif
<div class="ms-3">
<h5 class="fw-bold mb-1">
{{ $cart->course->title }}
</h5>
<span class="fs-6 text-muted">
<span>{{ __('Oleh ') }}{{ $cart->course->user->name }}</span>
</span>
</div>
</div>
</a>
</div>
</div>
</li>
</ul>
<hr class="my-0">
#endforeach
And the last code to display the result from condition in controller
#if(Session::has('failed-session'))
<div class="alert alert-danger">
{{Session::get('failed-session')}}
</div>
#endif
I try dd($request->course_id) and displaying null. My planning is to check if customer have add to cart that item then the button change to Go to Cart. Please help me.Thank u so much for any help.
simply just check this item in your controller then initialize the variable and check if variable is empty or not , then you can change the action of the form or change the src of the button ,
for example : if user->cart->count() > 0
redirect to the page
you can add another button for continue shopping as well too .

How not to show image if there is none?

I have three table. Category, PostAd and PostImage.
To show post i have to show it from category table.
My controller Code.
$data['category'] = Category::with(['child','children','parent','postads.postimage','postads'=>function($q) use ($asc){
$q->orderBy('created_at',$asc);
}])->where('id',$id)->get();
To display image i have to use nested relationship in postads.postimage.
Blade Code
#foreach($category as $cat)
#foreach($cat->postads as $c)
<a href="{{route('particular',['id'=>$c->id])}}">
<li>
#foreach($c->postimage as $pi)
<img src="{{asset('thumbnail/'.$pi->image)}}" alt="No image" style="margin-top: 5px" >
#endforeach
<section class="list-left">
<h5 class="title">{{$c->adtitle}}</h5>
<span class="adprice">Rs. {{$c->price}}</span>
<p class="catpath">{{$cat->categoryname}} » {{$cat->categoryname}}</p>
</section>
<section class="list-right">
#auth
<div class="like1">
<i class="fas fa-heart" pid="{{$c->id}}" uid="{{auth()->user()->id}}"></i>
</div>
#endauth
<span class="date">{{date('D',strtotime($c->created_at))}}-{{date('M',strtotime($c->created_at))}}-{{date('Y',strtotime($c->created_at))}}</span>
<span class="cityname">{{$c->address}}</span>
</section>
<div class="clearfix"></div>
</li>
</a>
#endforeach
#endforeach
because of foreach loop my design gets damaged.
I want to show image alt but because of this nothing is shown and everything gets damaged.
You can use #forelse
#forelse($c->postimage as $pi)
<img src="{{asset('thumbnail/'.$pi->image)}}" alt="No image" style="margin-top: 5px" >
#empty
<!-- some HTML, default image or something, whatever you need -->
#endforelse
https://laravel.com/docs/5.8/blade#loops

making pagination in laravel for image

Hello for everyone I have a problem in laravel that about the showing images in one view, the problem is: I have a page that just show the images but it show all the images stored in table with specific id but I want to show some of that and have a button (show more) and when click on button it show the other images I don't know hove can I do this if someone can help me please!
This is my controller code:
public function listHostel()
{
$hostels = Hostel::all();
return view('front/khabgah_list',compact('hostels'));
}
And this is my blade code:
#foreach($hostels as $hostel)
#foreach($hostel->attachments as $photo)
<div class=" col-12 col-sm-6 col-md-6 col-lg-3 px-1 mt-3">
<div class="card card-shadow custom-height-1 " style="border-radius: 0%">
<a href="">
<img src="/assets-/app/media/img/blog/hostels-img/{{$photo->file_name}}"
class="card-img-top card-img custom-card-img-height" alt="">
</a>
<div class="car-body">
<div class="card-footer">
<div class="custom-circle">
<p class="custom-circle-text card-text">
<b>
#if($hostel->type == 1)
{{ 'ذکور'}}
#else
{{ 'اناث' }}
#endif
</b>
</p>
</div>
<div class="custom-prices card-text text-left"> کرایه فی ماه
: {{$hostel->remark }}
</div>
</div>
</div>
</div>
</div>
#endforeach
#endforeach
Pagination is likely what you're looking for. Change your controller to:
public function listHostel()
{
$hostels = Hostel::all()->paginate(5);
return view('front/khabgah_list',compact('hostels'));
}
Then you can get the links in your Blade template:
{{ $hostels->links() }}
You might need to change it a bit to work for your specific situation. The documentation gives some more info: https://laravel.com/docs/5.8/pagination

Dompf load forever laravel 4.2

Im using dompf trying to generate a pdf and save it to the storage folder and a database, the problem is when i try to generate the pdf, it never load, when i use the sample code in github it work, it shows "test", but when i try to load a view it takes forever. this is the code i'm using
$pdf = PDF::loadView('emails.myView',$myData);
return $pdf->stream();
I have tried using the download and the save methods, but doens't work and the page load forever but the pdf is never generated.
and the view just show 4 or 6 elements with 1 main call $hist, returning the view is rendered without problems.
<style type="text/css">
Bunch of css.
</style>
<table class="center-block">
<tr>
<td colspan="3">
<img src="{{ asset('images/boletin/btn_cabeza.jpg') }}" class="img-responsive center-block">
</td>
</tr>
<tr>
<td rowspan="4" class="aside">
<a href="{{ URL::to('contacto/donaciones') }}">
<img src="{{ asset('images/boletin/btn_dona.jpg') }}" class="img-responsive center-block" >
</a>
<div class="social-container">
<h3>Siguenos en:</h3>
<hr>
<ul>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-youtube-play"></i></li>
</ul>
</div>
<h2 class="text-blue">Historias Epékeinas</h2>
<br>
#if(count($hist->imagenes) > 0)
<img src="{{ asset('images/news/'.$hist->imagenes->first()->image) }}" class="img-responsive img-boletin" alt="{{ $hist->titles->first()->text }}">
#endif
<div class="bg-green padding-20">
<h2 class="boletin-title">
{{ $hist->titles->first()->text }}
#if(!is_null($hist->subtitle))
{{ $hist->subtitle->titles->first()->text }}
#endif
</h2>
</div>
<hr>
<div class="text-justify">
{{ substr(strip_tags($hist->descriptions->first()->text), 0, 1600) }}[...]
<br>
Leer más
</div>
</td>
</tr>
<?php $k = 0;?>
#foreach($article as $a)
#if($k == 0 || $k%2 == 0)
<tr>
#endif
#if(!empty($principal))
#if($a->slugs->first()->text != $principal->id)
<td class="news fixedHeight bg-{{ $colors[$j] }}">
#if(count($a->imagenes) > 0)
<img src="{{ asset('images/news/'.$a->imagenes->first()->image) }}" class="img-responsive center-block img-boletin" alt="{{ $a->titles->first()->text }}">
#else
<img src="{{ asset('images/logo.png') }}" class="img-responsive center-block img-boletin" alt="{{ $a->titles->first()->text }}">
#endif
<h2 class="boletin-title">{{ $a->titles->first()->text }}</h2>
<p class="text-justify">{{ substr(strip_tags($a->descriptions->first()->text), 0, 300) }} [...]</p>
<a target="_blank" href="{{ URL::to('noticias/'.$a->slugs->first()->text) }}" class="btn btn-default btn-xs pull-right">Leer más</a>
<div class="clearfix"></div>
</td>
<?php $k++; ?>
#endif
#else
<td class="news fixedHeight bg-{{ $colors[$j] }}">
#if(count($a->imagenes) > 0)
<img src="{{ asset('images/news/'.$a->imagenes->first()->image) }}" class="img-responsive center-block img-boletin" alt="{{ $a->titles->first()->text }}">
#else
<img src="{{ asset('images/logo.png') }}" class="img-responsive center-block img-boletin" alt="{{ $a->titles->first()->text }}">
#endif
<h2 class="boletin-title">{{ $a->titles->first()->text }}</h2>
<p class="text-justify">{{ substr(strip_tags($a->descriptions->first()->text), 0, 300) }} [...]</p>
<a target="_blank" href="{{ URL::to('noticias/'.$a->slugs->first()->text) }}" class="btn btn-default btn-xs pull-right">Leer más</a>
<div class="clearfix"></div>
</td>
<?php $k++; ?>
#endif
<?php $j++; ?>
#if($j == 4)
<?php $j=0; ?>
#endif
#if(($k != 0 && $k%2 == 0) || $k == count($article))
</tr>
#endif
#endforeach
<tr>
<td colspan="3" class="text-center">
<h3>© Derechos Reservados Funda Epékeina 2016.</h3>
</td>
</tr>
</table>
<div class="container center-block">
<div class="bg-square bg-blue"></div>
<div class="bg-square bg-yellow"></div>
<div class="bg-square bg-green"></div>
<div class="bg-square bg-pink"></div>
</div>
<div class="clearfix"></div>
what could be wrong? is there any other choice for generating pdf.
Check those points in order:
For Laravel 4.* I suggest you to use this DOMPDF wrapper https://github.com/barryvdh/laravel-dompdf/tree/0.4
Maybe your view is trying to render content out of the page, try to add dinamic page break, you can do so by styling an element with page-break-before: always; or page-break-after: always.; Try to delete the foreach and adding 1 or 2 static element rendering it in one page
Check for errors in the view by rendering it in html with return View::make('emails.myView',$myData)->render();.
Check php and html sintax, dompdf doesn't work if some html tags are
not well closed
Consider to use Knp-snappy library for Laravel https://github.com/barryvdh/laravel-snappy/tree/0.1

How to format Laravel Link with <i> and <span> tags

How to format Laravel Link with <li> and <span> tags, for an example:
Laravel Link
{{ link_to('home', 'Home') }}
Should have to set like this
<li>
<a href="home">
<i class="icon-text-width"></i>
<span class="menu-text"> Home </span>
</a>
</li>
can someone please help me to create Laravel base link with that html tags, thank you
As far as i know, you can not do that using {{ link_to('home', 'Home') }}. However, instead you can do something like the following:
<li>
<a href="{{ route('home') }}">
<i class="icon-text-width"></i>
<span class="menu-text"> Home </span>
</a>
</li>
or you can use url() helper function.
<li>
<a href="{{ url('/') }}">
<i class="icon-text-width"></i>
<span class="menu-text"> Home </span>
</a>
</li>

Resources