I am trying to get the full path of my image to work across the board instead of using image/blah/blah on my page I have them working with the blade template engine
{{ HTML::style('css/bootstrap.css'); }}
{{ HTML::style('css/bootstrap-responsive.css'); }}
{{ HTML::style('css/style.css'); }}
{{ HTML::script('js/jquery.js'); }}
But I am trying to use background-image for a menu bar
background-image: url(images/transparentBackground.png)
Is there a way to use Blade templates to get that image to load the full path?
If I use
background-image: url({{ HTML::script('images/transparentBackground.png'); }})
It doesnt work and returns errors.
Well, first of all, you'd want to use
url({{ URL::asset('images/transparentBackground.jpg') }})
instead of
`HTML::script()`.
That would work if you are using inline styles.
If you are trying to have blade parse a linked stylesheet however, that's just never going to work. Nor should it. In that case, you might want to look into using something like Sass and Compass. With the right configuration, you can have full paths to your images generated automatically.
I don't understand your problem very well. Why do you need a full path? This is css. Images folder has to be near a css file.
In your case try background-image: url(../images/transparentBackground.png)
-- public (folder)
---- css/style.css
---- images/transparentBackground.png
You can use helper functions Here
Here is an example of background-image using helper function
background-image: url("{{ public_path('images/bg_invoice.jpg') }}");
public_path is a helper function to the path of public folder in your Laravel app and images is the nested folder in public. Thanks
If you are writing inline styles (via the style="" attribute in the HTML tag, then what #Rogier suggested would work.
If you want to use blade to generate CSS then you could do it by creating a CSS controller and passing your variables through that to a blade template to render the CSS (remember to set the content-type header to text/css).
HTML::image('url/to/image.jpg', 'alt text');
OR
CAN BE USED
img src="{{ URL::to_asset('url/to/image.jpg') }}
For Laravel 5 just do this
style="background-image:url({{ asset('Images/jamb.jpg') }});"
And like #Khandad Niazi said its just for inline CSS
Related
I must show an img html element with src pointing to an image that is originally defined within the resources/images/ folder. So I have written, in my Blade template, the following line (normally it's correct):
<img class="illustration" src="{{ asset('/images/design_7.jpg') }}" alt=""/>
Problem : it doesn't work. Indeed, I don't find this image in the directory named public.
I've seen that Laravel automatically compiles the image if the latter is pointed by the CSS url property. Why isn't it the case with the html src attribute? How can I solve this problem?
Use mix.copyDirectory('resources/<your folder images>', 'public/<your destination folder images>) in your webpack.mix.js file.
(The css compiled images were in fact due to mix.less(<the css file>, public/<the css destination file>))
See 1) https://laravel.com/docs/8.x/mix#copying-files-and-directories and 2) https://laravel.com/docs/8.x/mix#working-with-stylesheets
This is for a small school assignment.
We are trying to create and deploy a search website of local cricket players.
I have everything running locally the only thing is I need to use is asset on my images to get them to deploy properly.
currently I have in my local
<img src="/images/{{$player['image']}}" class="playerimg">
I have tried concatenating it but to no avail.
The reason I have a variable $player is because we are pulling data from two tables and looping around the array.
Any help would be greatly appreciated
Edit: Solved Thank you all for your help ! code below
<img src="{{ asset('images/'.$player['image']) }}" class="playerimg">
Laravel - Helpers: asset()
https://laravel.com/docs/master/helpers#method-asset
<img src="{{ asset('images/'.$player['image']) }}" class="playerimg">
There are several ways to display the image.
I'm assuming index.php in public folder.
asset() Generates a URL to an application asset (code)
Use for files that are directly served such as CSS, images, javascript.
Only accepts a direct path.
{{ asset('images/'.$player['image']) }}
// http://www.example.com/public/images/abc.png
If you stored your image in storage folder then,
<img src="{{ storage_path('images/'.$player['image']) }}">
Make sure config.php should be configured properly for storage_path.
i am an absolute beginner in laravel i have a basic structure for now, there is an app template which contains the structure of the view i.e
head
navbar
#yield("content")
footer
now the structure is working fine now for some specific pages i have to include google map the map blade is placed inside includes/map.blade.php this is my index blade
#extends("app")
#section("content")
the content goes here
#extends("includes.map")
#endsection
basically after the content i want to put the map so that it comes above footer but somehow whenever i try to extent it it always comes at the top
If you want to include the map then it should be #include (doc):
#extends("app")
#section("content")
the content goes here
#include("includes.map")
#endsection
You cannot use two extends.
Instead of #extends("includes.map") use #include("includes.map")
I am going to use AngularJS along with Laravel, and I wanted to change Laravel tags to [[ ]] (which I think BTW is nicer since [ ] looks more like blade and is sharper :p )
Anyhow, I changed it with
Blade::setContentTags('[[', ']]'); // for variables and all things Blade
Blade::setEscapedContentTags('[[[', ']]]'); // for escaped data
How do I change the "Bracket Highlight" in Sublime now so that it still highlights my new tags??
Not directly answerting your question, but my solution to have Angular and Blade playing nice is very simple, I create a _partial every time I need some Angular and name this partial just '.php' and not '.blade.php', so if I have a form that uses Angular, I have:
{{ Form::open() }}
#include('_partials.posts.forms.create');
{{ Form::close() }}
In this case the included file would be views/_partials/posts/forms/create.php.
About Sublime, download Blade Syntax Highlighter, this file might give you a clue about how to change that for you:
https://github.com/Medalink/laravel-blade/blob/master/laravel-blade.tmLanguage
I know that you can change the default blade delimiter using
Blade::setEscapedContentTags('[[', ']]');
Blade::setContentTags('[[[', ']]]');
However I don't know where should I put it so that it only affect single blade template as opposed to putting it at app/start/global.php which affect whole application.
If you only want to use different tags for a single view, you can set the tags in the closure or controller action that will generate the view.
Route::get('/', function()
{
Blade::setEscapedContentTags('[[', ']]');
Blade::setContentTags('[[[', ']]]');
return View::make('home');
});
This could be an issue if you want to use the normal tags {{ and }} in an application layout but your custom ones in a nested view - I'm not sure what the best approach there would be.
The solution with Blade::setEscapedContentTags / Blade::setContentTags doesn't work in the latest versions of Laravel (checked at 5.6).
The recommended approach is (https://laravel.com/docs/5.6/blade#blade-and-javascript-frameworks):
Blade & JavaScript Frameworks
Since many JavaScript frameworks also use "curly" braces to indicate a
given expression should be displayed in the browser, you may use the #
symbol to inform the Blade rendering engine an expression should
remain untouched. For example:
Hello, #{{ name }}.
In this example, the #symbol will be removed by
Blade; however, {{ name }} expression will remain untouched by the
Blade engine, allowing it to instead be rendered by your JavaScript
framework.
The #verbatim Directive
If you are displaying JavaScript variables in
a large portion of your template, you may wrap the HTML in the
#verbatim directive so that you do not have to prefix each Blade echo
statement with an # symbol:
#verbatim
<div class="container">
Hello, {{ name }}.
</div>
#endverbatim
Simply use #verbatim directive.wrap your whole code in it and blade will just ignore all the curly braces.