I create a main page and all its code means header, footer etc i distribute in different pages - laravel

I create a main page and all its code means header, footer etc i distribute in different pages and i linked all pages with main page through include method...main page work properly except one code given below
main pages
<!doctype html>
<html lang="en">
#include('partails._header')
<body>
<!-- < navbar-->
#include('partails._navbar')
<!-- end navbar -->
<div class="container">
#include('partails._body')
</div>
<hr>
#include('partails._footer')
#include('partails._script')
</body>
</html>
folder name partials and _body i want to include in main page but not work
_body code is given
<div class="row">
<div class="col-md-4">
<div class="list-group">
First item
Second item
Third item
</div>
</div>
{{-- end 4 --}}
<div class="col-md-8">
#yield('content')
</div>
</div>
{{-- end row --}}
folder name partials and _body i want to include in main page but not work
_body code is given
<div class="row">
<div class="col-md-4">
<div class="list-group">
First item
Third item
</div>
</div>
{{-- end 4 --}}
<div class="col-md-8">
#yield('content')
</div>
{{-- end row --}}

If your body.blade.php is located in partials folder just include this way
#include('partials.body')
By saying yield('content') not working properly, what do you mean? How are you passing other view(blade) to the main page via content?

Related

Laravel 6 view include from sub directory not working

I need to include two blade files navbar & sidebar (located in views/layouts/partials) in another blade template named admin.blade.php (located in views/layouts). So in admin.blade.php. I wrote
<div class="page-body">
#include('partials.sidebar')
<div class="page-content-wrapper">
<div class="page-content-wrapper-inner">
<div class="content-viewport">
#include('partials.content')
</div>
</div>
</div>
</div>
it gives me this error:
Facade\Ignition\Exceptions\ViewExceptionView [partials.navbar] not
found.
Can you help me? thanks in advance.
You should put layouts as part of the path, so your template code should be like below:
div class="page-body">
#include('layouts.partials.sidebar')
<div class="page-content-wrapper">
<div class="page-content-wrapper-inner">
<div class="content-viewport">
#include('layouts.partials.content')
</div>
</div>
</div>
</div>

Laravel - HTML rendering in the wrong place

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 need help display data in a two column div in laravel blade file

Im having trouble displaying data in a two column div in laravel using bootstrap. The content of the other div is going below the other for some reason. Heres the code.
#extends('layouts.app')
#section('content')
<!--twitch client id!-- vzq62rzb1bbh0d1ebtp5pcx70ysvva!-->
<h1>Hello {{user->user_name}}</h1>
<body background = "img/cool_background.png">
<div class = "container">
<div class = "col-md-3">
<div id = "firstNewsCard" class = "row wow fadeInLeft">
</div>
<div class = "c0l-md-9">
<!--the other column div!-->
</div>
</div>
</body>
#endsection
you made a little mistake, '0' instead of 'o'
<div class = "c0l-md-9"> --> ` <div class = "col-md-9">`
good luck
As bootstrap doc suggests, you should use an element with class="row" to wrap all inner col-x-y classed elements (with "x" being xs, sm, md or lg and "y" usually summing 12, could be less but not more), like:
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-9">
</div>
</div>
</div>

Spring: Not display image in thymeleaf

I'm doing Spring project use Spring Boot, Spring MVC, Spring Data. Now I have a problem maybe with thymeleaf
This is my index page
Logo Bonfire and room picture is image and save in folder src/main/resource/static/images in eclipse .
When I use Search function, it will display Search page like this picture
I don't know why it's not display logo image and room image although I use one template for my index page and search page... And it's still happened with detail page too, images is not displayed. Only index page displayed images
I think the problem is not by code... I don't know why
This is my room.html (index page and search page)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="Header :: head">
</head>
<body>
<div th:replace="Header :: header" class="header"></div>
<div class="container">
<div class="products">
<h2 class=" products-in">AVAILABLE ROOM</h2>
<div class=" top-products">
<span th:each="room,iterStat : ${room}">
<div class="col-md-3 md-col">
<div class="col-md">
<a th:href="#{/room/{id}/detail(id=${room.id})}" class="compare-in"><img th:src="#{'images/'+${room.image}}" alt="" />
</a>
<div class="top-content">
<h5><a th:href="#{/room/{id}/detail(id=${room.id})}"><tr th:text="${room.name}"></a></h5>
<div class="white">
<a th:href="#{/room/{id}/book(id=${room.id})}" class="hvr-shutter-in-vertical hvr-shutter-in-vertical2">BOOK</a>
<p class="dollar"><span class="in-dollar">$</span><span>2</span><span>0</span></p>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</span>
<div class="clearfix"></div>
</div>
</div>
</div>
<div th:replace="Header :: footer" class="footer"></div>
</body>
</html>
Pleased help me
Use this approach to set the image :--
<div th:style="'background-image:url('+ ${room.image}+');'"></div>
Use something like this.
<img th:src="${'images/'+ room.image}" />

Looking for all descendant elements which parent does not have this css class

I am trying to get all children which has specific class and parent of this parent does not have a specific class.
I am trying a code like this, but it's not working.
$hrefs = $xpath->evaluate("//div[not contains(#class, 'tested-app-section')]/div[#class='product-container-body']/div");
Structure of the HTML I am working with and need to edit a little bit looks like this, other HTML content in <body> is irrelevant. (<body> contains more then just this block of HTML):
<body>
<div class="product-detail-section tested-app-section">
<div class="product-container-head"> ... </div>
<div class="product-container-body"> ... </div>
<div class="product-container-body"> ... </div>
</div>
<div class="product-detail-section publish-app-section">
<div class="product-container-head"> ... </div>
<div class="product-container-body"> ... </div>
<div class="product-container-body"> ... </div>
</div>
<div class="product-detail-section product-specific-section">
<div class="product-container-head"> ... </div>
<div class="product-container-body"> ... </div>
<div class="product-container-body"> ... </div>
</div>
I am trying to avoid in the result the very first <div> box (box with class "tested-app-section"), then I am trying to avoid everything witch class "product-container-head".
But I just cannot find a way how to do it.
Edit: So basically I am trying to get
/html/body/div[contains(#class, 'product-detail-section') AND not contains(#class, 'tested-app-section')]/div[not(#class='product-container-head')]
but this code doesn't return anything...
You are close, but missed a few things. Try this xpath expression and see if it works:
//div[not(contains(#class, 'tested-app-section'))]/div[not(#class='product-container-head')]

Resources