Laravel dom pdf image issue - laravel

I am using dompdf in laravel to create invoice. and it works fine for me until i use image in that.
Admin Controller
public function generateInvoice(Request $request)
{
$user = Auth::user();
$pdf = PDF::loadView('pdf.invoice', $user);
return $pdf->download('invoice.pdf');
}
And in Invoice View Page that contains the invoice template...
<style>
.block{
display: block;
}
.minifont12{
font-size: 12px;
}
.minifont10{
font-size: 10px;
}
.col-md-45{
width: 45%;
display: inline-block;
}
.col-md-30{
width: 30%;
display: inline-block;
}
.col-md-25{
width: 24%;
display: inline-block;
}
.bluecolor{
background-color: #C5C5EC;
}
.midtop{
margin-top: 50px;
}
</style>
<div class="header" style="position:relative; top:10; width:100%; ">
<img src="http://localhost:8000/img/minilogo.jpg">
<div style="text-align:center; margin-top:-20px;">Retail Invoice/Bill</div>
<div style="text-align:right">Invoice No. #BTR_PB_000052</div>
</div>
<div class="content">
<div class="minifont12 block" style="margin-top:20px;">
<strong>Sold By:</strong> SRM Smart Solutions Pvt. Ltd.<br>
<span class="minifont10">
Building No. 29, Third Floor, Central Market, West Punjabi Bagh, Delhi-110026
</span>
</div>
<hr>
<div class="col-md-45">
Order Id : BT121178273<br>
Order Date : 24-05-2016<br>
Invoice Date : 25-05-2016<br>
CIN No. : U72300DL2015PTC281652
</div>
<div class="col-md-30">
Avinash<br>
H.No 30-45-5/26, Chandigari colony east, rohit cottage lane, opp. krupa comlex lane, r.k.puram post, 500 056, hdy.<br>
Hyderabad, telangana - 500056<br>
8099473211
</div>
<div class="col-md-25">
<span class="midtop bluecolor">
*Keep this invoice for return and refund purposes
</span>
</div>
</div>
but When I run the code...it will show error message
Maximum execution time of 60 seconds exceeded
Please tell me what is the issue behind this..

I had the same issue when using a very large image. I solved the issue by changing the maximum execution time by adding this line before starting the pdf creation: ini_set('max_execution_time', 120);. You can also change this in your php.ini file if you like, just make sure you know what you're doing, as this setting applies to all scripts executed on your web server. You'll also have to restart your web server after making changes in the php.ini file.
Some other options so solve this are discussed here.

you can use this code :
<img src="{{ public_path("images/a.png") }}">
or can :
<div style="background: url({{ public_path("images/a.png"}})">text</div>

Related

Various errors trying to add an extra function to CRUD

First, I clearly do not fully understand routing. This problem is not DB related, but management of images in a folder but I used the Resource process to create the crud elements. Maybe this is not the correct approach for file management.
I have the following view (it is not a finished view, just for testing):
#extends('layouts.app')
#section('content')
<!--/*{ { dd(get_defined_vars(), url()->current()) } }*/-->
#if(!Auth::guest())
#if(Auth::user()->admin == 1)
<h3>Manage Gallery</h3>
#else
<h3>Gallery </h3>
#endif
#else
<h3>Gallery (Visitor)</h3>
#endif
<style>
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
min-width: 100px;
max-width: 1100px;
}
.flex-item {
display:flex;
align-items: center;
/*height: 100px;
width: 200px;*/
background-color: #f5f8fa;
color: white;
justify-content: space-between;
margin: 3px;
padding: 10px 0 0 10px;
}
.flex-item img{
flex-grow:0;
flex-shrink:0;
}
span {
padding-left: 5px;
}
</style>
#if(count($data['folders'])>0)
<div class="flex-container">
#foreach ($data['folders'] as $folder)
<div class="flex-item">
<form action="{{action('GalleryController#show', $folder)}}" method="get">
<input name="_method" type="hidden" value="show">
<button class="btn btn-lg px-5 btn-primary" style="margin:5px" type="submit" role="button" <img src="assets/folder_image.png" height="30">{{$folder}}</button>
</form>
<!-- --------------------------------------- -->
<!-- Only show crud buttons if administrator -->
<!-- --------------------------------------- -->
#if(!Auth::guest())
#if(Auth::user()->admin == 1)
Delete 1 Picture
<form action="{{action('GalleryController#destroy', $folder)}}" method="post">
{{csrf_field()}}
<input name="_method" type="hidden" value="DELETE">
<button class="btn btn-danger btn-sm" type="submit">Delete entire Folder</button>
</form>
Add piccies
<form action="{{action('GalleryController#add')}}" method="post">
{{csrf_field()}}
<input name="folder" type="hidden" value='{{$folder}}'>
<button class="btn btn-info btn-sm" style="margin:5px" type="submit">Add new pictures</button>
</form>
#endif
#endif
</div>
#endforeach
#if(!Auth::guest())
#if(Auth::user()->admin == 1)
<div class="flex-item" style="width:1500px"> <!-- large width forces flexbox to new row -->
Create
</div>
#endif
#endif
</div>
#else
#if(!Auth::guest())
#if(Auth::user()->admin == 1)
<br><br><br>
Create
#endif
#endif
<p>No Gallery Folders available.</p>
#endif
#endsection
I cannot recall WHY I use a link for 'delete 1 picture' and a form for 'delete entire folder'. I assume I found it in some tutorial and just used it. I want to either delete a specific image (this works fine using the 'edit' component of the Controller) or delete the entire folder (this also works fine using the 'destroy' component of the Controller).
So the next step is to be able to add new folders, or images to a specific folder. Adding a new folder works fine as well using the 'create' component of the Controller.
Then it falls apart trying to add a new image. With the code as shown, I get 2 different errors depending upon whether I click the 'Add Piccies' button or the 'Add new pictures' button.
My route is (and I have tried both get and post):
Route::post('/gallery/add/', 'GalleryController#add');
/* Dynamically create all routes for CRUD for gallery table */
Route::resource('gallery', 'GalleryController');
If I use the 'add piccies' button I get a URL of 'http://hdkumdo.com/lsapp/public/gallery/add?2019_Masters' where ?2019 etc is the folder concerned.
If I use the 'add new picture' button I get the error "Type error: Too few arguments to function App\Http\Controllers\GalleryController::add(), 0 passed and exactly 1 expected'.
If I change the route from post to get, I get the error ' Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException
No message'.
The rendered view looks like this:
View of buttons
Because I have used the basic CRUD elements created by RESOURCE, I added a new function to the controller thinking I can just call it. The code fragment is:
/**
* Show the form for uploading pictures.
*
* #return \Illuminate\Http\Response
*/
public function add($gallery)
{
$folder = $gallery;
$title = 'Add Pictures';
TheUser::get_Role();
$userRole = session('userRole');
Log::info('GalleryController.add called : user Role =>' . $userRole . ' Folder:' . $folder );
$data = array(
'userRole' => $userRole,
);
/*dd($data);*/
return view('gallery.add')->with('title', $title)->with('data', $data);
}
So, any suggestions/advice etc would be most welcome.
See the comments above. It is something to be aware of as it took me several days of head scratching and required a little lateral thinking.

