Failed to extend layouts.app

0

In the app.blade.php file I have the following code inside the "body" tag:

style="background-image: url('fondos/fondo.jpg')"

This will be inherited in other views and will make all views have this image, as in this:

@extends('layouts.app')
@section('content')
<div class="row col-md-8 col-md-offset-2">
    <div align="center"  class="panel panel-default">
        <div class="panel-heading">
            <h1 style="color:#9999FF;" class="text-center text-mute"> {{ __("Jardin botánico Floramania") }} </h1>
        </div>
        <div class="panel-body">
            @Logged()
            @Hueco()
            <a href="formulario/rol">Elegir rol</a>
            @endHueco
            <a class="pull-left" href="souvenirs">
                @Cliente()
                Tienda Online
                @endCliente
                @Administrador()
                Lista de Souvenirs
                @endAdministrador
            </a>
            @Cliente()
            <a class="pull-right" href="formulario/saldo">Realizar un ingreso</a>
            @if(is_null(Auth::user()->saldo)==false)
            <h4 style="color:#55AADD" class="pull-center">Saldo actual: {{Auth::user()->saldo}}€</h4><br>
            <a class="pull-left" href="entrada/{{Auth::user()->id}}">Ver tus entradas</a>

            <r class="pull-center">
                @if(Auth::user()->saldo>=7)
                <a href="formulario/entrada">Comprar entrada (7€)</a>
                @else
                <i style="color:#0000FF">Necesitas 7€ para comprar una entrada</i>
                @endif
            </r>
            @endif
            @endCliente
            @Administrador()
            <a class="pull-right" href="entrada">Lista de entradas</a><br><br>
            <a class="pull-left" href="formulario/plantas">Crear una nueva planta</a>
            @endAdministrador
            @Legal()
            @if(Auth::user()->rol=='administrador' || is_null(Auth::user()->saldo)==false)
            <a href="clientela" class="pull-right">Lista de usuarios</a>
            @endif
            @endLegal
            @include('partials.errors')
            @else
            <p style="color:#0000FF">Inicia sesión para realizar operaciones</p>
            @endLogged
        </div>
    </div>
    @forelse($planta as $plantas)
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3>
                <a href="comentarios/{{ $plantas->id }}">{{ $plantas->nombre }}</a>
                @Administrador()
                <a href="borrar/{{ $plantas->id }}" class="btn btn-danger pull-right">Eliminar planta</a>
                <a href="modificar/{{ $plantas->id }}" class="btn btn-info pull-right">Modificar planta</a>
                @endAdministrador
            </h3>
        </div>
        <div class="panel-body">
            <h4>{{ $plantas->descripcion }}</h4>
            @if($plantas->foto)
            <img src="{{ $plantas->rutas() }}" style="width: 200px; height: 200px; border: 2px solid green" class="img-responsive img-rounded" />
            @endif
        </div>
        <div class="panel-body">
            <b>Tamaño:</b> {{ $plantas->tamaño }}<br>
            <b>Flor:</b> {{ $plantas->flor }}<br>
            <b>Hoja:</b> {{ $plantas->hoja }}<br>
            <span class="pull-right"> {{ __("Comentarios") }}: {{ $plantas->comentarios->count() }} </span>
        </div>
    </div>
    @empty
    <div class="alert alert-danger">
        {{ __("No hay ninguna planta en este momento") }}
    </div>
    @endforelse
</div>
@endsection

However, I find that this is not always the case, as in this example:

