I'm new to laravel. I have two pages A and B which uses tables. Now in my layout.blade.php I have a link towards only one stylesheet which is affecting both the tables in A and B. I only want it in A and for B I have different set of stylesheet. How do I target the stylesheet to the pages?
You can load css files directly in these views, so A would load one css and B will load another one.
Another way if to use conditional loading in layout.blade.php:
#if (request()->is('pageA'))
// Load CSS for A
#elseif (request()->is('pageB'))
// Load CSS for B
#endif
Usually in this case you should have a master layout that only include global scripts and stylesheets, says layouts/global.blade.php
<!doctype html>
<html lang="en-US">
<head>
<title>Your website</title>
#section('meta')
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
#show
#section('stylesheets')
<link rel="shortcut icon" href="{{asset("favicon.ico")}}" type="image/x-icon"/>
<link type="text/css" rel="stylesheet" href="{{asset("css/global.css")}}"/>
#show
#section('scripts')
<script src="{{url("js/global.js")}}"></script>
#show
</head>
<body>
#yield('content')
</body>
</html>
Then in your page_a.blade.php, you extend it and include your own specific stylesheets:
#extends('layouts/global')
#section('stylesheets')
#parent
<link type="text/css" rel="stylesheet" href="{{url("css/page_a.css")}}"/>
#endsection
#section('scripts')
#parent
<script src="{{url("js/page_a.js")}}"></script>
#endsection
#section('content')
Your page A content
#endsection
I think you may create a section like the following in your view, for example:
#extends('layouts.master')
#section('styles')
<link href="{{asset('assets/css/custom-style.css')}}" />
#stop
Hope this helps you.
You can use sass css for that conditions. In that sass css you can use if and else condition and check variable.
Please refer below link for how to use it.
http://thesassway.com/intermediate/if-for-each-while
Related
I'm new to laravel. I use master.blade as the main layout of my website. Just wondering if there is any way to add an extra word with CSS links written inside master.blade from the child class.
For example, below is master.blade inside the layouts folder of views.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<title>#yield('title')</title>
#section('meta_tags')
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="format-detection" content="telephone=no">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
#show
<!-- CSS Style -->
#section('styles')
<link rel="icon" type="image/png" href="assets/images/favicon.png"><!-- fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i"><!-- css -->
<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="assets/vendor/owl-carousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="assets/vendor/photoswipe/photoswipe.css">
<link rel="stylesheet" href="assets/vendor/photoswipe/default-skin/default-skin.css">
<link rel="stylesheet" href="assets/vendor/select2/css/select2.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/style.header-spaceship-variant-one.css" media="(min-width: 1200px)">
<link rel="stylesheet" href="assets/css/style.mobile-header-variant-one.css" media="(max-width: 1199px)">
<!-- font - fontawesome -->
<link rel="stylesheet" href="assets/vendor/fontawesome/css/all.min.css">
#show
</head>
<body>
<div class="site">
{{-- ------------------ H E A D E R ------------------ --}}
#section('header')
#include('includes.header')
#show
{{-- ------------------ C O N T E N T ------------------ --}}
#section('content')
<div class="container-fluid">
#include('includes.message')
#yield('content')
</div>
#show
{{-- ------------------ F O O T E R ------------------ --}}
#section('footer')
#include('includes.footer')
#show
</div>
</body>
</html>
Below is the class in which CSS is loading perfectly fine because it is inside the UI folder of the view and the links are
welcome.blade.php
#extends('layouts.master')
#section('title', 'Saleem Motors')
#section('content')
// Some content
#endsection
But when the blade file is inside the subfolder of the ui folder, it is not loading. I have to copy all the CSS links and paste them into each blade file manually and add ../ to make it CSS files work there. i.e. I have to change
<link rel="stylesheet" href="assets/css/style.css">
to this in each subfolder blade file
<link rel="stylesheet" href="../assets/css/style.css">
Now my question is,
Is there any way to automatically add ../ or this ../../ for subfolder blade files to get CSS links added in master.blade layout file to make it work as desired???
I'm bad at explaining things, I hope you get the point.
So I have this view1.php where I want to pass different values from different links to view2.php.
I manage to pass and get the value, but the css I put in my layout.php just won't work for view2.php.
I don't know where I'm doing it wrong.
Are there another way to pass different values other than this?
view1.php
#extends('layouts.layout')
#section('content')
<div>
OP 6000
OP 10000
OP 20000
</div>
#endsection
web.php
Route::get('/pass/{id}','User\MyController#postID');
MyController.php
public function postID($id) {
return view('user.view2', [
'id' => $id
]);
}
view2.php
#extends('layouts.layout')
#section('content')
<div>
{{$id}}
</div>
#endsection
layout.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<link rel="stylesheet" type="text/css" href="css/materialize.css" media="screen,projection"/>
<link rel="stylesheet" href="css/bootstrap/bootstrap.css">
<link rel="stylesheet" href="css/user.css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<nav> </nav>
<main class="">
#yield('content')
</main>
<footer> </footer>
#yield('alert')
</body>
<script type="text/javascript" src="js/materialize.min.js"></script>
</html>
Seems the css is not loading in view2.php. You need to use baseurl to load css.
Example : <link rel="stylesheet" href="{{URL::asset('css/user.css')}}">
This issue occurs because when you redirect another view your CSS not load properly.
My advice to you is using the assets method.
<link rel="stylesheet" type="text/css" href="{{ asset('css/materialize.css') }}" media="screen,projection"/>
<link rel="stylesheet" href="{{ asset('css/bootstrap/bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('css/user.css') }}">
Just because the URL of your view2 are http://something.com/pass/some_id and you are linking stylesheets by css/some_css.css so that, it is searching in the current directory i.e. pass so that, the URLs of the stylesheets are becoming like http://something.com/pass/css/some_css.css. That's an issue.
If you will use /css/some_cs.css, it will try to locate the files from the home directory i.e. the / directory, so the URL will become http://something.com/css/some_css.css and everything will work perfectly.
else, you should use the helper provided by Laravel
{{asset('css/some_css.css')}}
It will generate URL, where the files are located without fail.
I'm new to Laravel, and I'm trying to do a "modular" page for the first time. Everything was going fine, had my base layouts, which gets extended on my home page, have set up some sections/yields with no problem (content, title, etc) but one specific #yield keeps being rendered at the wrong place, I've put it inside my head file (head.blade.php), which already have another #yield for the title, but that one keeps getting rendered inside the body. I tried doing some tests, and discovered that if I put my title #yield inside <title></title> it works OK, but if I put it outside the tag it is moved to the body.
Thats a normal Laravel way of working (#yield can't be by itself, only inside a tag) or something is wrong ?
default.blade.php
<!doctype html>
<html>
<head>
#include('includes.head')
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--no-desktop-drawer-button">
#include('includes.nav')
#yield('tools')
<main class="mdl-layout__content">
<div class="page-content">
#yield('content')
</div>
</main>
#include('includes.footer')
</div>
</body>
</html>
head.blade.php
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="cache-control" content="no-cache">
<meta name="description" content="XXXXXX">
<meta name="author" content="XXXXXXXXXXXXX">
<title>#yield('title')</title> =====> Works normally if put here
#yield('title') =====> Rendered inside the body if put that way
<!-- jQuery 3.2.1 -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Normalize CSS -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!-- Dialog Polyfill -->
<link rel="stylesheet" type="text/css" href="css/dialog-polyfill.css">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
It's a normal browser behaviour. First of all you have to place all the things inside the right places. It's like you are trying eat some fat meat without fork and then crying that your hands in fat :)
You always have to define all tags that browsers expect. Title tag define that inside title of the page is located. yield('title') just means the name that you gave its for inserting there then. It looks like id in HTML.
Since you haven't described to browser what do you want to insert here it is trying to solve the problem and it's usually a placement all the things without needed tags in body (only if we are talking about omitting tags in the header).
I have a php file which is in the name of index.php. In that I have included another page like "xyz.php".
I have included "xyz.php" in index.php using #include('xyz').
When I am trying to include external css and js in xyz using
{{ URL::asset('assets/js/jsfile.js') }}
{{ URL::asset('assets/css/cssfile.css') }}
It is not working. In source it displays as it is.
How can I solve this issue.
index.blade.php
<!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>My Laravel page</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
<link href="{{ URL::asset('assets/netbramha/css/bootstrap.min.css') }}" rel="stylesheet">
<script src="{{ URL::asset('assets/netbramha/js/modernizr.custom.js') }}"></script>
</head>
<body>
#include('home-search')
</body>
</html>
home-search.blade.php
<div class="video-modal">
<img class="lazy-load" data-original="{{ URL::asset('/') }}/assets/netbramha/images/video-img.jpg" src="images/grey.gif" width="598" height="336" alt="" />
</div>
Maybe this will help
{{ URL::asset('/') }}/location of you css/scripts
cheers
You are using blade templating in the xyz.php file. It should be named xyz.blade.php
You have to use helper functions
include(public_path() . '/xyz.php')
I am new to Laravel4, so I was learning from the documentation.
It seems everything is all correct, but the extends method literally displays its code on my web browser. I don't know hwy..
This is the layout file (base.blade.php under layouts directory)
<!-- app/views/layouts/base.blade.php -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- You can provide some default content -->
#section('head')
<link rel="stylesheet" href="style.css" />
#show
</head>
<body>
#yield('body')
</body>
</html>
and home.blade.php.
<!-- app/views/home.blade.php -->
#extends('layouts.base')
#section('body')
<h1>Hurray!</h1>
<p>We have a template!</p>
#stop
and my routing configuration is like below..
Route::get('/',
function()
{
return View::make('home');
}
);
Now when you access to the URL, it displays just a string!
#extends('layouts.base')
I have been googling for a hour or so! still could not fix it...
What's wrong with them? :(
I checked common mistakes below
possible type
incorrect path
incorrect method name
missing appending 'blade' on the file name
BUT STILL CAN'T FIND THE PROBLEM. :(
There shouldn't be any space in the template above #extends at all no comments or whitespace
Remove
<!-- app/views/home.blade.php --> from home.blade.php
home.blade.php
#extends('layouts.base')
#section('body')
<h1>Hurray!</h1>
<p>We have a template!</p>
#stop
Possibilities are that you have printed #extends('layouts.base') twice in the page. Please have a look.