Situation:
I'm creating a web application using Laravel, but for the moment CSS that i created aren't loading.
Folder Structure
Laravel Version
Laravel Framework version 5.2.36
master.blade.php code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>#yield('title')</title>
<link rel ="stylesheet" href= "{{ URL::secure('src/css/main.css') }}">
#yield('styles')
</head>
<body>
#include('includes.header')
<div class="main">
#yield('content')
</div>
</body>
</html>
Write like this:
<link rel ="stylesheet" href= "{{ asset('src/css/main.css') }}">
Another alternative:-
<link rel="stylesheet" href="{{ url('/') }}./src/css/main.css" type="text/css"/>
Related
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
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>
On my site, I had an index.php with a navbar. Then, I needed to add another page, called second.php, and updated my navbar code accordingly (I have a nav.html file for the navbar, so that I can use JS to load it onto each page of the site). I also added the navbar code to the second.php. However, when I opened index.php, the link to second.php didn't appear.
I tried restarting my computer, restarting my MAMP server, reopening my code editor, reopening the browser, but nothing worked. Then, I tried renaming my files (for both the purpose of testing and because I needed better file names) and updated all instances of the name of the files accordingly. But then this appeared:
followed by a list of the files in my directory. In particular, the site wasn't displaying. Could someone please explain what's happening and how I can fix it?
nav.html:
<body>
<header>
<div class="logo">
<h1 class="logo-text">Welcome!</h1>
</div>
<i class="fa fa-bars menu-toggle"></i>
<ul class="nav">
<li>Home</li>
<li>About</li>
</ul>
</header>
</body>
home.php (formerly second.php):
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="css/style.css?v=<?php echo time(); ?>">
<!-- Font Awesome -->
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Kalam&family=Pangolin&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<title>Welcome Home</title>
</head>
<body>
<div class="placeholder"></div>
<script>
$(function(){
$('.placeholder').load("nav.html");
});
</script>
hello world
<script src="js/main.js"></script>
</body>
</html>
about.php (formerly index.html) is basically the same as home.php except it has a couple of paragraph tags.
I'm not clear on what isn't working at this point, so I might as well share a working example I have locally. I'm accessing my site at http://localhost/so/, and going to that URL will load any index page I have. I have 3 files inside the /so directory:
nav.html (I removed your <body> tags because those already exist in the other files):
<header>
<div class="logo">
<h1 class="logo-text">Welcome!</h1>
</div>
<i class="fa fa-bars menu-toggle"></i>
<ul class="nav">
<li>Home</li>
<li>About</li>
</ul>
</header>
home.php (accessible at localhost/so/home.php):
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="css/style.css?v=<?php echo time(); ?>">
<!-- Font Awesome -->
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Kalam&family=Pangolin&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<title>Welcome Home</title>
</head>
<body>
<?php include "./nav.html"; ?>
hello world home
<script src="js/main.js"></script>
</body>
</html>
about.php (accessible at localhost/so/about.php):
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="css/style.css?v=<?php echo time(); ?>">
<!-- Font Awesome -->
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Kalam&family=Pangolin&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<title>Welcome About</title>
</head>
<body>
<?php include "./nav.html"; ?>
hello world about
<script src="js/main.js"></script>
</body>
</html>
If I rename home.php to index.php then I can go to either localhost/so/ or localhost/so/index.php to access that file.
Slightly related: you shouldn't necessarily use time() as your CSS cache busting variable because it won't cache at all then. You should use a variable that you manually adjust the value of (i.e. $css_cache_bust = "2020061001";) like href="css/style.css?v=<?= $css_cache_bust; ?>" so you can incrementally adjust this as needed.
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 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')