I am trying to pass on a $image variable to my view (gallerij.blade.php) but it will not work. I get a error message saying: "Undefined variable: image". I do not know how to solve this world.
I have already looked for a solution on Stack Overflow, but I could not find any solution for my answer. I have also looked on the Laracast website. But I could not find a answer there. Finally, I have also asked a fellow programmer to see if he could find a solution, but he also didn't know what was going wrong.
My controller:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\gallerijs;
class GalerijController extends Controller
{
public function Retrieve(){
$g = gallerijs::find(1);
$image = chunk_split(base64_encode($g->afbeelding));
return view('gallerij ')->with($image);
}
}
My view:
#extends ('Layout')
#section('title')
Galerij
#endsection
#section('content')
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{asset('Pictures/'.$image)}}" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="{{asset('Pictures/loremipsum2.jpg')}}" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="{{asset('Pictures/loremipsum3.jpg')}}" alt="New York" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
#endsection
I try to use the variable in the first img src.
Hopefully I have given you enough information so that you can help me finding a solution.
change:
return view('gallerij ')->with($image);
to:
return view('gallerij ', compact('image'));
I find this to be the cleanest way to pass variables to the view while retaining the variable name.
You can use with() but you must reiterate the variable name (ie: ->with('image', $image))
Or you can define an array of variables to pass as a second argument to view (ie: view('view.template', ['image' => $image]).
That's were the compact function comes in handy. It will create an array from a list of variable names using the variable name as the key (ie: compact('image') creates ['image' => $image])
Please user as image array
like
public function Retrieve(){
$g = gallerijs::find(1);
$image = chunk_split(base64_encode($g->afbeelding));
return view('gallerij ')->with('image',$image);
}
Related
Let me just give you a brief introduction to the question, I'm going to be having about 20 pages on my website once a user logs in, I need to organise these pages to use the same header, so I've come to the decision to use a layout as I'm using Laravel framework, it seemed stupid to have the same header spread across the 20 pages, if I wanted to make a change it would be hell.
In Bootstrap, I didn't add any kind of active class to any of the selected pages, it was just a navigation bar, I've recently upgraded to the Bulma framework where it requires an active class on the parent tab to show the child tabs, sort of a parent and sub categorys system going on.
I'm not sure how to handle this in the Layout, I need to add an active class and I also need to choose which sub navigation to show.
I've added my code below, I was wondering if anyone could tell me how I can approach this?
The below code is my whole page, including the header (the <section class="hero is-danger inside-header">)
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<title>{{ config('app.name') }} - Login</title>
<link rel="stylesheet" href="assets/public/1.0/frontend/css/bulma.css?id={{ time() }}" type="text/css">
<link rel="stylesheet" href="assets/public/1.0/frontend/css/override.css?id={{ time() }}" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="inside">
<section class="hero is-danger inside-header">
<div class="hero-body">
<div class="container">
<div class="columns is-vcentered">
<div class="column is-5">
<p class="title header-title">Introducing {{ config('app.name') }}</p>
<p class="subtitle">Interacting with others...</p>
</div>
<div class="column is-3"></div>
<div class="column is-4">
<a class="button is-danger is-large is-disabled join-game-button">
<i class="fa fa-sign-in"></i> Join Game
</a>
<a class="button is-success is-large is-disabled users-online-button">
<i class="fa fa-users"></i> 10
</a>
<br><br>
<a class="button is-success is-large is-disabled platform-button">Platform: Closed Beta</a>
</div>
</div>
</div>
</div>
<div class="hero-foot">
<div class="container">
<nav class="tabs is-boxed">
<ul>
<li class="is-active">
<a href="/documentation/overview/start/">
<i class="fa fa-user"></i> {{ Auth::user()->username }}
</a>
</li>
<li>
<a href="http://bulma.io/documentation/modifiers/syntax">
<i class="fa fa-university"></i> Business
</a>
</li>
<li>
<a href="http://bulma.io/documentation/columns/basics">
<i class="fa fa-user-secret"></i> Gangs
</a>
</li>
<li>
<a href="http://bulma.io/documentation/elements/box/">
<i class="fa fa-users"></i> Community
</a>
</li>
<li>
<a href="http://bulma.io/documentation/components/breadcrumb/">
<i class="fa fa-shopping-cart"></i> Store
</a>
</li>
</ul>
</nav>
</div>
</div>
</section>
<nav class="navbar has-shadow">
<div class="container">
<div class="navbar-tabs">
<a class="navbar-item is-tab is-active" href="http://bulma.io/documentation/overview/start/">Home</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/start/">Profile</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/customize/">Education</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/classes/">Skills</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/modular/">Housing</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/modular/">Security</a>
</div>
</div>
</nav>
<div class="container holorp-container-fixed">
<br>
<div class="columns is-desktop">
<div class="column is-8">
<div class="message is-danger">
<div class="message-body">
<p>not sure what can even go here...</p>
</div>
</div>
</div>
<div class="column is-4">
<div class="message is-success">
<p class="message-header">Change Log <span class="is-pulled-right"><i class="fa fa-user"></i></span></p>
<div class="message-body">
<span class="tag is-dark">26/09/17</span> <code>Updates the platform with a fresh design</code><br>
<span class="tag is-dark">26/09/17</span> <code>Upgraded from Laravel 5.4 to 5.5</code><br>
<span class="tag is-dark">26/09/17</span> <code>Added core features to the admin panel</code><br>
<span class="tag is-dark">26/09/17</span> <code>Did something, can't even remember</code><br>
<br>
<p><a class="modal-button" data-target="#modal-forgotPassword" id="forgot-pw-modal">View all recent changes</a></p>
</div>
</div>
</div>
</div>
</div>
</body>
If I understand well, you need "the same header" on every page. Laravel comes with Blade Template Engine, it has a set of methods to help us.
Using the template engine, you can create your app template in resources/views/layouts/app.blade.php
using #yield you can inform what part is dynamic:
<div class="container">
#yield('content')
</div>
To reuse the template in others views, for example using two pages:
The content of file resources/views/layouts/pages/one.blade.php
#extends('layouts.app')
#section('content')
<div class="row">
<h1>Page 1</h1>
</div>
#endsection
The content of file resources/views/layouts/pages/two.blade.php
#extends('layouts.app')
#section('content')
<div class="row">
<h1>Page 2</h1>
</div>
#endsection
Using #yield, #extends and #section you can reuse any HTML template in your Laravel Application.
We can create any #yield that we need:
<div class="container">
#yield('content')
</div>
#yield('scripts')
And reuse in our pages:
#extends('layouts.app')
#section('content')
<div class="row">
<h1>More than one #yield</h1>
</div>
#endsection
#section('scripts')
<script type="text/javascript" />
console.log('using Blade Template Engine');
</script>
#endsection
There is the #include method, that includes the content of another file if you need.
#extends('layouts.app')
#section('content')
<div class="row">
<h1>Page 2</h1>
#include('forms.form2')
</div>
#endsection
UPDATE:
Knowing these things above, we can do:
#extends('layouts.app')
#section('content')
<div class="row">
<h1>You are in Item B</h1>
<ul>
<li id="liA">Item A</li>
<li id="liB">Item B</li>
<li id="liC">Item C</li>
</ul>
</div>
#endsection
#section('scripts')
<script type="text/javascript" />
var d = document.getElementById("liB");
d.className += " is-active";
</script>
#endsection
This will add the CSS class in the element with id "liB", we need to use something to identify the element, I'm using "id" property but you can use anyone, just need to check what JS method to use to get it in "d" variable. You can check this for more information Element.className
I don't use Bulma, but I believe that will do what you want.
I have a bootstrap carousel. I have two column in each row. I want my images to come from database through php.
Here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/full-slider.css">
<title>Untitled Document</title>
</head>
<body>
<!-- Full Page Image Background Carousel Header -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<?php
$query = mysql_query("select * from slides");
while($row = mysql_fetcj_array($query)){
$slides = $row['image'];
?>
<div class="item active">
<div class="row">
<div class="col-sm-6 col-xs-6"> <img src="<?php echo $slides ?>" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-6 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
</div>
</div>
<?php } ?>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</body>
</html>
Now the problem is that I have my first div class (item active), and others are just item. When I applied my PHP every div gets class (item active) how I applied loop in PHP that my html did not disturb and my slider run accurately.
I don't know if this is the right way to do it or not..but what i will suggest is to not to apply the active class in the loop.. Let the DOM load and then apply it to the first index of class using JS(or Jquery).
$(document).ready(function(){
$("item")[0].addClass("active");
})
OR you can just add an if in the PHP code for the first index
if(index==0){
echo "<p class='item active'></p>";
}else{
echo "<p class='item'></p>";
}
Something like this? Check for first iteration:
<?php
$isFirst = true;
while (image loop) {
// echoing image start...
echo "<img ";
// echoing stuff
if ($isFirst) {
echo "class='active'";
}
// echoing the end of image
echo " />";
$isFirst = false;
}
?>
Can't comment so will answer, sorry.
Where is your PHP? Hard to figure out whats wrong with it without seeing it..
EDIT: Your code only has one item defined. It's surprising the carousel even works. You need to close the div
I've below HTML code which I intend to use with index.php file but there seems a problem.
<!-- nav bar -->
<nav id="top">
<nav class="navbar navbar-xs navbar-custom">
<div class="container-fluid" >
<div class="nav pull-right">
<font face="bebas">
<ul class="list-inline">
<li> 123456789 </li>
<li class="dropdown"><i class="fa fa-user"></i> My Account <span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-right">
<li>Register</li>
<li>Login</li>
</ul>
</li>
<li><i class="fa fa-heart"></i> Wish List (0)</li>
<li><i class="fa fa-shopping-cart"></i> Shopping Cart</li>
<li><i class="fa fa-share"></i> Checkout</li>
</ul>
</div>
</div>
</nav>
</nav>
<!-- searchbar and logo -->
<header id="margin">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div id="logo">
<center> <span class="tab-space"></span> <img src="J:\lawn\home\artwork\lawn.png" height="42px" />
</div>
</div>
<div class="col-xs-5">
<div id="search" class="input-group">
<input type="text" name="search" value="" placeholder="Search" class="form-control" border-rad>
<span class="input-group-btn">
<button class="btn btn-secondary" type="button" style="border-radius: 0;">Search</button>
</span>
</div>
</div>
<div class="col-xs-3">
</div>
</div>
</div>
</font>
</header>
index.php
<!DOCTYPE html>
<html>
<head>
<title> experiment ground </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- <meta name="viewport" content="width=device=width, initial-scale=1"> omitted to remove unresponsiveness of columns -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\cutom.css" rel="stylesheet" type="text/css">
<script src="J:\bootstrap\bootstrap-3.3.6-dist\js\bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<?php include('includes\header.html'); ?>
</body>
</html>
i want an output like this but all i am getting is this.
is it a problem with using bootstrap or something else entirely.
my main purpose is to use include() feature of PHP to make my code minimal. is there any other way I can include headers or footers templates or codes to a PHP page?
thank you!
Link jQuery before you include Bootstrap
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\cutom.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>
<script src="J:\bootstrap\bootstrap-3.3.6-dist\js\bootstrap.min.js"></script>
1) open your Developer Tools (F12)
2) refresh page
3) check "console" tab
I think, you'll find answers in console.
Anyway, change your paths to relative (assuming file index.php at one tree level with bootstrap directory):
href="bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css"
Instead of:
href="J:\bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css"
And do it for all files, or just connect it from CDN - it will be great ;)
Call jquery.min.js before bootstrap.min.js
The script bootstrap.min.js uses jQuery plug-in in most actions.
Also, check if the files are actually in the path described. It is highly recommended that you call the files from the main project directory.
I am creating a custom theme, but have run into some problems. For your information my files are as seen below:
themes/
aq-aquatics/
css/
img/
js/
footer.php
functions.php
header.php
index.php
page-homepage.php
page-wide.php
style.css
index.php
This is my header.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="<?= get_template_directory_uri(); ?>/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="Matthew Smart">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body>
<div class="wrap">
<header>
<div class="header-top text-right">
<div class="container">
<span style="margin-right:40px;">Tel: 01922 418050</span><span>Email: sales#hollybush-garden.com</span>
</div>
</div>
<div class="container">
<div class="header-content" style="min-height:86px;">
<div class="row">
<div class="col-sm-1" style="position:absolute;top:11px;z-index:1000;">
<img src="<?= get_template_directory_uri(); ?>/img/logo.png" width="108" height="100" alt="a&d logo"/>
</div>
<div class="col-sm-offset-1 col-sm-10 text-right" style="margin-left:132px;">
<nav class="navbar">
<div class="container">
<div>
<ul class="nav navbar-nav" style="width:inherit; border-bottom:none !important;margin-top:31px;">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">At A & D
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Aquatics
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Tropical</li>
<li>Pond</li>
<li>Marine</li>
<li>Cold water</li>
<li>Aquatics Sundries</li>
</ul>
</li>
<li>Valencia Wharf Coffee Shop</li>
<li>Opening Times</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="purple-line" style="margin-bottom:25px;"></div>
</header>
This is my page.wide.php
<?php
/*
Template Name: Wide Page
*/
get_header();
?>
<?php
if ( have_posts() ) {
while ( have_posts() ) {
//
// Post Content here
the_content();
//
} // end while
} // end if
?>
<?php get_footer(); ?>
And this is my footer.php
<footer>
<div class="container">
<div class="col-sm-6">
A&D AQUATIC & GARDEN CENTRE | WEBSITE DESIGN BY <span>MATTHEW SMART</span>
</div>
<div class="col-sm-6 text-right">
<ul>
<li>TERMS AND CONDITIONS</li>
<li>PRIVACY POLICY</li>
<li>COOKES</li>
</ul>
</div>
</div>
</footer>
</div><!-- End WRAP -->
<?php wp_footer(); ?>
</body>
</html>
Now the page i am trying to test is using the wide template. I have put some dummy text into the editor and clicked publish.
Now when i try to visit the page the first thing i can see is part of the header. The browser then takes another 5 seconds and loads the navigation which is in my header.php file.
It seems to just ignore everything from the page template and afterwards. So the_content() pulls nothing through and the footer doesn't get displayed.
I have been comparing these files with other themes i have created and cannot seem to find a cause.
Does anyone know why this may be happening?
Thanks
Your loop is missing the_post().
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//
// Post Content here
the_content();
//
} // end while
} // end if
?>
https://codex.wordpress.org/Function_Reference/the_post
This is necessary to let WordPress know you are inside the loop, and retrieve the requested post's data. The footer isn't loading because the page is erroring out when it calls the_content() and cannot deal with this function outside the loop.
According to WordPress documentation the_content "must be within The_Loop."
I have been converting my PHP files from ANSI to UTF-8 and something weird happened to my code and I don't know why. This is my index.php code
<?php get_header(); ?>
<div id="container">
</div>
<?php get_footer(); ?>
And my header.php is this:
<!DOCTYPE html>
<html>
<head>
<title>Somethingá</title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>">
</head>
<body>
<div id="header">
<div id="header-wrap">
<div id="logo"><img src="<?php bloginfo('template_directory'); ?>/img/logo.png" alt="ODS"></div>
<div id="header-text">Karviná</div>
<hr>
<div id="menu">
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
</div>
</div>
and the last footer.php contains this:
<div id="footer">
</div>
</body>
But there is a problem that I can't understand. It's a wordpress theme, all files are in UTF-8 coding. Everytime I open the site with this selected them, there are blank spaces. For example header is not at the top of page but about 20px from the top. I checked the code which I can see in developer console in Google Chrome and it contains this:
<html>
<head>
<style type="text/css"></style>
</head>
<body>
<title>Somethingá</title>
<link rel="stylesheet" type="text/css" media="all" href="http://XX.XXX.XXX.XX/wp-content/themes/xxx/style.css">
<div id="header">
<div id="header-wrap">
<div id="logo"><img src="http://93.185.106.91/wp-content/themes/ods/img/logo.png" alt="ODS"></div>
<div id="header-text">Karviná</div>
<hr>
<div id="menu">
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
It's totally weird. I don't get it why did content of <head> </head> moved to <body> </body>. It also generated that huge blank spaces between <body> and <title>, </div> and <div id="footer">.
Thank you.
firstly, I suggest looking at the "View Source" option to see the actual code that is being loaded into the browser. Looking at the developer tools will show you the code after the browser has processed it, which will be different to the code you're actually outputting.
The reason it's different is because the browser will handle any invalid HTML and try to arrange the page as best it can if the HTML isn't valid.
In your case, it's fairly clear that there's something invalid in the HTML. I can't see what it is, but you can check it for yourself very easily by using the W3C Validator. This will tell you of any HTML errors in your code.
Fix those errors, and the browser should start showing your page correctly.
Hope that helps.
Code was clean but if you are creating Wordpress Theme and you need UTF 8. You have to use UTF-8 without BOM! Not with BOM.