laravel blade - how to hide the display of an html element for specific routes

folks!
I am using Laravel 5.6 with Hyn Laravel-Tenancy Installed.
I have a main menu that is the same for all tenants (subdomains), however, for one or another specific tenant (subdomain), I would like some items to be displayed from that main menu, but for all other tenants, these menu items not visible and also inaccessible, even if called by the url.
On the Blade I used a "#if route::has", but even limited that route to a specific subdomain, this route is available for all other subdomains, so that #if receives as true and ends up displaying the menu item.
I'm not finding a simple solution, could create a helper that identifies the url and if it is from a specific subdomain, would display the item and for the other subdomains would not be displayed, but "I guess" that it should have a native form using Blade along with "routes\web" to achieve this result.
Thanks!!!
use gate and can in laravel
in authserviceprovider create a gate like that:
$gate->define('see-menu',function(){
//check domains or rules or every thing that you need to check to obtain access
//return true if user have access and false if not access
});
and in you view use can to check see-menu
#can('see-menu')
//your code
<li class="devider"></li>.......
#endcan
u can do it like that i have my routs "admin department listOfTeachers" that thet user can see the button of sidemenu and use it
#if(Request::is('admin') || Request::is('department') || Request::is('listOfTeachers'))
<div id="mySidenav" class="sidenav">
×
<p id="poficon2" style="font-family: AwesomeFont;font-size: 27px; float: right;width:auto;height:auto;padding-left: 15px;padding-right: 20px;" class="colorIcon" id="newbornbaby"></p><p style="font-size: 23px;">الرئيسية</p>
<p id="poficon2" style="font-family: AwesomeFont;font-size: 27px; float: right;width:auto;height:auto;padding-left: 15px;padding-right: 20px;" class="colorIcon" id="newbornbaby"></p><p style="font-size: 23px;">قائمة المترشحين</p>
<p id="poficon2" style="font-family: AwesomeFont;font-size: 27px; float: right;width:auto;height:auto;padding-left: 15px;padding-right: 20px;" class="colorIcon" id="newbornbaby"></p><p style="font-size: 23px;">قائمة الاساتذة</p>
<p id="poficon2" style="font-family: AwesomeFont;font-size: 27px; float: right;width:auto;height:auto;padding-left: 15px;padding-right: 20px;" class="colorIcon" id="newbornbaby"></p><p style="font-size: 23px;">الشعب و التخصصات</p>
<p id="poficon2" style="font-family: AwesomeFont;font-size: 27px; float: right;width:auto;height:auto;padding-left: 15px;padding-right: 20px;" class="colorIcon" id="newbornbaby"></p><p style="font-size: 23px;">حسابات العمال</p>
</div>
<div class="centerVertical" style="float:right;margin-right:1.2rem;" onclick="openNav()">
<img src="../resources/images/menu.png" style="margin-top:3px;float:left;width:27px;height:20px;background-size: contain;background-repeat: no-repeat;" alt="student">
</div>
#endif

