Level 1
Sep 22, 2016
13
Level 1
How do I include my slider without using @include?
Guys! I am still appealing for help. Here's my case: I have a master layout page where I have included a slider. Here's the master layout page:
<!DOCTYPE html>
<html lang = 'en'>
<head>
<meta charset="UTF-8">
<title>@yield('title')</title>
<link rel="stylesheet" href="{{URL::to('css/main.css')}}" type="text/css" >
@yield('styles')
</head>
<body>
@include('includes.header')
@include('frontend.beaver')
<div class="main">
@yield('content')
</div>
@include('includes.footer')
<script type="text/javascript">
var baseUrl="{{URL::to('/')}}";
</script>
@yield('scripts')
</body>
</html> ```
This is the slider page:
```<!doctype html>
<html>
<head>
<script src="js/jquery-1.11.0.min.js"></script>
<!-- you can use these links, but better you have a link to the versions you need -->
<!-- usage of folder "current" is not recommended -->
<!-- see http://beaverslider.com/how-to-setup/docs/general for more info -->
<script src="js/beaverslider.js"></script>
<script src="js/beaverslider-effects.js"></script>
<script>
$(function(){
var slider = new BeaverSlider({
type: "slider",
structure: {
container: {
id: "my-slider-id",
width: 1000,
height: 300
}
},
content: {
images: ["images/slidermining.jpg","images/sliderproperty.jpg","images/sliderpetroleum.jpg","images/slidersolar.jpg","images/sliderchemicals.jpg"]
},
animation: {
effects: effectSets["slider: big set 1"],
interval: 4000,
initialInterval: 4000,
waitAllImages: true
}
});
});
</script>
</head>
<body>
<div id="my-slider-id"></div>
</body>
</html>```
The problem is that in using @include, the slider is appearing on all other pages which @extends the master layout page. What can I do not to persist the slider on every page of my site?(I have failed to make the slider run in Blade format hence I cant use @yield)
Level 80
Create a new section in your master layout. Then in your view where you actually do want the slider, populate it:
<!-- layouts/app.blade.php -->
<!DOCTYPE html>
<html>
<head>
<!-- // -->
</head>
<body>
<!-- header -->
@yield('body.before')
<!-- body -->
<!-- footer -->
</body>
</html>
<!-- some-page.blade.php -->
@extends('layouts.app')
@section('body.before')
@include('partials.slider')
@endsection
If you hard-code/include something in your master layout template, then of course it’s going to appear on all extending pages.
Level 14
I think it's more appropriate to use 2 layout files, one extending the other. Here's a rough example:
Create a layouts/primary.blade.php file:
<html>
<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>@yield('title')</title>
</head>
<body>
@yield('slider')
@yield('content')
</body>
</html>
Then create a layouts/secondary.blade.php file, extending layouts.primary. Include your slider's code there:
@extends('primary')
@section('slider')
Slider goes here.
@endsection
Then just extend layouts.primary on the pages where you don't want a slider:
@extends('primary')
@section('title')
Page's title.
@endsection
@section('content')
<div>Page's content.</div>
@endsection
And extend layouts.secondary on the pages where you want the slider:
@extends('secondary')
@section('title')
Page's title.
@endsection
@section('content')
<div>Page's content.<div>
@endsection
Easy as that.
Level 1
Thanx very much @martinbean and @tiborbesze86! I will certainly follow your advice and will let you know if I get positive results.
Level 1
Sigh! Still nothing works! Here's my master layout and the file extending the slider:
<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>@yield('title')</title>
<link rel="stylesheet" href="{{URL::to('css/main.css')}}" type="text/css" >
@yield('styles')
</head>
<body>
@include('includes.header')
@yield('effects')
<div class="main">
@yield('content')
</div>
@include('includes.footer')
<script type="text/javascript">
var baseUrl="{{URL::to('/')}}";
</script>
@yield('scripts')
</body>
</html>```
```@extends('layouts.master')
@section('effects')
@include('frontend.beaver')
@endsection```
Level 1
The file including the slider is off course a separate file. As long as I use @yield for that file, it refuses to run. Where am I getting wrong?
Level 1
Is there anyone who has managed to make the Beaver slider in Blade format run successfully ? I would like to have a working copy of his code please.
Level 80
What’s the problem? We can’t really help unless you show us what’s in frontend/beaver.blade.php, as that seems to be where the problem lies.
Level 1
<html>
<head>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/beaverslider.js"></script>
<script src="js/beaverslider-effects.js"></script>
<script>
$(function(){
var slider = new BeaverSlider({
type: "slider",
structure: {
container: {
id: "my-slider-id",
width: 1000,
height: 300
}
},
content: {
images: ["images/slidermining.jpg","images/sliderproperty.jpg","images/sliderpetroleum.jpg","images/slidersolar.jpg","images/sliderchemicals.jpg"]
},
animation: {
effects: effectSets["slider: big set 1"],
interval: 4000,
initialInterval: 4000,
waitAllImages: true
}
});
});
</script>
</head>
<body>
<div id="my-slider-id"></div>
</body>
</html>
Level 1
If I include it in another blade file as you (@martinbean) has suggested and @yield that file in my master layout, it wont work. So, I was thinking that maybe if I get to convert the slider HTML file into a Blade page, my worries would be over as I have done so and it still refuses to run.
Level 1
@extends('layouts.master')
@section('slider')
<div id="my-slider-id"></div>
@endsection
@section('scripts')
<script type="text/javascript"> var token="{{Session::token()}}" </script>
<script src="{{URL::to('js/jquery-1.11.0.min.js')}}"></script>
<script src="{{URL::to('js/beaverslider.js')}}"></script>
<script src="{{URL::to('js/beaverslider-effects.js')}}"></script>
@endsection
Level 1
Why is this code not running? It's the Blade page for the beaver slider. The equivalent of the HTML I've just send.
Level 80
You’re not giving us enough to go on. “Why is this code not working?” or “why does it not work?” isn’t helpful. If you’re getting an error message, share it.
Please or to participate in this conversation.