i have a question related to Laravel 4 Starter Site
The following is one of the view page.
#extends('site.layouts.default')
{{-- Web site Title --}}
#section('title')
{{{ Lang::get('site.contact_us') }}} ::
#stop
{{-- Content --}}
#section('content')
{{{ Lang::get('site.contact_us') }}}
#stop
In the site.layouts.default template, Jquery is included. How could i include other javascript like
{{ HTML::script('http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js') }}
into the view file? It should included after the jquery library.
Thanks in advance!
You may use:
#section('scripts')
{{ HTML::script('...') }}
#stop
Anywhere in your view after #extends('...'). Because there is #yield('scripts') in the bottom of the layout, right after the scripts (jQuery and BootStrap).
This is another example:
{{-- Scripts --}}
#section('scripts')
<script type="text/javascript">
$(document).ready(function() {
//...
});
</script>
#stop
Related
In old-style Laravel blade templated we used to use #section('section-name') in the following way:
{{-- h1para.blade.php --}}
<h1>
#section('heading')
Heading from Template
#endsection
</h1>
<p>
#yield('details')
</p>
And then extend that template with:
{{-- content.blade.php --}}
#extends('h1para')
#section('details')
Content from content page
#endsection
In the above, my rendered HTML output would look like the following, because the "missing" 'heading' section in the extending file means that we default back to the content in the template:
<h1>Heading from Template</h1>
<p>Content from content page</p>
But in the new components way of doing things, I do:
{{-- .../components/h1para.blade.php --}}
<h1>{{ $heading }}</h1>
<p>{{ $slot }}</p>
In case you haven't gathered, the question is: how do I set a default value for a slot's contents, such that if it isn't supplied in the extending component/template, it falls back to that default?
(I've done my searches, but haven't been able to find the same question asked before)
EDIT:
I should add that I've seen the solution (in the Laravel documentation):
<h1>{{ $heading ?? 'Default Heading Here' }}</h1>
But this seems only to be appropriate if the default value is a short easy to manage string. If the default is a long stream of HTML, then it wouldn't work for my needs.
EDIT 2:
Just to reiterate: the whole point of the question is that the default content could be a long stream of HTML. Solving the problem by passing in a string (be that formatted as HTML or not) wouldn't work for my real-world needs.
I think the solution is this:
{{-- .../component/template.blade.php --}}
<div>
#if (isset($heading))
{{ $heading }}
#else
<h1>Default Heading<span class="subhead">default subheadin and lots of other html content</span></h1>
#endif
<p>{{ $slot }}</p>
</div>
It's not super elegant, but I think it's the only solution. Anyone else have a better answer, I'd love to hear it.
If you pass data like:
<x-h1para header="<span>Header content</span>">
<div>Default slot content here</div>
</x-h1para>
You can display in your component like:
<div>
<h1>{!! $heading ?? 'Default Heading Here' !!}</h1>
{{ $slot }}
</div>
I have created a Livewire component in Jetstream and I have set it as a full-page component in the web.php route page as follows:
use App\Http\Livewire\PostComponent;
...
Route::get('posts/',PostComponent::class)->name('posts');
The post-component.blade.php file has originally the following code:
<div>
<h1>If you look to others for fulfillment, you will never truly be fulfilled.</h1>
</div>
If I hit the URL .../posts I get the following error:
Undefined variable: header (View:
/home/vagrant/laravelapp/resources/views/layouts/app.blade.php)
So I have tried adding the slot in the post-component.blade.php file:
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Dashboard') }}
</h2>
</x-slot>
<div>
<h1>If you look to others for fulfillment, you will never truly be fulfilled.</h1>
</div>
</x-app-layout>
Nevertheless, I get that same error.
What am I missing? How do I fix this?
I hope this is a Jetstream project. By default, livewire will use the app.blade.php as the layout. And the component will get rendered in the slot of the app.blade.php.
But since it's a Jetstream project, it has a slot for the header in the layout file.
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
So to resolve this error, there are two approaches.
give the header as the variable for the layout as below in your PostComponent.php
public function render()
{
return view('livewire.post-component')
->layout('layouts.app', ['header' => 'Post Compoent Page']);
}
Create your own layout and only have a slot. (imagine mylayout.blade.php)
<head>
#livewireStyles
</head>
<body>
{{ $slot }}
#livewireScripts
</body>
and use that layout when rendering the livewire component
public function render()
{
return view('livewire.post-component')->layout('layouts.mylayout');
}
There is a github issue regarding this topic (a closed one). But keep an eye on it. since Jetstream is in it's early stages.
Can laravel built-in html elements be overridden? for example, consider HTML:image tag. I am wondering if I can override it in order to show 'no_available_image.svg' when the given image path doesn't exist.
You can't override an <img> tag (or you shouldn't), but there are other ways to achieve an image fallback.
Also, take in account that HTML:image tag is not a Laravel built-in element, is just HTML and Laravel has nothing to do here.
Blade PHP solution
Check that file exists. If not, it will echo the fallback image.
#if (file_exists(public_path('path/to/image.jpg')))
<img src="{{ asset('path/to/image.jpg') }}">
#else
<img src="{{ asset('images/no_available_image.svg') }}">
#endif
Vue + Blade solution
Following this question, you can create a Vue component like this:
ImgFallback.vue
<template>
<object :data="src" type="image/png">
<img :src="fallback" />
</object>
</template>
<script>
export default {
props: {
src: String,
fallback: String
}
}
</script>
then register it in your app.js
Vue.component('img-fallback', require('./components/ImgFallback.vue'));
So then in your blade templates you can use:
<img-fallback
src="{{ asset('wrong_image_path') }}"
fallback="{{ asset('images/no_available_image.svg') }}">
</img-fallback>
Reusing code
Since you will be using blade and the same fallback image in all cases, you don't want to repeat the fallback attribute everytime, so you can create a blade template called for example image.blade.php and put in the javascript or PHP option. Then in your views call:
#include('image', [ 'path' => 'path/to/your/image.jpg' ])
And use the $path variable to fill the src attribute in the image.blade.php file.
#if (file_exists(public_path($path)))
<img src="{{ asset($path) }}">
#else
<img src="{{ asset('images/no_available_image.svg') }}">
#endif
or
<img-fallback
src="{{ asset($src) }}"
fallback="{{ asset('images/no_available_image.svg') }}">
</img-fallback>
I have default blade , it will have 3 section and one yield content as like below
<div id="wrapper">
#show
#section('sidemenu')
#include('partials.admin_sidemenu')
<div id="page-wrapper" class="gray-bg">
#show
#section('navheader')
#include('partials.admin_navheader')
#show
#yield('content')
#show
#section('footer')
#include('partials.admin_footer')
</div>
</div>
In my login blade i don't want to show header,menu and footer so i have used below code to overwrite the header menu and footer
#extends('layout.default')
#section('sidemenu')
#stop
#section('navheader')
#stop
#section('content')
Login Form
#stop
#section('footer')
#stop
It's not over writing the footer content ... it was a issue?
How can i handle this?
Thanks Advance
You forgot about putting: #show at the end of section declaration:
#section('footer')
#include('partials.admin_footer')
#show
I am looking to Bootstrap my site and as such, have put common twitter bootstrap components into blade templates.
sidebar.blade.php
#include('panel1')
#include('panel2')
panelTemplate.blade.php
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
#yield('title')
</div>
</div>
<div class="panel-body">
#yield('body')
</div>
<div class="panel-footer">
#yield('footer')
</div>
</div>
This way, every time I wish to use a panel, then I can use #extends('panelTemplate').
panel1.blade.php
#extends('panelTemplate')
#section('title')
title panel 1
#stop
#section('body')
body panel 1
#stop
#section('footer')
footer panel 1
#stop
panel2.blade.php
#extends('panelTemplate')
#section('title')
title panel 2
#stop
#section('body')
body panel 2
#stop
#section('footer')
footer panel 2
#stop
The problem that I am facing is that instead of showing the contents of panel1.blade.php, then the contents of panel2.blade.php as declared in sidebar.blade.php the contents of panel1.blade.php is being repeated (shown twice).
Is Blade caching the request which is why panel1 is being repeated twice? Is there a way to override this behaviour or am I using the blade templating engine in a way which it was never intended?
You can achieve this by overwriting the sections.. try what you have already, but with these two updated sub-views:
panel1.blade.php
#extends('panelTemplate')
#section('title')
title panel 1
#overwrite
#section('body')
body panel 1
#overwrite
#section('footer')
footer panel 1
#overwrite
panel2.blade.php
#extends('panelTemplate')
#section('title')
title panel 2
#overwrite
#section('body')
body panel 2
#overwrite
#section('footer')
footer panel 2
#overwrite
It's tested and working here, though I'm not sure it's the intended use of #overwrite, so test thoroughly!