@extends('layouts.app')
@section('content')
<div class="row">
    <div align="center" class="col-md-8 col-md-offset-2">
        <div class="panel panel-heading">
            <h2 style="color:#0088FF;" class="text-center text-mute"> {{ __("Comentarios acerca del :nombre", ['nombre' => $plantas->nombre]) }} </h2>
        </div>
        @forelse($comentario as $c)
        <div class="panel panel-default">
            <div class="panel-heading panel-heading-forum">
                <h3>
                    Escrito por {{$c->usuario->name}}
                    @Logged()
                        @if(Auth::user()->id==$c->usuario->id && $c->comentario!="Comentario Eliminado")
                            <a href="../cambiar/{{ $c->id }}" class="btn btn-danger pull-right">Borrar el comentario</a>
                        @endif
                    @endLogged
                </h3>
            </div>
            <div class="panel-body">
                {{ $c->comentario }}
            </div>
        </div>
        @empty
        <div class="alert alert-danger">
            {{ __("No hay ningún comentario sobre esta planta actualmente") }}
        </div>
        @endforelse

        @Logged()
        @include('partials.errors')
        <form method="POST" action="../comentario">
            {{ csrf_field() }}
            <input type="hidden" name="planta" value="{{ $plantas->id }}"/>
            <div class="form-group">
                <label for="comentario" class="col-md-12 control-label"> {{ __("Escribe un comentario...") }}
                </label>
                <input id="comentario" class="form-control" name="comentario" value="{{ old('comentario') }}"/>
            </div>
            <button type="submit" name="addComentario" class="btn btn-default"> {{ __("Añadir Comentario") }}
            </button>
        </form>
        @else
        <h6 style="color:#0000FF;" class="text-center text-mute">(Tienes que iniciar sesión si quieres escribir comentarios)</h6>
        @endLogged

    </div>
</div>
@endsection

What will I be doing wrong in the second case?

More information. I have tried to put the following code in the head of app.blade.php:

@stack('styles')

Once this is done, I have modified my two examples so that they only have this code:

@extends('layouts.app')
@section('content')
@push('styles')
    <body style="background-image: url('fondos/fondo.jpg');"/>
@endpush
@endsection

To my surprise, even though the code is exactly the same in both cases, my image still appears in the first example, but in the second one it does not.

Both views are located in \ resources \ views \ vegetal. The first is index.blade and the second detail.blade .

    
asked by Miguel Alparez 21.02.2018 в 16:53
source

3 answers

0

Recently I had a similar case, in which I have needed to apply certain styles in some layouts, my solution was to add in the main layout a @stack('#') , in your case'layouts.app'. This allows you to load a different style in each layout

<link href="{{ asset('css/app.css') }}" rel="stylesheet" >
<link href="{{ asset('css/base.css') }}" rel="stylesheet" >

@stack('styles')

Done this, from each layout I charge the corresponding styles.

@extends('layouts.app')
@section('content')
    @push('styles')
        <link href="{{ asset('css/style_background.css') }}" rel="stylesheet">
    @endpush
    <codigo layout>
@stop
    
answered by 21.02.2018 в 23:28
0

I do not really understand what you intend to do, you are complicating an extremely simple situation with some very bad practices of both Laravel and the use of styles:

  • Using 'inline' styles in general is a bad practice and more in Laravel template contexts, where you play with both templates and variables inside other templates. The styles should be in an external file (.css) and ready, use classes to access the information that is needed for each element or page, we must bear in mind that the CSS addresses are relative, so it is important to know how to write the routes.

    body {
      background-image: url('https://miurl.com/fondos/fondo.jpg');
    }
    
  • The @stack directive in Blade is designed to "accumulate" elements, they can be classes, containers, references to external files, but NEVER the body tag. This practice is very risky, and the structure and coherence of the layout would be easily lost, besides I do not imagine having to define the body in each Blade template. It is not practical from any point of view.

  • Instead of doing this:

    @stack('styles')
    
    @push('styles')
        <body style="background-image: url('fondos/fondo.jpg');"/>
    @endpush
    

    I would do something like that (without closing the tag with / at the end of it):

    // template principal
    <body class="@stack('body-class')">
    
    // en cada template que lo necesite (pero si se necesita en todos, se pone en el template principal
    @push('body-class') basic-page @endpush
    
    
    // en el archivo de css
    .basic-page {
      background-image: url('https://miurl.com/fondos/fondo.jpg');
    }
    
        
    answered by 22.02.2018 в 14:43
    0

    I already achieved that both views have background. For that I put this code in app.css, in public / css:

    body{
        background-image: url('../fondos/fondo.jpg');
    }
    

    The url was based on public / css when what I look for was in public / funds, so I had to take "a step back" to solve it.

        
    answered by 22.02.2018 в 21:10