Blade: extending a template in multiple subviews - laravel

I am using Blade to include multiple sub-views into a single set of tabs in a blade app. All of the sub-views have the same overall structure (a sidebar and a main section). Because of this, I have created a template and each sub-view extends the template. Here is the structure:
Main.blade.php
<div id="tabs">
<ul>
#foreach($views as $view)
<li>{{$view}}</li>
#endforeach
</ul>
#foreach($views as $view)
<div id="{{$view}}">
#include($view)
</div>
#endforeach
</div>
template.blade.php
{{-- formatting stuff --}}
#yield('content 1')
{{-- more formatting stuff --}}
#yield('content-2')
{{-- more formatting stuff --}}
tab-*.blade.php
#extends('template')
#section('content-1')
This is tab [whatever number]
#stop
#section('content-2')
Lorem Ipsum
#stop
The obvious problem here is that, as each sub-view extends the same template, the #yield('content') exists 3 times, and all 3 included sub-views have their own #section('content'). What appears to be happening is that the first sub-view's implementation of the content section is getting placed in all 3 yields.
My intent here is obvious. I want each included sub-view to implement it's own instance of the template, place it's content in the content section, THEN get pulled into the main page. Can this be done?
If I flatten the tab-*.blade.php files and stop using the template, it works fine. The problem here is that I end up with a lot of code repetition that would be better placed in a template. This is an emergency option, but I'd like to do it the "proper" way.
NOTE
I have tried to redesign this to avoid the problem, but I really can't come up with another solution. While #include is typically used to pull in small, static pieces (a header, a footer, etc.), I have not read anything that states this as a restriction. It seems to me that the best approach is to store each view once and pull them into the main page when needed, so that's how I've designed it.

Try using the #overwrite command instead of #stop
Example:
#extends('template')
#section('content-1')
Stuff goes here...
#overwrite
#section('content-2')
More stuff goes here...
#overwrite
Source: https://github.com/laravel/framework/issues/1058#issuecomment-17194530

I came up with a hack that seems to work. In template.blade.php, I use the following:
{{-- formatting stuff --}}
#yield(isset($tab) ? "content-1-$tab" : 'content-1')
{{-- more formatting stuff --}}
#yield(isset($tab) ? "content-2-$tab" : 'content-2')
{{-- more formatting stuff --}}
Then, in main.blade.php, I execute #include('view', ['tab'=>$view]). This seems to cause each instance of content-1 and content-2 do be named distinctly, allowing the 2 subviews to implement the sections separately. This also should allow any other views that implement this template to continue to function without having to change anything.

Related

Blade templating variable reference

I have a list of items which I want to render in the following way:
#foreach($campaignList as $campaign)
<div class="col-md-{{12/$columns}}">
#include('admin.includes.campaign_card',['campaign'=>$campaign,'link'=>true])
</div>
#endforeach
The admin.includes.campaign_card template (with debug)
#extends('admin.includes.base_campaign_card')
{{$campaign}} // Here the data is okay
#section('options')
{{$campaign}} //Here however I get the first item on each loop
#endsection
Basically the campaign object within the section remains the same when looping.
It seems that the issue is related to the fact that you can have just one section with a given name at a time.
There is way to force blade to rerender with #overwrite directive (which is not in the docs apparently) instead of #endsection.
Github comment

What's the difference between Laravel Blade's `#yield` and `#include`?

