What is the best way to include the contents of an SVG file (located in the assets folder) in a Laravel 5 blade template?
I don't want to use image/object/embed tags, this should be an inline SVG for reasons of speed.
I know I could use <?php file_get_contents("file.svg") ?> but is there a better way specific to Laravel/Blade?
Edit: to clarify, the method should work with all SVG files, including the one below.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
<path stroke="red" fill="#00f" d="M10 10h100v100H10z"/>
</svg>
Similar to the accepted answer but a bit cleaner (imo).
Use the laravel directive to extend blade, like so (in your App Service Provider, as outlined here):
\Blade::directive('svg', function($arguments) {
// Funky madness to accept multiple arguments into the directive
list($path, $class) = array_pad(explode(',', trim($arguments, "() ")), 2, '');
$path = trim($path, "' ");
$class = trim($class, "' ");
// Create the dom document as per the other answers
$svg = new \DOMDocument();
$svg->load(public_path($path));
$svg->documentElement->setAttribute("class", $class);
$output = $svg->saveXML($svg->documentElement);
return $output;
});
Then use it in your blade like so:
<div class="Login__image Login__cloud">
#svg('cloud.svg', 'Cloud')
</div>
This works, that's the simplest way I could think about :
{!! file_get_contents('images/icon.svg') !!}
Why not place the svg into a blade template?
resources/views/icons/dashboard.blade.php
then add in your views using blade syntax?
#include('icons.dashboard')
View Composer Method
I ended up using a view composer in a service provider.
In the service provider's boot() method:
// Wildcard view composer
view()->composer('*', function($view) {
// Instantiate new DOMDocument object
$svg = new DOMDocument();
// Load SVG file from public folder
$svg->load(public_path('images/logo.svg'));
// Add CSS class (you can omit this line)
$svg->documentElement->setAttribute("class", "logo");
// Get XML without version element
$logo = $svg->saveXML($svg->documentElement);
// Attach data to view
$view->with('logo', $logo);
});
And in my view:
<!-- Echo unescaped SVG content -->
{!! $logo !!}
I am using DOMDocument as it allows me to remove the XML version element which should not be in the HTML.
The CSS class is not essential but saves me wrapping the logo with another HTML element for styling.
If you only need the logo in a specific Blade partial such as header you could write
view()->composer('header', function($view) {});
http://laravel.com/docs/5.0/views#view-composers
https://laracasts.com/series/laravel-5-fundamentals/episodes/25
Blade Partial Method
This method is not best practice since this sort of code should not really be in a view. However it is very simple and much better than adding PHP code in every single view.
Make a new partial (lets say logo.blade.php) with the following code:
<?php
// Instantiate new DOMDocument object
$svg = new DOMDocument();
// Load SVG file from public folder
$svg->load(public_path('images/logo.svg'));
// Add CSS class (you can omit this line)
$svg->documentElement->setAttribute("class", "logo");
// Echo XML without version element
echo $svg->saveXML($svg->documentElement);
?>
You can now use the SVG image in a blade template by including the partial like so:
#include('logo')
Related
I have a js file located in assets folder (not View). can i pass a varible from a controller?
In view file:
The Js is called like this
<canvas id="chart1" class="chart-canvas"></canvas>
</div>
It is not possible (in my point of view) to put a variable to external JS file. You can use data-... attributes and get values from html elements.
For example you can pass your PHP variable as a json encoded string variable in your controller.
$data['chart_info'] = json_encode($chart_info);
return view('your_view', $data);
Then put it in data-info like this.
<canvas id="chart1" class="chart-canvas" data-info="{{ $chart_info }}"></canvas>
And finally in JS, you can get the variable and decode (parse) it as following.
let canvas = document.getElementById('chart1');
let info = JSON.parse(canvas.dataset.id);
console.log(info);
You can put that part of the Javascript in the view and send the variable to the same view. For example, add a section in view:
#section('footer')
<script type="text/javascript">
</script>
#endsection
Do not forget that you should add #yield('footer') to the end of your layout view.
I don't like to mix javascript and PHP/Blade, it might be hard to read the code in the future... You could use a different approach, loading the chart with a async ajax request.
You will have to create a end-point that returns the data you need for your chart:
Your router:
Route::get('/chart/get-data', [ ControllerName::class, 'getChartData' ]);
Your controller method:
public function getChartData() {
$chartData = [];
// Your logic goes here
return $chardData;
}
In your javascript (using jquery) file there will be something like that:
function loadChartData() {
$.ajax({
'url': '/chart/get-data',
'method': 'GET'
})
.done((data) => {
// Load your chart here!!!
})
.fail(() => {
console.log("Could not load chart data");
});
}
Hope I helped ;)
do you ever use PHP built-in function inside blade yield ?
For example can we do something like this :
// master layouts
#yield(ucwords('title'))
// view
#section('title', $title)
Note: $title is from controller
I've already try the first example, but it doesn't work. It doesn't output the $title on my view. Right now I am using this in all of my views
// master layouts
#yield('title')
// view 1
#section('title', ucwords($title))
// view 2
#section('title', ucwords($title))
// view 3
#section('title', ucwords($title))
But I think on second example, I'm not DRY my code because I always repeating the ucwords() on each my view. Can we using it on master layout right on yield declaration?
Thank you guys, have a nice work!
You can make your own blade directive for example if you want to make a #ucfirst() then do something like this in AppServiceProvider .
Blade::directive('ucfirst', function ($expression) {
return ucfirst($expression);
});
Past this into boot()
or on each section() you can extend the main layout #section('title', ucwords($title)) or make the helpers like i mentioned above
as you mentioned above you can use yield()
#yield('title',ucwords(strtolower('Your title')))
I use Laravel 5.4 and React 15.5.4, code is writing in ES6.
I'd like replace Vue and use React and I did it. But I often will use small components for example 2 in different places of blade template. I don't want use one app component.
I'd like use something like:
<span class="react">
<TestComponent property={true} />
</span>
I can't do it automatically. Now I use
<span data-component="TestComponent" data-props="{property:true}" />
and in app.js
_.each(document.querySelectorAll('[data-react]'), element => {
let props ={};
Array.prototype.slice.call(element.attributes)
.forEach(item => {
props[item.name] = item.value;
if(item.name !== 'data-react'){
element.removeAttribute(item.name);
}
});
ReactDOM.render(React.createElement(reactComponents[element.getAttribute('data-react')],props),element);
});
It works but I need to use add all properties to one react component property and then use for example this.props.out.propery
I also would like set normal component tag in my blade component
I've try to use in app.js
_.each(document.querySelectorAll('.react'), item => {
ReactDOM.render(item.children,item);
});
Someone have any idea to solve this problem?
EDIT
I changed my solution to:
<span data-react="LoginForm" input="{{json(request()->old())}}" error="{{session('error')}}" errors="{{json($errors->getMessages())}}" />
or
<LoginForm data-react="LoginForm" input="{{json(request()->old())}}" error="{{session('error')}}" errors="{{json($errors->getMessages())}}" />
in blade and in resources/assets/js/app.js
var reactComponents = {
LoginForm: require('./components/login').default,
};
_.each(document.querySelectorAll('[data-react]'), element => {
let props ={};
Array.prototype.slice.call(element.attributes)
.forEach(item => {
props[item.name] = item.value;
});
ReactDOM.render(React.createElement(reactComponents[element.getAttribute('data-react')],props),element);
});
It works fine. This is not super clear solution but I have impression that the reasonable.
I can set components name in html code and add props almost same like in JSX.
As far as I know, you can not mix JSX components directly with Blade templates. The only server side rendering available today for React is NodeJS.
What you could do to improve your architecture is add specific HTML tags with certain ids and render the react components in them. So inside Blade you could do something like:
<div id="componentA"></div>
This will act as a place holder in your Blade template for that react component. Then you render your componentA from your app.js like this:
React.render(<ComponentA prop1='valueX'/>, document.getElementById("componentA"))
Remember that in this case the world of react and world of Blade run at different times.
You could use document.getElementsByTagName('LoginForm') getting all the instances and later iterate its attributes. It's clear code but not generic, because it will work just for LoginForm components.
If you want to render any tag name, then maybe it's better to use some attribute as you used with data-react.
getElementsByTagName isn't super supported by old browsers so maybe could a good idea to use jQuery as fallback $('LoginForm')
Is there a way to disable layout for certain controller method?
Im using something like $this->layout = null ,yet it still render the layout
The view im rendering obviously have a layout associate with it, i just wonder is it possbile to disable the layout from within controller method, without need to modify the blade file itself
Here is the controller:
class PurchaserController extends \BaseController
{
public function index()
{
$this->layout = null;
return View::make('purchasers.index');
}
}
The view:
#extends('layouts.master')
#section('content')
Content
#stop
Im using Laravel 4
Just remove
#extends('layouts.master')
from your view. That will prevent the view from loading.
Also - if you are using the #extends - then you dont actually need $this->layout() in your controller at all
Edit:
" i just wonder is it possbile to disable the layout from within controller method, without need to modify the blade file itself"
The idea is you do it either entirely from the controller, or entirely from the blade file. Not both together.
I have written a training application with each page/slide of the training workbook as a seperate blade template file named as "page1.blade.php", "page2.blade.php" and so on. Each of these files has content of the kind:
#extends('en/frontend/layouts/training_modulename')
{{-- Page title --}}
#section('title')
Page Title
#parent
#stop
{{-- Page content --}}
#section('pageContent')
<div class="pageContentContainer">
<h2>Page Title</h2>
...
</div>
#stop
This works really well when being viewed page by page within the browser. However I also wish to automatically compile all pages into a PDF document. This is being done via dompdf which works amazingly well when I pass each pages html to it manually. However I wish to condense the #section('pageContent') section of each page into one large section which extends a different layout for passing to dompdf.
Given the above context my question is this:
Is there a method in Laravel's blade parser which would allow me to pass it a blade file and just get the rendered html from a particular section? The below pseudo-code demonstrates what I would like to be able to do.
$pages = array(...); // content of the directory
foreach ($pages as $page)
{
$renderedPage = Blade::render($page);
$title = $renderedPage->title;
$pageContent = $renderedPage->pageContent;
}
Instead of doing the normal return of view
return View::make('page');
You can instead store the view in a string
$view = View::make('page');
So then you can do your code something like this (not tested - but you get the idea):
$pages = array(...); // content of the directory
foreach ($pages as $page)
{
$renderedPage[] = view::make($page);
}