Sorry for the stupid question, but I looked everywhere in the doc. If I want to set size, height and width of an image with HTML::image, how can I do it?
I tried with:
{{ HTML::image('path', array('width' => 70 , 'height' => 70)); }}
But it doesn't seem to work.
It should work with
{{ HTML::image('path', 'alt', array( 'width' => 70, 'height' => 70 )) }}
The alt text comes before the attributes array.
In Laravel 5 following ways to use img in blade:
{!! HTML::image('img/picture.jpg', 'a picture', array('class' => 'thumb')) !!}
Note: you need to install laravel library before use HTM i.e "laravelcollective/html": "~5.0",
OR
<img src="{!!asset('img/picture.jpg')!!}">
OR
Set dynamically url:
<img src="{!!asset('img/').'/'.$imgsrc!!}">
Solution : store image path to your MYSQL table field. And dont forget the dot ( . ) at the beginning of filepath.
<img src='./images/bajja_huggy2.gif' class= img-responsive style= height: 22px; width: 100px; >
you can see how I have used twitter bootstrap and other properties.
#foreach($imagefiles as $img)
<div class="col-xs-2 ">
{{ $img->image_3}}
</div>
#endforeach
you can
{{ HTML::image($product->image, $product->title, array('width' => '90%', 'height' => '50%')) }}
it required to be Apostrophe if create inside the percent.
<img src="{{ asset('folder-name/pic_trulli.jpg')}}" class="img-fluid" style="min-width: 20px; min-height: 20px;">
<img src='./images/bajja_huggy2.gif' class= img-responsive style= height: 22px; width: 100px; >
Related
In my laravel project image is not showing. I am using voyager admin panel.
In database image name is
banners\March2019\xqem6GRUtqSU6pyWZRDJ.jpg
In blade template using the below code to show image
<img class="d-block w-100" src="{{ url('/images/'.$data->banner_image) }}" data-color="lightblue" alt="First Image">
Through inspect element I got image source as below
http://localhost:8000/images/bannersMarch2019xqem6GRUtqSU6pyWZRDJ.jpg
Here no slash in this path bannersMarch2019xqem6GRUtqSU6pyWZRDJ.jpg. But actual path is banners/March2019/xqem6GRUtqSU6pyWZRDJ.jpg.
Because of this path problem image is not shown.
So my question is why there is no slash ? How can I solve that ?
Someone help me please. Thanks in advance.
I believe this is a bug in voyeger. Backslashes in media asset path when saving to db. You can solve it using,
$output = str_replace('\\', '/', $data->banner_image);
You can see this thread for more details : https://github.com/the-control-group/voyager/issues/2834#ref-commit-0d6bffb
Double check your config/filesystems.php storage variable, you must upload / place your images in the
'public' => [
'driver' => 'local',
'root' => storage_path('app/public'),
'url' => env('APP_URL').'/storage',
'visibility' => 'public',
],
The "root" index here determines where your files would be located once you display it in the view, by default, it's being located at storage/app/public
Please try this below. It should work.
<img class="d-block w-100" src="{{ url('/images/'. '/' . $data->banner_image) }}" data-color="lightblue" alt="First Image">
(Sorry for my english, i'm trying to not use Google Translate ^^)
So.. I created a CPT UI "projets" which contain actually 2 posts (FMXD and Siemens) as you can see here :
I want that when i click on FMXD, i have a first page only displaying the post_thumbnail of FMXD. Like This :
As you can see, my page is displaying FMXD and Siemens and i don't understand why...
Actually, i have a single-projets.php :
<?php
/*
Template Name: Projets
Template Post Type: post, page, product, projets
*/
$context = Timber::get_context();
$posts = Timber::get_posts( array(
'post_type' => 'projets',
'posts_per_page' => -1,
'orderby' => 'title',
'order' => 'ASC',
) );
$context['posts'] = $posts;
Timber::render( [ 'single-projets.twig'], $context );
?>
and a single-projets.twig :
<div class="container-fluid">
{% for post in posts %}
<div class="row">
<div class="imgProjets">
<img src="{{ post.thumbnail.src }}" alt="">
</div>
<div class=" offset-9 col-3 title">
<a href="{{ post.link }}">
{{ post.title }}
</a>
</div>
</div>
<div class="row">
<div class="offset-9 col-3">
{{ post.meta('clients') }}
</div>
</div>
<div class="row">
<div class="offset-9 col-3 bg-light text-dark">
See the projects
</div>
</div>
{% endfor %}
</div>
And after that, i want to click on "See the projets" and see the content of FMXD OR Siemens, and not both.
Sorry it was quit long, but i really need your help, i'm really blocked....
This is the kind of code you might want in archive-projets.php, but not in a template for a single post.
This part:
$posts = Timber::get_posts( array(
'post_type' => 'projets',
'posts_per_page' => -1,
'orderby' => 'title',
'order' => 'ASC',
) );
$context['posts'] = $posts;
is getting all projets posts and passing them to the view to be rendered in a loop.
You can replace that entire part with:
$context['post'] = new Timber\Post();
You don't need a loop in your Twig view at all, since there's only one post to render. So just remove {% for post in posts %} and the corresponding {% endfor %}.
I have a a Bootstrap panel with two buttons in the footer:
<div class="panel-footer">
{{ Form::open( array('route' => array('dogs.edit', $dog->id), 'method' => 'get', "class" => 'col-lg-6 ')) }}
{{ Form::submit("Edit", array('class' => 'btn btn-default')) }}
{{ Form::close() }}
{{ Form::open( array('route' => array('dogs.destroy', $dog->id), 'method' => 'delete', "class" => 'col-lg-6 ')) }}
{{ Form::submit("Delete", array('class' => 'btn btn-default')) }}
{{ Form::close() }}
</div>
The forms for each of the buttons have the class pull-left and pull-right so that they are each floated to either side of the panel footer.
The float is working, but the buttons are now outside of the footer:
I tried using the grid system instead of the pull helpers but I ended up with the same result.
I've also searched around for the solution (this has to be pretty common I would think) and haven't found an explanation that doesn't require overriding Bootstrap with custom css.
Is it possible to fix this with just Bootstrap or would I need to throw my own css in to fix it?
Just add a div with clearfix after the buttons
<div class="clearfix"></div>
stalin's answer is correct, but you can use another approach that is more elegant
From Bootstrap Documentation (#clearfix)
Easily clear floats by adding .clearfix to the parent element.
Just add clearfix to the parent div:
<div class="panel-footer clearfix">
{{ Form::open( array('route' => array('dogs.edit', $dog->id), 'method' => 'get', "class" => 'col-lg-6 ')) }}
{{ Form::submit("Edit", array('class' => 'btn btn-default')) }}
{{ Form::close() }}
{{ Form::open( array('route' => array('dogs.destroy', $dog->id), 'method' => 'delete', "class" => 'col-lg-6 ')) }}
{{ Form::submit("Delete", array('class' => 'btn btn-default')) }}
{{ Form::close() }}
</div>
just add the class text-right on the panel-footer div
I think its strange that .panel-footer isn't included in the clearfix css library already the way .panel-body and even .modal-footer are. Instead of having to remember to throw a clearfix class on ever footer (if you have a lot it can be a pain) its better to just add the clearfix css to .panel-footer in your master CSS or edit the library directly.
.panel-footer:before, .panel-footer:after {
display: table;
content: " ";
}
.panel-footer:after {
clear: both;
}
In Laravel, how can I use html-tags when linking to a route via HTML::link_to_route()?
Example of what I have:
<li>
{{ HTML::link_to_route( "books_new", "New Book" ) }}
</li>
What I would like to do:
<li>
{{ HTML::link_to_route(
"books_new",
"<span class='icon-book'></span>New Book"
) }}
</li>
I know this is not the answer you want to hear - but you cannot pass html via link_to_route.
The problem is the output from the HTML class is escaped automatically. So if you try to pass this:
{{ HTML::link_to_route('author','<img src="'.URL::base().'assets/images/image.jpg" alt="icon" />')) }}
it comes out like this:
<img src="http://laravel3.dev/assets/images/image.jpg" alt="icon" />
which will just be text on the screen - no image. Instead you need to use URI::to_route('author') and generate the link yourself. So make a helper a like this (not tested):
function link_to_route_image($route, $image)
{
$m = '<a href="'.URL::to_route($route).'">'
. '<img>'.$image.'</img>'
. '</a>';
return $m;
}
How about something like this?
<li>
<span class='icon-book'></span>New Book
</li>
If you're using "Font Awesome", just adding the class to anchor tag as someone mentioned would be fine for most cases because "Icon classes are echoed via CSS :before". You might need a bit of adjustment in CSS; but it might be better in terms of semantic mark-up.
<a href="{{ URL::route('empdelete', array('id' => $employee->id)) }}">
<img src="{{ asset('images/tick-red.jpg') }}" alt="DRC" id="DRCS-logo" /></a>
You can not have HTML markup with HTML::.... (class) , in the documentation they say that anything that is passed as a parameter to the class is escaped with an HTML entity function to make front-end safer!
You can include font awesome or icon into Laravel Blade Template using this code, i already use and work perfect.
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>Edit
If you're using "Font Awesome", just adding the class to anchor tag as someone mentioned would be fine for most cases because "Icon classes are echoed via CSS :before".
So this is working for me:
<li>
{{ HTML::link_to_route( "books_new", "New Book", null, ['class' => 'fa fa-edit'] ) }}
</li>
So far as I know, Laravel doesn't allow you to do that. To me, it seems out of standards.
Rather, apply a class called icon-book to your anchor tag, and then use the class to put the icon inside your anchor as a 'background-image`.
HTML::link_to_route('books_new', 'New Book', array('class' => 'icon-book'))
Alternatively:
Insert the span tag inside the li tag
Assign the icon-book class to the li tag
I have a the following checkbox field (1)
and I would like to add an image to the checkbox.
I added it in twig file in the following way (2) but it is bad placed.
I would like to place it in the following way (3)
// (1)
->add('remove_avatar', 'checkbox', array(
'label' => 'user.label.current_avatar',
'required' => false,
'mapped' => false,
))
// (2)
{{ form_widget(form) }}
<span class="user">
<img src="{{ get_avatar(user) }}" class="user-avatar">
</span>
// (3)
<div class="controls">
<img src="some_like">
<input type="checkbox" id="profile_remove_avatar" name="profile[remove_avatar]" value="1">
<label class="control-label" for="profile_remove_avatar">Remove the current avatar</label>
</div>
What is the best way to do it?
Instead of rendering the total form with only form_widget(form) you can do more if you render each field for itself. Like this:
<div class="controls">
<img src="some_like">
{{ form_widget(form.remove_avatar) }}
{{ form_label(form.remove_avatar) }}
</div>
If you got more fields in your form render them the same way OR place them all at the end with form_rest(form).
This is how you customize a symfony2 form from inside a twig template. So i think this is the best and easiest way.