I'm learning Laravel (starting at version 5.3) and these two Blade directives look very similar, the only difference I know is that #include injects the parent's variables and can also send other variables.
What's the difference between #yield and #include?
When should I use #yield?
When should I use #include?
#yield is mainly used to define a section in a layout. When that layout is extended with #extends, you can define what goes in that section with the #section directive in your views.
The layout usually contains your HTML, <head>, <body>, <header> and <footer>s. You define an area (#yield) within the layout that your pages which are extending the template will put their content into.
In your master template you define the area. For example:
<body>
#yield('content')
</body>
Let's say your home page extends that layout
#extends('layouts.app')
#section('content')
// home page content here
#endsection
Any HTML you define in the content section on your homepage view in the 'content' section will be injected into the layout it extended in that spot.
#include is used for reusable HTML just like a standard PHP include. It does not have that parent/child relationship like #yield and #section.
I highly suggest reading the Laravel Blade documentation for a more comprehensive description.
#include and #yield are two completely different types of operations to import code into the current file.
#include - import the contents of a separate file into the current file at the location in which it is placed. i.e.:
Layout file:
< some html or other script >
#include('include.file_name') // "include." indicates the subdirectory that the file is in
< more html or other script >
Include File ( a blade file with a block of code ):
< some cool code here >
The contents of 'file_name' ( also a blade file ) is then imported in where the #include directive is located.
#yield imports code from a "section" in the child file ( the "view" blade file. ) i.e.:
Layout file:
< some html or other script >
#yield('needed_section_name')
< more html or other script >
The following section is needed in the "view" blade file that is set to "extend" that layout file.
"View" blade file:
#extends('layout.file_name')
... code as neeeded
#section('needed_section_name')
< some cool code here >
#stop
...
more code as needed
Now the layout file will import in the section of code that matches the naming used.
More on the subject here....
The difference between #yield and #include is how you use them.
If you have a static kind of content, like a navbar, this part of the page will always be in the same place in the layout. When you use #include in the layout file, the navbar will be put once per layout. But if you use #yield you will be enforced to make a #section of the navbar on every page that #extends the layout.
#yield is, on the other hand, a better choice when content is changing on all the pages but you still want to use the same layout everywhere. If you use #include you'll have to make a new layout for every page, because of the difference of content.
Today I was trying to figure out this difference as well, and where to use each, and why would I want to use one over the other. Please be warned this answer is verbose and probably very over-explained.
Snapey from the Laracasts forums got me started thinking about them properly:
https://laracasts.com/discuss/channels/laravel/whats-the-difference-between-atinclude-and-atyield
First off, #include is going to include an entire file, just like the PHP include function. That's great if you're just dumping an entire file of content into the <body> of your page, for example the following is going to include everything inside of 'content.blade.php':
<!-- layout.blade.php -->
<body>
#include('content')
</body>
<!-- content.blade.php -->
<div>
<div>
<p>Hey this is my content.</p>
</div>
<div>
<span>and stuff</span>
</div>
</div>
But #yield, in conjunction with #extends and the #section and #endsection directives, will allow you to have your content chunked into separate sections, but kept all in one file. Then you can #yield it into the layout in separate chunks. The visual that comes to mind is shuffling one half of a deck of cards into the other half, in a classic "riffle" shuffle:
<!-- content.blade.php -->
#extends('layout')
#section('top_content')
<h1>Hey I'm the title</h1>
#endsection
#section('middle_content')
<p>Hey how's it going</p>
#endsection
#section('other_content')
<p>It's over now.</p>
#endsection
<!-- layout.blade.php -->
<body>
<div>
#yield('top_content')
</div>
<p>Some static content</p>
<div>
#yield('middle_content')
</div>
<p>Some more static content</p>
<div>
#yield('other_content')
</div>
<div>Static footer content of some kind</div>
</body>
Secondly and maybe more importantly, the flow of control is sort of inverted, in a way that makes everything much more coherent. In the first example, with #include, you'd be calling the layout file with the view helper, in sort of a top-down way. For example this might be your code:
Route::get('/', function () {
return view('layout');
});
But with #yield and #extends, (as in the second example) you call the content file itself, and the content file will first look at the #extends directive to drape itself with the layout file, like it is putting on a coat. So it happens in reverse, in a sense, like bottom-up. Then the #yield directives inject the content as specified. The content file is who you are talking to in your router/controller:
Route::get('/', function () {
return view('content');
});
You call the content view, it looks at the #extends directive to pick the layout, and then the #yield directives in the layout file inject the matching #section sections into the layout.
So this way is much more useful because in practice you'll be referring to different content when you refer to different views.
If you were only using the #include statement to build your views, then you'd have to pass a different content slug to the layout file that you are calling every time, maybe like this:
Route::get('/welcome', function () {
return view('layout', ['content' => 'welcome']);
});
Route::get('/profile', function () {
return view('layout', ['content' => 'profile']);
});
<!-- layout.blade.php -->
<body>
#include($content)
</body>
And that seems like a mess to me.
That all being said, #include seems like a great way to include a little snippet in your layout file (the one called by the #extends directive), like the nav bar, or the footer, or something you just want to separate out of your layout file for organizational purposes.
#yield should be used when your contents will be changed
#include should be used for contents that wont change. e.g header, footer
#include used for reusable code like navbar, we have to design navbar one time and use it in our whole site.
#yield used for sections that change again and again like body.
for example you have already your layout structure where you #include('some scripts or style'). it will not allow you to change its directive while #yield you can change its content. means you create a section to yield into your layout.blade.php. you can use yield also if you have a specific script or style in each page.
#include('layouts.nav') //default when you call layout.blade.php
<div class="container">
#yield('content') //changes according to your view
</div>
#include('layouts.footer') //yes you can use #yield if you have specific script.

Is it recommended to make general partials for modals, drop-downs etc in Laravel Blade?

I am looking for a very general way to include bootstrap components in my blade view. For example let's say I need a drop down in my view, should I make a partial called dropdown.blade.php with code as follows:
<div class="dropdown">
<a href="#" class="dropdown-toggle" type="button" data-toggle="dropdown">
<span class="glyphicon glyphicon-chevron-down"></span></a>
<ul class="dropdown-menu">
#foreach ($options as $option)
<li>{{$option["name"]}}</li>
#endforeach
</ul>
</div>
and use it in my view in the following way:
#include('partials.dropdown',
array("options"=>array(
["href"=>"#", "name"=>"Profile"],
["href"=>"#", "name"=>"Report"],
)))
Even we can make it more generic by adding options for button name etc. Is it a good or preferable way to do it or should we use copy-paste method from bootstrap website to our views every time? Is there any package that is doing this sort of work? Can we make it in more elegant way?
This seems like a good idea if you are going to re-use the component a lot. I think the more elegant way to do it would be to create custom blade directives:
https://laravel.com/docs/master/blade#extending-blade
Then you could do, for instance:
#dropdown($options, 'btn-primary')
I would also provide an argument for a custom element ID or name, so you can reference it elsewhere on the page as needed.
This gets a little more complex with things like modals. I think you'd want to register multiple blade directives so you could do something like
#startmodal
#modaltitle('Title')
#startmodalbody
Some body content
#endmodalbody
#endmodal

