I need to install Slim Cropper in Laravel (https://pqina.nl/slim/). I downloaded it and I have two files: slim.jquery.min and slim.min.css. How can I install it? I think I need to use the webpack.min.js, but I dont know how to use it. Thanks!
Well thats depends how you want do it. the quickest way could be simply, Add them to resources/layouts/app.blade.php in <head>. (assuming app.blade.php is your main layout file which you extending in all child views.) and use it like you would be using in normal html. Nothing Fancy. and for urls you can always use
<!-- Styles -->
<link href="{{ asset('css/slim.min.css') }}" rel="stylesheet">
<!-- script -->
<script src="{{ asset('js/slim.jquery.min.js') }}"></script>
which should load them from public/css and public/js folders.
read more about asset function here
https://laravel.com/docs/7.x/helpers#method-asset
Related
I'm new to Laravel Breeze and tailwind.
After successfully installed Laravel Breeze and looking at /login page source, I couldn't match the source code and actual page source and would like to know what's going on.
In app.blade.php or guest.blade.app there are the following lines.
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
But when viewing login page source, it has
<!-- Styles -->
<style>
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent} ...
</style>
<style>
body {
font-family: 'Nunito';
}
</style>
And no javascript is loaded.
I'm expecting to see just the link to public/css/app.css and public/js/app.js but no such thing here.
So if anyone can explain how Laravel Breeze works regarding to including css and js
and how I can extend tailwind css to other pages and use js in other pages, I'd really appreciate.
You need to compile the assets installed with Breeze. To do so, just run the following commands on your project directory:
npm install
npm run dev
If you check the Public folder on your Laravel app, you should see the CSS and JS compiled. Refresh the page, and the style should look OK.
Documentation reference:
https://laravel.com/docs/8.x/starter-kits#laravel-breeze-installation
I have compiled my assets with Laravel mix. In blade file, the traditional way is
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
Favicon also works:
<link rel="icon" type="image/png" sizes="16x16" href="{{ mix('/favicon/favicon-16x16.png') }}">
What am I trying to do is, utilising mix() helper inside javascript, so that in my javascript I can access the cached asset path.
So in my component, I can do:
<img :src="mix_path('/img/hello.svg')" />
Is there a way to achieve that?
What comes to my mind is creating a global mixin and use that method in my read my mix-manifest.json and put the version id.
Edit: Use window object answer. That's sounds fine (as a workaround) as long as you don't use SSR as window object is not defined.
Maybe is there a way to write a javascript helper method to access the manifest.json to get the versioned path? Is it possible?
Update: This is how I solved it:
How to read mix-manifest.json from javascript
To pass PHP variables to the javascript will require you echo them to the page when it is loaded within a PHP file (i.e. a Blade template).
If you want to use them in pure javascript files, you could do something as simple as assigning them to properties of the window object
I'm a bit lost here. I'm NOT new to Laravel Mix so this is really confusing.
I have a layout blade file and it looks something like this
<html> ....
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.js"></script>
<script src="{{ mix('/js/myjs.js") }}></script>
</body>
</html>
The myjs.js is compiled using Laravel Mix and contains dozen of libraries and all of them compile and work properly.
However if I include this
require('katex'); //so it's above everything else to simulate situation from above, when it's included in the layout file
...
and drop the CDN script from the layout file - the Katex library won't work.
I tried using require('katex/dist/katex.min.js') but still nothing. The katex.min.js file in the library and the one in CDN are the same.
I'm not expert on npm and I only use it to fetch libraries and then merge and minify them in my Laravel app.
Can anyone help me pin point the problem here or point me to what am I doing/getting wrong here?
Shouldn't the
<script src="lib1.js"></script>
<script src="lib2.js"></script>
included in the html, and
require('lib1')
require('lib2')
compiled to
<script src="{{ mix('compiled.js') }}"></script>
produce the same thing?
Thanks!
UPDATE:
I'm using Katex to implement this summernote plugin.
Katex should be installed as:
window.katex = require('katex');
My CSS is not working after passing an ID in an URL in Laravel 5.6
My route
Route::any('productdetail/{id?}','AdminController#productdetail');
The ID URL
<i class="icon-eye"></i>
I am using Laravel 5
This is the script tag:
<link rel="stylesheet" href="{{URL::asset('/css/style.css')}}">
Just use what #demo suggested.
asset('/css/style.css')
Or just
href="/css/style.css"
But never
href="../css/style.css"
Because if you later on change your current URL from 127.0.0.1:8000/productdetail/{id} to , let's say, 127.0.0.1:8000/productdetail/something/{id}, the asset will not be loaded properly anymore.
By using "/" in front of a source, you are telling the browser to start looking from the base URL, which is 127.0.0.1:8000/ in your case.
By omitting "/" in front of a source you are telling the browser to start looking from the current URL, which would be 127.0.0.1:8000/productdetail in your case, or even 127.0.0.1:8000/productdetail/{id} when you add your ID to it.
This problems occurs because we are using the relative path in our blade template and the solution is so simple, We have to use only the asset function to overcome this problem.
So change your code like this:
<link href="{{ asset('css/bootstrap.min.css') }}" rel='stylesheet' type='text/css' />
<script src="{{ asset('js/jquery.min.js') }}"> </script>
I am using laravel 4 and Font-Awesome but when I put my library like is natural in: public/fonts/ it doesn't work, I actualy tryed with public/css/ but it doesn't works too I just get weird symbols. Can everyone please help me with this.
It works perfectly fine for me when including fontawesome in the head like this
{{ HTML::style('fonts/font-awesome.min.css') }}
You don't need to use public in the directories, as laravel assumes this to be the path and adds it automatically by default.
You could put: <link href="{{ asset('css/font-awesome.css')}}" rel="stylesheet">