I have an app with two main layouts auth and app.
The auth layouts is for my authentication views whiles the app layouts is for the main application views with sidebars and headers .
But they both share a the same css and js blocks.
So i decided to create two components (head.blade.php and scripts.blade.php) in a sub directory "includes" in the resources/views/components directory.
This is the content of my includes/head.blade.php file
#props(['title' => $title ?? ''])
<head>
<meta charset="utf-8" />
<title> {{ucfirst(config('app.name'))}} - {{ucfirst($title)}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
<meta content="Themesbrand" name="author" />
<!-- App favicon -->
<link rel="shortcut icon" href="{{asset('assets/images/favicon.ico')}}">
<!-- Bootstrap Css -->
<link href="{{asset('assets/css/bootstrap.min.css')}}" id="bootstrap-style" rel="stylesheet" type="text/css" />
<!-- Icons Css -->
<link href="{{asset('assets/css/icons.min.css')}}" rel="stylesheet" type="text/css" />
<!-- App Css-->
<link href="{{asset('assets/css/app.min.css')}}" id="app-style" rel="stylesheet" type="text/css" />
<!-- Custom Css-->
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<!-- Page Css-->
#stack('page-css')
</head>
And this is the content of my includes/scripts.blade.php file.
<!-- JAVASCRIPT -->
<script src="{{asset('assets/libs/jquery/jquery.min.js')}}"></script>
<script src="{{asset('assets/libs/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('assets/libs/metismenu/metisMenu.min.js')}}"></script>
<script src="{{asset('assets/libs/simplebar/simplebar.min.js')}}"></script>
<script src="{{asset('assets/libs/node-waves/waves.min.js')}}"></script>
<!-- App js -->
<script src="{{asset('assets/js/app.js')}}"></script>
<!-- Page js -->
#stack('page-js')
This is how i call each of them in my app layout file.
This is for the css
<x-includes.head :title="$title" />
#push('page-css')
<!-- Custom Css-->
<link rel="stylesheet" href="{{asset('css/app.css')}}">
#endpush
This one for the js
<x-includes.scripts />
#push('page-js')
<script src="{{asset('js/app.js')}}"></script>
#endpush
But is not working.
SUMMARY: What am trying to achieve is that, i want to able to use those components in each of my layouts. But i also want to be able inject custom page css and js to pages that have custom css and js files. The components works fine but the #stack and #push are not working. I also used #yield and #section and i didn't get any result.
I want to know if am doing it right and also if there is another way to achieve this.
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
I am creating a new site and I am wondering if it is possible to change the site name from the admin panel? I searched a lot but could not find it. I have not written any code for this yet
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>registration</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="img/logo/favicon.ico">
<!-- all css here -->
<!-- bootstrap v3.3.6 css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- font-awesome css -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- style css -->
<link rel="stylesheet" href="style.css">
<!-- responsive css -->
<link rel="stylesheet" href="css/responsive.css">
<!-- modernizr css -->
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
After <title>registration {here site name}</title> I want the site name to be written automatically. I have the file in PHP of course. Is it possible to do this without Laravel?
What I usually do is create a settings table that contains all the site information which will queried and displayed on the site.
today I started some boilerplate project. I am using gulp to output minified css from SASS. I have two .css files - normalize.css and main.css. Both of them are minified from the same directory. When I am starting localhost with XAMPP I open index.php it could not load main.css but normalize.css is loaded. I get the following in console:
Also when I go to see files that are in localhost directory I see that main.css is there, but when I click on it it says that it could not found this file - error 404 and in url bar I see that it added "/" at the end of main.css - strange behaviour:
However when I open this index.php in Firefox everything is fine and both styles are loaded and displayed correctly. Here is index.php code if needed:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="" />
<meta name="keywords" content="">
<title>Title of site</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="./dist/css/normalize.css">
<link rel="stylesheet" type="text/css" href="./dist/css/main.css">
<!-- FavIcon -->
<link rel="icon" type="image/png" href="//" sizes="32x32">
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Local -->
<!-- <script src="./js/jquery.min.js"></script> -->
</head>
<body>
<h1>Hello wosfsdfsdfrld!</h1>
<p>scss and sass</p>
<p><?php echo('THIS IS HEADERsfsfsdf'); ?></p>
<img src="./img/testimg.png">
<script type="text/javascript" src="./dist/js/app.js"></script>
</body>
</html>
So it seems that it is somehow related to Chrome Browser, what could be an issue? Maybe some XAMPP config? But I have never touched it
The problem was name of folder containing project "siteStarter-php" caused some conflicts - changed it to "siteStarterPhp" and everything is working
I can't figure it out what could cause this issue, but i'am pretty sure it simple. I am extending main view main.blade.php (located in views folder). This includes css from partials folder.
I have two pages: Enquire, Approved enquire. (both located in views/trader/ folder.) only difference is routing, one would have /enquires the other would have /enquires/approved.
Blade/Css working if on main route: Route::get('/enquires','Trader\PagesController#getEnquires');
Blade/Css does not work when using suburl: Route::get('/enquires/approved','Trader\PagesController#getApproved');
Please refer to this image:
routing display error
If you require any other information please let me know,
Tahnks in advance,
Dan
It seems the problem is in how you're creating links to assets (images, CSS and JS files). To make it work, use Laravel asset() helper:
<link rel="stylesheet" href="{{ asset('css/theme.css' }}">
Which will create full path to an asset.
Also, you must keep all assets inside public directory of your project, for example: /laravel_project/public/css/theme.css
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>#yield('title')</title>
<meta name="keywords" content="HTML5 Template" />
<meta name="description" content="Trusted Workers - Find local tradesmen">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Web Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800%7CShadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Vendor CSS -->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.css">
<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css">
<!-- Theme CSS -->
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/theme-elements.css">
<link rel="stylesheet" href="css/theme-blog.css">
<link rel="stylesheet" href="css/theme-shop.css">
<link rel="stylesheet" href="css/theme-animate.css">
<!-- Current Page CSS -->
<link rel="stylesheet" href="vendor/rs-plugin/css/settings.css" media="screen">
<link rel="stylesheet" href="vendor/rs-plugin/css/layers.css" media="screen">
<link rel="stylesheet" href="vendor/rs-plugin/css/navigation.css" media="screen">
<link rel="stylesheet" href="vendor/circle-flip-slideshow/css/component.css" media="screen">
<!-- Skin CSS -->
<link rel="stylesheet" href="css/skins/default.css">
<!-- Theme Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Head Libs -->
<script src="vendor/modernizr/modernizr.js"></script>