Need an efficient way to avoid repeated code snippets using Laravel 5

I have a view that creates 9 blocks in an HTML page. Each block can either have one large note (like a sticky note) or up to 6 small notes.
On each of the notes there is an option to show a comment.
The code to make those comment options thus appears 18 times in the view - there must be a better way to do it rather than have the code block appear so many times. A function that writes it out perhaps?
This is the code block:
<!-- start comments popover -->
<div class="popover-medium">
<a href="javascript:void(0)" class="icon-entypo icon-text-document btn-note trigger" data-toggle="popover" data-placement=right></a>
<div class="popover-avatar content hide">
<ul class="row popover-content border-bottom list-inline">
<li class="col-xs-9">
<span class="small clearfix"></span>
<span class="small">
#if (!empty($name->comments))
{{$name->comments}}
#else
No comments
#endif
</span>
</li>
</ul>
</div>
</div>
<!-- end comments popover -->
Any ideas/direction would be greatly appreciated!
Add your code block to a new blade file e.g. myblock.blade.php
Then in your main view you can call #include('myblock')
When the page renders it will replace the #include line with your block of code.
Also, its not totally clear what your question is. But it may also be worth noting that you can do this:
#foreach($array as $item)
#include('myblock', ['item'=>$item])
#endforeach
Then just reference $item in your block of code. You may actually not need to pass the $item as an argument to #include as I think when the page renders, the script can use all variables in the page.
Note: Some people struggle with the naming convention of blade views. See my answer to a previous post if you are struggling

Using Laravel Blades

i have started working in Laravel, and working with .blade.php templates, but am not able to understand the benefit for using blad.php and also while having a master page, why we put our code in some other pages with #sections and #yeild
like
masterpage.blade.php
<div>
#yeild(section)
</div>
index.balde.php
#section
Hellow world
#endsection
why i need to do it like that? why we can't just put our Text in the same page instead of doing this method, what are the benefits if we code like that.
There are lot of benefits in using Blade with Laravel, please read it here
http://culttt.com/2013/09/02/using-blade-laravel-4/
The short answer for you questions is we do not need Blade engine in any project. However, using it brings many benefits.
Simplify script file
Like other templating engine, Blade engine simplify your PHP scripts by some replacement such as :
<?php echo $foo ?> changed to {{ $foo }} (reduce 8 characters)
<?php if ($condition): ?> changed to #if ($condition) (reduce 6 characters)
<?php echo trans('lang.key') ?> changed to #lang('lang.key') (reduce 11 characters)
...
Try to calculate how many character you can save if using Blade engine in your script.
Another thing I love in Blade engine is that we can create our own custom control structure. If you are tired of typing $var->format('Y-m-d H:i:s') every time you need to output a DateTime object. You can create custom matcher with Blade
Blade::extend(function($view, $compiler)
{
$pattern = $compiler->createMatcher('datetime');
return preg_replace($pattern, '$1<?php echo $2->format('m/d/Y H:i'); ?>', $view);
});
Now, all you need to to is replace $var->format('Y-m-d H:i:s') by #datetime($var).
View inheritant
By supporting section, Blade engine help developer organize their view file in a hierarchical and logical way. Imagine that you have HTML code for some pages of your website: a home page, a category archive page and a single post page. All there page have the same header, footer and sidebar. If we " put our Text in the same page instead of doing this method", the content of there files have a large amount of similarities, which cause any changes in the future very painful.
With Blade sections, create a simple master layout file like that
<html>
<body>
#section('sidebar')
<!-- this is header code -->
#show
#section('sidebar')
<!-- this is sidebar code -->
#show
<div class="container">
#yield('content')
</div>
#section('footer')
<!-- this is footer code -->
#show
</body>
</html>
In the view file for each page, you only need to take care of the main content of the page, instead of other parts.

Resources