I created a new Laravel project and downloaded the bootstrap CSS and JS files and put the CSS file in resources/css and the JS files of bootstrap and popper and jQuery in resources/js and in the welcome.blade.php I linked the CSS file and the JS files like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Osama The Coder</title>
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<section class="text-danger">
Hello World
</section>
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
<script src="{{ asset('js/popper.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
</body>
</html>
when I opened the project it was just the text without any styles or Bootstrap font-family
even when I linked the app.css and applied color red to the section element I doesn't see any changes
Please follow the following steps
Put all your static assets in public directory
Organize your assets in different folders e.g public/js for js related files and public/css for css related files
Then access your files using the helper method like below
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
/* or js files */
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
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.
I'm building a website using Laravel 8 where i have one component called app.blade.php.
This component is the body of the project and includes the navbar.
The problem that i'm facing is that this compenent is correctly showing in every view, while in a view called article.blade.php it is showing but without showing the logo image, only the ALT text.
I have also tried to use other images in the view but no one of these images is showing, while on the other views everything is correct.
The images at the moment are in the public folder, later i will move everything to the storage.
Here's my component
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500&family=Readex+Pro:wght#200;300;400;500;600;700&display=swap" rel="stylesheet">
{{-- Icone --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.core.css" integrity="sha512-ShLuspGzRsTiMlQ2Rg0e+atjy/gVQr3oYKnKmQkHQ6sxcnDAEOtOaPz2rRmeygV2CtnwUawDyHkGgH4zUbP3Hw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div id="app">
<x-navbar/>
<main>
{{$slot}}
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/glide.js" integrity="sha512-vZGsugWaSqQZuW8N5Z3ild7Tk8NqiZjKffeIQGpnnIs6g7HVZaFZjlLKPIw1qDsrQ5KAxAGfBinglQWu6i/8DA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
And here's how i'm calling it :
<x-app></x-app>
Does anybody has any idea on what it can depends? For me sound strange that it's correctly working on every other view.
Thank you.
In the code that displays the image, you are probably using a path that is relative to the current route.
The image needs to be loaded with an absolute path (starts with /) or by using the asset() helper.
As you don't show the offending code, its hard to give specific advice
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.
For some reason my jQuery refuses to load. I am getting an error:
ReferenceError: $ is not defined
My template is in views/layouts/editor.blade.php and I am loading jQuery in the head of my template like this
<script src="{{ asset('js/jquery.min.js') }}"></script>
I can see that jQuery is loaded in my console. but still I get the error.
I am compiling my javascript using laravel mix and my webpack.mix.js file looks like this:
// javascript
mix.js('resources/assets/js/app.js', 'public/js')
.js('node_modules/jquery/dist/jquery.min.js', 'public/js')
.autoload({
jquery: ['$', 'window.jQuery', 'jQuery'],
});
// css
mix.sass('resources/assets/sass/app.scss', 'public/css')
.sass('node_modules/bootstrap/scss/bootstrap.scss', 'public/css');
Why is this happening?
EDIT:
My template file looks like this:
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- scripts -->
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script>
$(function(){
alert();
});
</script>
</head>
<body>
#yield('content')
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
If I look in my console I see the following
If I open the jquery.min.js file in a new tab I see the following:
So it's jquery underneath all that webpack boilerplate stuff.
I have also run npm run production which removes all that webpack stuff and leaves the raw jquery.
Try this.
In your view file create a section under content section
#section('scripts')
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script>
$(function(){
alert();
});
</script>
<script src="{{ asset('js/app.js') }}"></script>
#endsection
Then #yield('scripts') just under the #yield('content') in your template file.
So its looks like
<body>
#yield('content')
<!-- Scripts -->
#yield('scripts')
</body>
Use mix.combine() instead mix.js() :
mix.combine([
'node_modules/jquery/dist/jquery.js',
'node_modules/bootstrap/dist/js/bootstrap.min.js'
],'public/js/outputFile.js');
The problem is that I was compiling my jquery from the node_modules/jquery/dist folder instead of the /src folder.
laravel 4.2: my demo project in ytform when i try to add css file (style.css) from public folder having another folder, css folder. try to get any class its not working .
in View: i have an other folder, name layouts and i am accessing here css file but not working?
where in master.blade.php
<head>
#section('head')
<meta charset="UTF-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">
#show
</head>
i try with given both ways but in vain, css file not supporting in any view folder files how add css files
<link rel="stylesheet" type="text/css" href="/css/style.css">
{{HTML::style('css/style.css')}}
any solution or mistake ?
<link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
You can try this
or
{{ HTML::style(asset('css/site.css'), array('rel' => 'stylesheet', 'type' => 'text/css')) }}
and the css files needs to be in the public folder for this to work
Just include some lines in Blade template
{{ HTML::style('css/main.css') }}
See here as a reference