My issue is that when I define a section in a laravel blade (not master) I cannot display it's content on the page, however if I yield it on the master.blade.php it works fine. So how can I make this page display:
section 'content'
section 'template'
#extends('layouts.master')
#section('title', 'Website Builder')
#section('content')
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
#endsection
#section('template')
<div class= "container template_class ">
#foreach ($templates as $template)
<a class="content-link" href="{{ asset($template->file )}}">
<img id = "image" src="{{ asset($template->image )}}"/>
</a>
#endforeach
</div>
<div id="content-link2"></div>
<div class="container">
#yield('content')
#yield('template')
</div>
#endsection
#show
So, if you already have a #section defined in the master layout, it will be overriden unless you specify #parent inside the child layout's #section.
But for #yield, it always gets the section from the child layout. That means it always overrides the #yield part, even if it has a default defined as #yield('section', 'Default Content')
Hope this works!
Related
I am passing a json encoded data to my Vue component as a prop, when I am printing the whole prop variable then it is showing that the data has successfully received, but I am not able to parse the data.
profile.blade.php
#extends('layouts.app')
#section('content')
<my-profile user-details="{{ json_encode($userDetails) }}"></my-profile>
#endsection
MyProfile.vue
<template>
<div class="container">
<div class="row justify-content">
<div class="col-md-3" id="profile-image">
<img class="img-fluid rounded" src="https://www.w3schools.com/bootstrap4/paris.jpg" alt="Profile Image">
</div>
<div class="col-md-12">
<p>{{userDetails}}</p>
<p> Name: {{ userDetails.first_name }} </p>
</div>
</div>
</div>
</template>
<style>
#profile-image {
margin-bottom: 30px;
}
</style>
<script>
export default {
props: ["userDetails"]
}
</script>
Output
{"user_id":2,"first_name":"Shan","last_name":"Biswas","email":"shanpro.2015#gmail.com","phone":"9508168983","created_at":"2019-05-03 05:43:17","updated_at":"2019-05-03 05:43:17"}
Name:
You need to bind the value to the component as dynamic and not static.
So change your blade file to:
#extends('layouts.app')
#section('content')
<!-- see the colon in front of the props, that is a shortcut for v-bind:prop-name -->
<my-profile :user-details="{{ json_encode($userDetails) }}"></my-profile>
#endsection
Otherwise are all values passed to the component as a simple string.
Change this:
<my-profile user-details="{{ json_encode($userDetails) }}"></my-profile>
with this:
<my-profile user-details='#json($userDetails)'></my-profile>
// Pay attention to single quotes instead of double
This worked for me.
Update profile.blade.php to following!
#extends('layouts.app')
#section('content')
<my-profile user-details="{{ $userDetails }}"></my-profile>
#endsection
I have the following blade template:
<body>
<div id="app">
#extends('layouts._navbar')
<main class="py-4">
#yield('content')
</main>
</div>
</body>
Laravel first shows this:
<main class="py-4">
#yield('content')
</main>
And then:
#extends('layouts._navbar')
How do I to show the contents in the right order?
You have to use include instead of extends :
<body>
<div id="app">
#include('layouts._navbar')
<main class="py-4">
#yield('content')
</main>
</div>
</body>
Change the #extends('layout._navbar') to #include('layout._navbar').
Currently you're trying to push your blade file into the layout._navbar, instead of including it.
Laravel documentation on Blade Subviews
Your blade file will look like this after the edit:
<body>
<div id="app">
#include('layouts._navbar')
<main class="py-4">
#yield('content')
</main>
</div>
</body>
In my favorite templating frameworks they typically have the ability to nest layouts. Is this something that is possible in Blade?
For example...
master.blade.php
<html>
<head><!-- stuff --></head>
<body>
#yield('content')
</body>
</html>
nav.blade.php
#extend('master')
<nav>
<!-- nav content -->
</nav>
#yeild('content')
breadcrumb.blade.php
#extend('nav')
<breadcrumb>
<!-- breadcrumb content -->
</breadcrumb>
#yield('content')
home.blade.php
#extend('nav')
#section('content')
<home>
<!-- content -->
</home>
#endsection
about.blade.php
#extend('breadcrumb')
#section('content')
<about>
<!-- content -->
</about>
#endsection
The reason I love this format is that it makes it extremely elegant (IMO) to be able to choose your injection point!
Have a one off landing page...reference master
For the homepage...reference nav
For any subpages (about/nav/product) reference breadcrumb
The layouts cascade and 'content' gets rebuilt with the compiled html as it goes up the tree.
Is this possible? I'm hoping to avoid doing #include in the layouts as I personally find them cumbersome and a bit of an eye sore especially when you get to elements that are repeated often, but not everywhere (breadcrumbs).
EDIT: Based on answers.
Ideally 'content' would be rebuilt and passed up the chain of nested layouts. i.e. If you have the homepage which references nav.blade.php the homepage content gets added to the nav layout and compiled. Then since the nav layout references master.blade.php the compiled layout would be passed up to master and built again. No duplicating of any content.
I'm not sure I get what you're after here. For instance in home.blade.php you extend "nav", which in turn extends "master", but both "master" and "nav" yield content, so the <home> content will render twice.
So, what is your expected output? I'm not sure "home" or "about" should really extend "nav" or "breadcrumb". I think of these two as sort of structural layout components, so it does make sense to me to include them in the master layout. In "nav" you can define a section to extend when your view needs a breadcrumb.
For instance:
master.blade.php
<html>
<head><!-- stuff --></head>
<body>
#include('nav')
#yield('content')
</body>
</html>
nav.blade.php
<nav>
<!-- nav content -->
#yield('breadcrumb')
</nav>
home.blade.php
#extend('master')
#section('content')
<home>
<!-- content -->
</home>
#endsection
about.blade.php
#extend('master')
#section('breadcrumb')
<breadcrumb>
<!-- breadcrumb content -->
</breadcrumb>
#endsection
#section('content')
<about>
<!-- content -->
</about>
#endsection
You forgot using #parent. Here's the example:
master.blade.php
<html>
<head>
{{-- Stuff --}}
</head>
<body>
#yield('content')
</body>
</html>
nav.blade.php
You need to put the nav inside section to tell master layout that this is a content. If you don't, nav will be in the top of master layout (yes, outside html).
#extends('master')
#section('content')
<nav>
<p>nav content</p>
</nav>
#endsection
home.blade.php
In this example, the content section is utilizing the #parent directive to append (rather than overwriting) content to the layout's sidebar. The #parent directive will be replaced by the content of the layout when the view is rendered.
#extends('nav')
#section('content')
{{-- You can control where #parent should be rendered --}}
#parent
<home>
<p>home content</p>
</home>
{{-- You can put your #parent here, give it a try --}}
#endsection
breadcrumb.blade.php
#extends('nav')
#section('content')
{{-- You can control where #parent should be rendered --}}
#parent
<breadcrumb>
<p>breadcrumb content</p>
</breadcrumb>
{{-- You can put your #parent here, give it a try --}}
#endsection
about.blade.php
#extends('breadcrumb')
#section('content')
{{-- You can control where #parent should be rendered --}}
#parent
<about>
<p>about content</p>
</about>
{{-- You can put your #parent here, give it a try --}}
#endsection
Rendered:
home.blade.php
<html>
<head>
</head>
<body>
<nav>
<p>nav content</p>
</nav>
<home>
<p>home content</p>
</home>
</body>
</html>
about.blade.php
<html>
<head>
</head>
<body>
<nav>
<p>nav content</p>
</nav>
<breadcrumb>
<p>breadcrumb content</p>
</breadcrumb>
<about>
<p>about content</p>
</about>
</body>
</html>
I am new to Laravel, I am loving it so far and am trying to utilize the blade templating system as much as possible. What I have right now is my navigation existing in the middle of the screen at the root of the site:
and inside of my home.blade.php:
#extends('layouts.master')
#section('title')
#parent
::Home
#stop
#section('content')
<div class="row col-md-8 col-md-offset-2 text-center indexWrapper">
<div class="indexNav">
<ul class="text-right">
<li>Artists</li>
<li>Bulletin</li>
<li>Something</li>
<li>Something</li>
</ul>
</div>
<div class="indexHeading">
<h1 class="indexH1">Mumbler</h1>
</div>
</div>
#stop
and my master.blade.php
<!DOCTYPE html>
<html>
<head>
<title>
#section('title')
#show
</title>
<link href="{{ asset('bower/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/default.css') }}" rel="stylesheet">
<link href="{{ asset('bower/jquery/dist/jquery.min.js') }}" rel="script">
</head>
<body>
<div class="container">
#section('navigation')
#show
#yield('content')
</div>
</body>
</html>
Now I am also new to Bootstrap, so I apologize for what might be egregious misuse of classes. What I do have though, is a margin of 25% on what wraps this navigation, and when I click on one of the links (I.E. artists), I want that whole navigation to move up (jquery, I can handle that much), and the 'artists' view to appear below. What would be an elegant solution to this? Any resources for a beginner to laravel 4?
Thank you
I believe you should've tagged this as javascript and jquery since blade does not do what you want it to, (move up when someone clicks the link)
I am having trouble rendering a view in my controller. I am currently running Laravel 4 and below is my code. (BTW, I am still learning Laravel particularly the latest version that has not been released yet. I find it a bad idea to learn from the older versions because there seems to be a lot of changes for the current one.)
controllers/PluginsController.php
class PluginsController extends BaseController {
public function index()
{
return View::make('plugins.index')->with(array('title'=>"The Index Page"));
}
views/plugins/index.blade.php
#layout('templates.master')
#section('header')
<h1>The Header</h1>
#endsection
#section('content')
testing the index.blade.php
#endsection
#section('footer')
<div style="background:blue;">
<h1>My Footer Goes Here</h1>
</div>
#endsection
views/templates/master.blade.php
<!doctype>
<html>
<head>
<meta charset="UTF-8" />
#yield('meta_info')
<title>{{$title}}</title>
#yield('scripts')
</head>
<body>
<div id="header">
#yield('header')
</div>
<div id="wrapper">
#yield('content')
</div>
<div id="footer">
#yield('footer')
</div>
</body>
</html>
you must use #extends instead of #layout, and #stop instead of #endsection
Using #extends instead of #layout solved my problem.