I've got specific Form component, which is declared as
Form::component('fcRadio', 'components.form.fcradio', ['name', 'options', 'selected' => null]);
and used as
{{ Form::fcRadio('name', $options }}
What I want is somehow attach custom CSS file, so if the page fires this component at least once, the desired CSS file is included to the <head> of my document.
For example, in Joomla it was like
$this->document->addStylesheet('my_awesome_style.css');
Is there any way to achieve the same in Laravel?
UPD:
I've extended the answers below a bit to let it add multiple styles from multiple templates. Finally, it looks like this:
#section('styles')
#parent
{{HTML::style('css/fcradio.css')}}
#stop
It works fine, but if I use the component twice per page, style is also adds twice. How can I allow multiple but unique entries?
So this is typically how I deal with it:
In your folder: resources/views I create a folder called layout. This folder handles the templates for all my pages.
Then I create a file called default.blade.php. In it I put the bulk of the HTML code. Here's an example of how default.blade.php could look (slimmed down, obviously)
<!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>
#yield('title')
</title>
<link rel="stylesheet" href="{{ asset('css/main.css') }}">
<!-- Additional per-page css -->
#yield('css')
</head>
<body>
#yield('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
<!-- Include per-page JS -->
#yield('js')
</body>
</html>
Right, so essentially what we have so far is the #yield() and asset() helpers.
#yield() is special blade syntax that Laravel uses to say, "Okay. Any time a blade view that is inheriting THIS master template calls the section named in this #yield() I will display that content right here.
asset() is a nifty little helper that basically appends your URL structure onto the string you pass it. So if your url is http://MyGreatSite.com and you use asset('js/script.js') it will spit out a fully qualified URL that will work anywhere on the site (http://MyGreatSite.com/js/script.js). asset() is great because you can use it in blade templates that will get sent out as an email and all of the files will work in an email inbox because they are absolute links.
Right. So now we have this master template and we need to use it. So what I do is create another view in the resources/views directory. Lets say we're doing a contact page. I would make contact.blade.php. Now I want to inherit that master template we created. So we do that like so:
#extends('layout.default)
#section('css')
<link rel="stylesheet" href="{{ asset('css/contact.css') }}">
#stop
#section('title')
Contact Us
#stop
#section('content')
<h1>Contact us</h1>
<p>
Contact us via email: contact#mygreatsite.com
</p>
#stop
#section('js')
<script src="{{ asset('js/contact-form.js') }}"></script>
#stop
Okay, so, first things first. At the very top we tell this blade file that we want to use the template we just made. We use the blade helper #extends() and pass it the path to our view relative to the views directory separated by periods.
Next, we want to create the sections that correspond to the template. We do that by opening the section with #section() and passing the name of the section we want to push this block of content to. We write our content and then we close the section by using #stop. Pretty simple. For images, css, or js, we simply use the asset() helper again.
I know it's a little long-winded, but hopefully that helps and explains the process a little better.
tl;dr: Use #yield(), #section(), and asset().
So I think I understand what you are saying.
In your blade layout file create a section inside the head:
<head>
#yield('componentcss')
</head>
And in the component do:
#section('componentcss')
{{HTML::style('css/fcradio.css')}}
#stop
You could also just include the css but I wouldn't advise this:
#section('componentcss')
<style>
.exampleclass {text-align:center;}
</style>
#stop
Hopefully I have understood you correctly.
I've finally found a bit tricky but working solution:
#hasSection('fcRadioStyle')
#else
#section('fcRadioStyle')
{{Html::style('css/components/fcradio.css')}}
#stop
#section('styles')
#yield('fcRadioStyle')
#append
#endif
This makes by Form::fcRadio append this style only once
Related
i have included all the css and js external links under <header> tag of my index view.
Now there are some external links which i want to load on selected views only,
i can add links separately on that view but that link will go out of <head> tag.
how can i load selected links on selected views only from <header> tag of index view.
i tried
<head>
...other links
#if(View::exists('ispblade.calendar'))
#include('ispblade.calendar_links')
#endif
</head>
but it's loading selected link on all views.
You need to use stacks for that.
In Layout:
<head>
<!-- Head Contents -->
#stack('scripts')
</head>
In your view:
#push('scripts')
<script src="/example.js"></script>
#endpush
https://laravel.com/docs/8.x/blade#stacks
I know there was many question like this one but I still can't handle with that problem.
I have master layout where I put common elements for all subsites in my app.
(Inside common directory)
<!DOCTYPE html>
<html lang="pl">
<head>
#include('common.head')
</head>
<body>
<div id="l-wrap">
#include('common.header')
<article id="l-content">
#yield('content')
#include('common.dealer-area')
</article>
#include('common.footer')
#include('common.cookies')
</div>
If I understand correctly: if I want elements 'stick' to master template I make include, these elements will be this same on every subpage.
Second blade inheritance after first one and looks like this:
(Inside homepage directory)
#extends('common.template')
#section('content')
#yield('slider')
#endsection
And there is third blade which inheritance after second one:
#extends('home-page.template')
#section('slider')
<div class=slider> Some slider elements
</div>
#endsection
But view from third section doesn't show at all. I tried with #yield, #section...#endsection, or #section...#stop but it doesn't helped.
When I give second parameter in #yield function, after 'slider' in second blade:
#yield('slider', 'some text')
It shows correctly so I think problem is the last one blade, the third one, do I use inheritence incorrectly?
Note: Like i said in the comment, i am working relatively large project. I can't change existing codes. Just try to add some code blocks for one page.
I have a template blade. It has meta yield. But also included one meta.blade.php, that contains all meta tags. But i don't want to include metapage for some of my pages. There is the template for visualization:
my_template
<header>
#yield('meta')
#include('metapage')
#yield('style')
#yield('js')
</header>
my view.blade.php
#extends('my_template')
#section('meta')
<meta description...>
#endsection
#section('style')
//content
#endsection
#section('js')
//content
#endsection
My question is: Is there a way to make something like this:
#extends('my_template')->except('metapage')
I know there isn't exist something like that. But i need that. I hope somebody can give me a solution.
There is a certain solution which I do:
First one is to create multiple template and extend them as your requirements.
Second one is to disable sub parts.
Third one to create parent template having little things, then create child template which is extending parent and do extra things here. use it as your need.
If You are working on existing project and you have a lot of pages then First & third one is a better solution for it because you could make changes only in front end without affecting class code.
You could make the meta a component rather than an include, then your template would look the same and your view would be e.g.
#extends('my_template')
#section('meta')
#component('meta')
#slot('description', 'my amazing description')
#endcomponent
#endsection
// other code here as usual
Your component is then responsible for checking what exists and what doesn't, e.g. like this:
#isset($description)
<meta name="description" content="{{ $description }}">
#endisset
#isset($title)
<title>{{ $title }}</title>
#endisset
// etc, the title is just an example
Documentation: https://laravel.com/docs/5.6/blade#components-and-slots
Take the Tag Name Which You Want To ignore And Apply the CSS
ex: If I need to Remove the Footer From the Extended Page make
footer {
display: none;
}
I'm using a Laravel app with an external public directory, e.g. root/Laravel, and root/html/public.
I need this app to load from a require on an php file that already has another framework(root/html/this-section.php), hence that other fw has its own head, and body tag. This app will load between the header and footer of that index.
In my blade layout.app file, i have
#section('stylesheets')
<link rel="stylesheet" href="/this-section/css/vendors.css">
<link rel="stylesheet" href="/this-section/css/app.css">
#show
<div id="main">
#include('layouts.sidebar')
#include('layouts.header')
<section>
#yield('content')
</section>
</div>
The issue I'm having is if no my app layout, when I delete the head and body tags during testing, which is what i need, the blade system, or what i dont know, is still creating an empty head tag set, <head></head>, then when i enable the stylesheets section, it ends up in that <head> tag.
Expected: The head tag should not be there. I don't want a head tag. What in laravel can i adjust to remove this auto creation of head (and body)?
It sounds like your using tags that belong in the <head> section is causing this. While your source may be pristine:
browsers will add in the missing-but-required tags as appropriate, resulting in you seeing them in the browser's web inspector:
I'm evaluating brunch build system for my needs. I need to make simple HTML preprocessing. So basically I need to produce several files with common headers and footers:
file1.html:
<html>
<head>
<title>Title1</title>
</head>
<body>
<div id="content">
<div id="header">...</div>
Page1
<div id="footer">...</div>
</div>
</body>
</html>
file2.html:
<html>
<head>
<title>Title2</title>
</head>
<body>
<div id="content">
<div id="header">...</div>
Page2
<div id="footer">...</div>
</div>
</body>
</html>
So either a simple include functionality or (preferrable) some kind of extends functionality. Ideally syntax should hide in comments so my IDE won't complain about non-HTML characters. I liked preprocess javascript library, but that's not necessary, of course.
Unfortunately I didn't find anything suited for that task in brunch. There's support for many HTML template engines, but they seem to generate JS functions. I need simple static HTML as a result, not JavaScript SPA.
I'm not certain there's any built-in solution to this yet, but if I was to go in the direction of HTML templates / partials, I'd look into either "after-brunch" and "before-brunch" plugins on NPM.
I don't know what's your program-language of choice for FileSystem manipulation (read, merge, write, etc.), but in theory you could use something like "before-brunch" to execute a batch / shellscript / or command of somekind to collect your HTML partials together into your file1.html, file2.html, ... before Brunch compiles and copies it to the public/ folder.
In case you're familiar with Haxe, here's a Gist that I shared a while ago. It's a post-process script to merge other files on specific lines of documents.
https://gist.github.com/bigp/90e38deeccc94145b033
Here's what an HTML document could look like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DEMO</title>
<link rel="icon" href="data:;base64,=">
<style id="css" type="text/css" rel="stylesheet">
/* #MacroMerge: public/app.css */ //<--- Merges All CSS here..
</style>
</head>
<body>
<script type="text/javascript">
/* #MacroMerge: public/vendor.js, public/app.js */ //<--- And all JS here..
</script>
</body>
</html>
EDIT:
Almost forgot, here's how the brunch-config.coffee script would use the Haxe script with the after-brunch plugin:
plugins:
afterBrunch: [
"haxe -cp . --macro MacroMerge.html('app/index.template.html','public/index.html')"
]
Come to think of it... nothing stops you from taking this example and specifying HTML partials (or any file extension really, ex: *.txt, *.xml) wherever you need them. Again, might only be useful to you if you're familiar with Haxe. If not, it's open-sourced & free to download (http://haxe.org/download/).