Here is the content of my home.blade.php file:
#extends('layouts.master')
#section('content')
#extends('partials.sidebar')
#section('pagecontent')
This is home
#endsection
#endsection
layouts/master.blade.php contains the main layout which has the typical <html><head><body>structure. In it's <body>, I am yielding to a section called content:
<!DOCTYPE html>
<html>
<body>
<div id="app">
#yield('content')
</div>
</body>
</html>
and in my parials/sidebar.blade.php, I am yielding to a section called pagecontent:
<div id="page-content-wrapper">
<div class="container-fluid">
#yield('pagecontent')
</div>
</div>
So I would naturally expect a DOM like this:
<!DOCTYPE html>
<html>
<body>
<div id="app"> <!-- #section('content') -->
<div id="page-content-wrapper">
<div class="container-fluid">
This is home <!-- #section('pagecontent') -->
</div>
</div>
</div>
</body>
</html>
Unfortunately, that's not the DOM my blade views are rendering. My sidebar partial doesn't get injected inside the master layout, instead, it is appended to the DOM as a sibling of the Entire Document:
<div id="page-content-wrapper">
<div class="container-fluid">
This is home <!-- #section('pagecontent') -->
</div>
</div>
<!DOCTYPE html>
<html>
<body>
<div id="app"> <!-- #section('content') -->
</div>
</body>
</html>
How can I fix this?
You can't use #extends like this. Use #include instead:
#include('partials.sidebar')
Related
In the Following the '#yield' function is not working,It is showing as normal words not like blade function keywords
#yield('content')
</div>
#yield('footer')
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Admin | #yield('title')</title>
<!--Has all the sylesheets attached already!-->
#include('Elements/_head')
<!--Custom CSS or CSS Files for particular page-->
#yield('styles')
</head>
<body class="hold-transition skin-blue sidebar-mini" onload="startTime()">
<div class="wrapper">
<!--Application Header-->
#include('Elements/_header')
<!--Application Sidebar-->
#include('Elements/_side')
<!--Page Content Main-->
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
#yield('title')
<small></small>
</h1>
</section>
<!-- Main content -->
<section class="content">
<img id="loader" src="{{url::asset('images/loading.gif')}}">
#yield('content')
</section>
</div>
<!--Footer of Application-->
#include('Elements/_footer')
</div>
<!--Has all the scripts already attached-->
#include('Elements/_base')
<!--Custom scripts for particular pages-->
#yield('scripts')
</body>
</html>
I have a laravel application.
I am using bootstrap in the frontend alongwith blade templates.
I want to add a background image to my landing page.
I am trying to style the page by putting a background image to the body. But its not working as in the image is not showing
Below is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet' type='text/css'>
</head>
<style>
body {
background-image: {{url('/images/gym_background.jpg')}};
}
</style>
<body>
#include('partials.header')
<div class="container">
#yield('content')
</div>
</body>
</html>
In My chrome console i don't see any error of not loading the image.
The code for content section
#extends('layouts.master')
#section('content')
<div class="row">
<div class="col-md-12">
<h3>Welcome to your neighourbood Gym</h3>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h1 class="post-title">Plans</h1>
<p>Plans available in our gym!</p>
<p>Click to view</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12 text-center">
<h1 class="post-title">Gallery</h1>
<p>Have a look around our gym</p>
<p>Click to view</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12 text-center">
<h1 class="post-title">Contact us</h1>
<p>Click for more details</p>
</div>
</div>
#endsection
Best Regards,
Saurav
Given the following folder structure:
`/public/images/gym_background.jpg`
Change this:
<style>
body {
background-image: {{url('/images/gym_background.jpg')}};
}
</style>
To this:
<style>
body {
// Add a . in front to look in the right folder + dropping the double {{ }}
background-image: url('./images/gym_background.jpg');
}
</style>
Here is a good read on relative vs absolute paths for the extra curious.
If you don't see the image and there's no 404 error in the network inspector, then probably your image is hidden under some other element that takes all the screen and has solid (white?) background. Try setting the same CSS on div.container, then it should work.
UPD: Scratch that, the problem is curly braces. It will work if you remove those {{ and }}.
I'm new to Laravel and i'm not quite sure yet how everything works. I'm trying to break appart code into various sections by including the begining of the page, and then create a hero section followed by some html in that page.
Everything shows but the html code that is on the page is rendering on top of everything else.
This thread looked like it could be things not being closed but as i see it everything is working as it should
Including header in wrong place Laravel 4
#include('blocks/scripts')
#extends('blocks/hero')
#section('title')
text here
#stop
#section('subtitle')
another text
#stop
<div class="container">
<div class="row">
<div class="col-12">
more text
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
</div>
</div>
#include('blocks/footer')
This is the file. The HTML block is being rendered right after the "scripts", followed by "footer" and then it shows the "hero".
The order should be scripts->hero->html->footer
#include('blocks/scripts') just has html code
#extends('blocks/hero') has #yield('title') and #yield('subtitle')
#include('blocks/footer') just text
I changed the names of some templates because it is difficult to understand the code what you put in the comments. But I think it can help you to organize your code.
The template where you have the html, head and body tags, is not a template to be included, but to extend other templates from it, and make use of a yield. For example #yield ('main-content'):
blocks/main.blade.php:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
#yield('main-content')
</body>
</html>
blocks/hero.blade.php
This is a template that you could extends from the main one and adding content to the #yield('main-content') with #section('main-content'):
#extends('blocks/main')
#section('main-content')
<div class="container-fuid mx-0 wlgx_hero">
<div class="row">
<div class="col-12">
#include('blocks/header')
<section id="hero_text">
<h1 class="text-center text-white py-5">
#yield('title')
</h1>
<hr class="purple_line pb-3">
<section id="subtitle">
<p class="text-center">
#yield('subtitle')
</p>
</section>
</section>
</div>
</div>
</div>
#yield('hero-content')
#endsection('main-content')
The blade in your question (I don't know the name) can, in turn, extends from hero, and fill their yields:
#extends('blocks/hero')
#section('title')
text here
#stop
#section('subtitle')
another text
#stop
#section('hero-content')
<div class="container">
<div class="row">
<div class="col-12">
more text
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
</div>
</div>
#stop
The last one is the view that you have to return from a route or controller, so that everything works.
Hope it's help
In blade files, every direct HTML outside of #section('something') will be rendered at the top of the file.
You need to put #yield('something') in the extended file then wrap your HTML code with #section('something') and #endsection('something') like what you do with title and subtitle.
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>
If I add some custom tags in my spring-boot project, is it possible use them inside a thymeleaf-based file? For instance, if I had this tag defined in my TLD file (place in the directory /src/main/resources/static):
<tag>
<name>Input</name>
<tag-class>org.store.custom.taglib.form_control.InputTag</tag-class>
</tag>
Do I could use this in my view like that:
<p th:case="'Input'"><f:Input/></p>
Anyone knows if this is possible?
UPDATE
I try that, but when I run the application, the custom tags are not processed into the corresponding tags:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="/form.tld" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>cadastro</title>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">cadastro</h3>
</div>
<div class="panel-body">
<f:form th:attr="action=#{/__${command.getClass().getSimpleName()}__/cadastra}">
<div th:each="item : ${command['class'].declaredFields}">
<div th:each="item2 : ${item.declaredAnnotations}">
<div th:switch="${item2.annotationType().simpleName}" th:with="index=${itemStat.index}">
<p th:case="'Checkbox'"><f:Checkbox/></p>
<p th:case="'DataList'"><f:DataList/></p>
<p th:case="'Input'"><f:Input/></p>
<p th:case="'Radiobutton'"><f:Radiobutton/></p>
<p th:case="'Select'"><f:Select/></p>
<p th:case="'Textarea'"><f:Textarea/></p>
</div>
</div>
</div>
</f:form>
</div>
</div>
</body>
</html>
No. Thymeleaf's fundamental principle is that no alien tags should exist. (Only standard html). All dynamic content is added via custom attributes.
You can use this way
<input th:attr="your string message ='\'' + #{yourObject.meesage}" + '\''"/>
More examples: https://attacomsian.com/blog/thymeleaf-custom-html-attributes