vertically image in div

This is the code that i have:
<div class="news-container">
<div class="flex_column av_two_third flex_column_div first">
<div class="news-date"><h2>jan 2015</h2></div>
<div class="news-entry">
<div class="news-title"><h2>new title</h2></div>
<div class="news-source">wearhouse</div>
<div class="news-content">excerpt goes here.</div>
</div>
</div>
<div class="flex_column av_one_third flex_column_div">myimage</div>
</div>
how can i get the image to float in the middle vertically of it's div.
i tried adding this code:
.img{
position: absolute;
top: 50%;
margin-top: -100px;
}
but because i have padding of 30px on the news containter it doesn't seem to work properly.
I have my live page at:
http://nodal.rudtek.com/about-us/press-room/news-features/
Try using line-height, usually it works perfectly for me, so chances are it will for you too. Hope it helps.

get width of a div which was generated by javascript on runtime

I have few columns which was generated by dhtmlx's javascript. The column was generated on run time which means that if I tried to view the source code of the page using the Chrome's View Page Source, I won't be able to see the generated code. But I can see the generated code by right clicking on the element and select 'Inspect Element'. So here's a part of the generated code that I copy pasted from 'Inspect Element':
<div id="scheduler_here" class="dhx_cal_container dhx_scheduler_grid" style="width:100%;height:100%;">
<div class="dhx_cal_header" style="width: 1148px; height: 20px; left: -1px; top: 60px;">
<div class="dhx_grid_line">
<div style="width:169px;">Start Date</div>
<div style="width:169px;">Time</div>
<div style="width:169px;">Event</div>
<div style="width:169px;">Location</div>
<div style="width:169px;">Stakeholders</div>
<div style="width:169px;">Type</div>
</div>
</div>
<div class="dhx_cal_data" style="width: 1148px; height: 506px; left: 0px; top: 81px; overflow-y: auto;">
<div>
<div class="dhx_grid_v_border" style="left:184px" id="imincol0"></div>
<div class="dhx_grid_v_border" style="left:370px" id="imincol1"></div>
<div class="dhx_grid_v_border" style="left:556px" id="imincol2"></div>
<div class="dhx_grid_v_border" style="left:742px" id="imincol3"></div>
<div class="dhx_grid_v_border" style="left:928px" id="imincol4"></div>
</div>
<div class="dhx_grid_area"><table></table></div>
</div>
</div>
I'm trying to get the column width of imincol0, imincol1, imincol2 and so on which you can see at the last part of the code. I have tried few methods to get the width of the columns with these ids but to no avail. I'll always get null.
If you use jquery you could do this:
var x = $('#imincol0').width();
If you're using pure js you could try this:
var x = document.getElementById('imincol0').offsetWidth;

simple css text image layout

I am having trouble getting some text to be next to an image. I have it working on one site: http://puckpros.edkatzman.com/
but not on another: http://petra.edkatzman.com/
and I can't see the difference. Can another pair of eyes help?
Here is the jsfiddle: http://jsfiddle.net/tangobango/rK2mG/
HTML:
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<div id="front-page">
<div id="owner-photo ">
<img src="http://petra.edkatzman.com/wp-content/uploads/2013/01/Ed-headshot-small.jpg" alt="Ed Katzman" >
</div>
<div id="owner-description ">
<h1><span class="drop-cap">Hi! </span>My name is Michael Jennings,
the owner and master craftsman of Petra Stoneworks. I have over 25
years experience working with a wide range of both valuable and everyday stone pieces.</h1>
<h3>We specialize in the expert repair of stone objects and the creation
of original pieces. Have a look at the portfolio of our work and contact
us with any questions or to start a discussion of how we might help you.</h3>
</div>
</div>
</div><!-- #content .site-content -->
</div><!-- #primary .content-area -->
CSS:
#front-page {
background-color:#ffffff;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-top:10px;
overflow: hidden;
}
#owner-photo {
width:246px;
height:246px;
float:left;
}
Thanks for including the jsFiddle. That was very helpful. Your problem is a simple typo.
<div id="owner-photo ">
There is a space in the id attribute. Delete that space and the div should float.
I am not really sure what the outlook is for your page but you might want to move the owner-photo ID onto the image itself and remove the potentially unnecessary div from your code.
The diference are:
First, put float:left in id="owner-photo"
<div id="owner-photo " style="float: left;">
<img src="http://petra.edkatzman.com/wp-content/uploads/2013/01/Ed-headshot-small.jpg" alt="Ed Katzman">
</div>
Second:
I don't know why but, don't use <-h1>, use <-p>.
In the example of http://puckpros.edkatzman.com/
first there is:
<img class="left_image" src="http://puckpros.edkatzman.com/wp-content/themes/PuckPros/images/services.png">
and then:
<p>something</p>
and this is the result:
Hope it helps :)

Resources