I am generating a pdf using DOMPDF but in that the image is not displaying instead it is throwing an error "Image not found".
Here is my code :
require_once "dompdf_config.inc.php";
require_once('html2_pdf_lib/html2pdf.class.php');
include_once('../config.php');
$file = "www/test/mytest.php";
$html=file_get_contents($file);
$dompdf = new DOMPDF();
//$dompdf->load_html($my_html);
$dompdf->load_html_file('https://www.lettertowomen.com/admin/dompdf/www/test/mytest.php?id=111');
$dompdf->render();
$dompdf->stream("sample.pdf");
mytest.php
<body>
<form action="" method="POST">
<table width="1000" height="1000" style="background-color: #b91781;font-family: 'DejaVuSerif'; color: #ffffff;font-size: 20px;">
<tbody><tr>
<td width="249" valign="middle" align="center">
<div style="height: 595; width: 249; text-align: left;padding-top:140px;">
<img src="<?php echo base_url;?>uploads/<?php echo $result['image'];?>" style="border-radius: 159px;
width: 159px; height:225px;margin:70px auto 0;">
</div>
</td>
<td width="583" valign="middle" align="center">
<div style="height: 188px; width: 448px; text-align: left;">
<span style="display: block;
float: left;">To <span style="font-size: 22px; font-weight: 700; line-height: 34px; position: relative; top: 17px;"><?php echo $result['recipient_name'];?></span>
</span><br><br>
<div style="clear: both; display: inline-block; min-height: 160px; padding: 0px 18px; margin: 28px auto 0px;color: #ffffff">From the day you were born,<br>
I fell in love with you my girl.<br>
And when you bloomed like a rose without a single thorn,<br>
You turned my entire life into a most precious pearl.<br>
Your love and care for me is a beautiful dawn,<br>
That marks the end of darkness left to unfurl.<br><br>
Feeling blessed to have you as my daughter. </div>
<br><br>
<span style="display: block;
float: right;">From<span style="font-size: 22px; font-weight: 700; line-height: 34px; position: relative; top: 18px;"><?php echo $result['sender_name'];?></span>
</span></div>
</td>
</tr>
</tbody></table>
</form>
</body>
</html>
everything is displaying but image is not displayed. I have check already asked question in stackoverflow : dompdf not displaying image generated by PHP file but it is not working in my case
Also I have set DOMPDF_ENABLE_REMOTE = true
Thanks in advance
You can use Base64 image data
$html = '<div>
<p>IMAGE</p>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABMCAIAAACnG28HAAAABmJLR0QA/wD/AP%2BgvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1AgeBS42B7vBqgAAEhBJREFUeNrtnd%2BPHEcVhfcfBoknxAOIh0g88EsIIqKI1UprObYVe23FwQmskO0EYSskkCgkEo5MCMgoGBABhBDkIXzV3%2Byh6Onu6ZnZ2Zm1u1Qa9fb0VFfdOvfcW7du9%2B59NpWpbKDsTSKYygSsqUzAmsoErKlMZQLWVDZeHj3%2B67vvf/DSjZcODy/%2B9N5bH374O85MwJrKWpACT/vPfe%2B5Z5/97re/8cxXv/L1rz3DwcEPngdhS8FrAtZUZgWWuvHiJcBkBVugivrlL30RbB0eHLx5784ErKksUWCj6zd/DHqAEZD6wuc/x8GNo6uvvnLLPwGZZnEC1lSWsH1CSnKyiq3LV657Ust45dLFCVhTGVXACoiJOyWe8LHEmSdfu3NbK7krphBtgDzp0zR/uynSt3/xJl65AKLKVaDq4YN3WQny%2Bdrxy5cv7MNb1KXs4AaBRc/UhqX4cyrDnhCOjjhgptfHKI3IVVR569Wb1/78x0f1ZWCL88BrKbraFLAgT/CkNkzAOi2uCqqs6/AWremtp7Log8D%2B/emnrSvhLSC1LKo2AixFoD8ItQIv2GtCxvp0VTvXiHcdqbLcC6RwzJkjUTUPLI1Pi8a2Ayw6gaMXKbBqBfUTMtYsPzq%2BG08IF3sdYIFRHCmNIKjieAVC2gKwGLBeocCi6whlQsb6RkBPKLGAldUV10qMGlXHi9pEn08fWFAUfhXunr0HYRDYClw6lRpYiLQ2hQh22WVaC6OGFZisDU3N6QMLDaC7ki0uIeZ8ijisDyzE6GIo2GKFtEJT%2BOz8lnZ0rTbnpZw%2BsDDYAAvG0n%2BffKz1S4lPHl3Vu8AOruy8S1dx/7Ekm%2BvzBhjrzu2oFxXSegrtIFNo8slptebGi8DSxwJYnYu44RWAnKd3hSt8noDFgI3YylhQ7kYHsGvUgutDRbtgbkTBGfVqHe0CWDAWKiosXBsuuySiJ86IaTBM0EYVfm8Twi2kdfOaw8DZWs0bOHcFGDHZKBKONkNGnUAYxyCM84hFyawWJsAIACwhlbSWpRKkErsCVTS1ocXgqQELYSFBPiMvIEXFfkvd5og9DVwFaJgwgcUB3gxjRxRMP9gqJw8vMrsYtWUTMrkeaBp5j/PO8XjKYXYuX7lOf6iJiO4osPQhkKYsTeVPrD49dksnOWJPPGMxcGadITNnVNDDkJMj4CauAikr5cOLLM24YAy83B%2BkmsHilk4ChOPJL0FRezhgB51WWrZ6Jp/1ZacMLG9MR8ETyocmISM6ypgRKF3hJFUfa6nxOxJNhgdb9LuXWqww8abzFhAcHMBS2kGEAHPzybclntdooJeBswHOkKLkmGRyBlL672XP%2BJVb4912usHd458AbmuSF6ia8mxH6iLzSTf4oV2iemD/6Wrn/O6toJ2aOW42k2YjShMZEFlR2ZvXSip%2B42xyfgxEVPE4Afyc1pbNs14fUnT14YN3A%2B5RJubCPl1ljvkEOoh7ngw4w/lco6D6RqdyImQFIra0X5wxpZPKwch4AQ26Tk%2BSTNDZqn3n/cpbJ0Ir9eqxzQ95OWDRxYLxkxVftgXMkPFYgDsGBIFAF4JDolYvNRY2qM%2B7vp1a2AEukGPMduKTP8cAy0cP6HCBQoOqgYsLtnBAGzeLWl9cBw6iVCYg6E4IMs4HWMhqpHAYSCDVh5sxNZAKn4FsRsQ6YHVgaafqXAvgRaOCLGk9iQ4HeXDmwhminYAy9IsetKS/Ylzt%2BGUmfrgPBggcnQZoTGobfXOMdBgRj4kDF5f0xUsynG6WOQUCywi7Bitg0k%2BP255pljMWylbrNkBFnYyV9UFCskJKh0fLiCIxlr4O7I20EfRP60brrf1wBCq8vHEQrX5wfnjxwvSE8OpURj3NdRx/WgYfwEUPuk8E6gw3MrPbboxZc%2Bity1gjyYMuCSyxVQMr6Ubqlaprl2orlulX2n3oT%2BxjmH4SFcs%2BT3ysaHgsieRE/0NRAzO7N9Ka6HUiRK1bJ%2Bu4qVlvaTEA/hy4vaE/fbUAK7lc8lbfnA0YOL9i8kLdzGIf%2Bem0mk4pT4iVYcZKvNHJGOkL0gfDEGipZldUgQOjCXmmTzAhVfQWAcZbiGAV1HwnvUWfI1VvCgliJOyQuZ0ROHBDhTtoiurBsvtyeyPpKls0A7k76mISHR0DEhzYeWC%2BXf3q9TMeBpDgqiOHctTs1rwCBaQwj1o1lftGv3XXOkPVZpGrM67gCsM3JC%2Bj9PWc66P3/HykuPWf4u%2B7LcNYolc6UjTeyhLWSuq81wZrHlj0vH7YZp6iTGwPdBC4Se6nG4jfGxWaO7H6w8sQembcIT4BUkBMfTYIgSrEJFwLIG1riQ438TANTQ0soVPWI4cXW0B3kW/QSAIID80nSZs6xmQbfNLvKUGBJm7E%2Bb6eM1K9n9Dh2AX10VUDyPGxuIU%2BUFZCfQnmDM2u1gvDeXut6aj99NrpLl7Bhf0zSAtYzFiJrTGRCy9m%2BhlqGMsVYqezopSpSopZj8YgVnEgjZkqGF%2BEmYhj28pTM28JROpdImLuwidnuFErJmlwAQCpNgafjAWI2oGlg3ZwZqxHeNAWqJfGaZYBIlVm1ycaYvcl74GbcnHNQ/M7hsgQgegDBHy6xdK/wD2D2M3eMF0Z%2BdXej0lgldjVmFnc%2BcJ%2BJ7CQiHbdAbccqZJ700TLbIc%2BIDKBRZc8qRaGROP8JhjGDHEXLqDyFcdxlrkdf7oE0wjSfon33LwmNAV93xzbtxmLH10dE84w5KPCcGujMHw6Rs3TcNRUz8Gn/5KhAExb14BXuuQ1RmWZAsMis0SmTWbLjAKWCyUty8g9y%2BL6Nb/SXTDKPG8p9FXjqM5fYOK8sFPiwUSdsl2LyTBB%2BEb3qzAWNq4Ji3ClJpW7a%2B9KmKBZOkiW5mX4fJGbfX3%2BuxbfaOcYYKlsVCOfCTQUvT04CLWDieFMGDPfW4v/vvCNN9KdUM7zHL8FYM3oCt1F40cn67nPkzBptjJi5lrgKM9Ddpn8YlKPX3YdpDjyGEnCE9ISkhVAQiE7/16vz6TLrGlzf9OMA7uXuxsf575uJIubedAYbRf0C/dVwlXJpzXBQUPM%2BcT/Mt8D2DL/s14YdmYlMZCEA9x%2BVoddIpzN1u3egGuFFAqRsvgah3F3LeQS5WgkpvafamA5VC7rbM0ncd3ZqJdIkpCkqF4ar6LGC6bb3ggACQK7YdTbQRkkaw2Nm2o15C1JrtUx2oz2c%2BVAVMLN6YQP1KJoiLLStVqouuq5tJegA8clTD2IbLfgEhJDOGeTHrc3HCPWYI3xrspyrPFD9cQ17fEW494qU9lCJ4wr%2B1ZeXIaO8ll7x3r9%2BkbaIykhe5dBYRaYTqr%2BU1ntN6gquwJzm/wGO0r/T%2BLjncAKgnXd%2BhxtWVkfDgRrlAWWK2i9BaNHC%2BOIrhaTOaLrSUUaA6sH7b6rb0e9ZWDp9srhC7tiKpIKoVK6wgqw9B7qELPIkDY6H5XkJ1HomhXcUpXJZslPjc8emqxVX7eJani9cFvjHrlQ6iQJJs98Ms1Wa6u4LLuaZW/SBFrus8sCjY6m1uWLNSrqKwjUDUfR56gZ8TGU6Ps53EuVvdSBAdbUjMSdXee5sdMBFjSQVdsAY%2BmySFEGymfT2Tg38YSCnpnvfLKtUczcyc5Gi64Uh3vSLaGL2gA3gdAS15kzbcWkNvgwwm7OxfyVLRNsCqjOQEhLdPpkW%2BJkIs8tFLXFITt2ac90j1o/pcawKVci8M5sC8677SEEdf%2BL2jdRXBclA7FcA3XZh90ysLTojFzvpLZl2Ycya0Kzkuf/Y1nqxUhc7HjfmhsbT4ZgeEtcZs9h3lYmcFrvznaaNt%2BaYgJnsppokzN9gWaBZbw0mTBJLEYstY8l6MNhMTeJoRfao7Vml62tkM2TATOfr0GYgdmkScnrehQ2aMTcZY2LviTh9FlDlbAG1jZNoeKT0rPg15thwFKFU5X95pbgijfQCE49Q76xhrNlQWPLdD%2BNMKn3Sjy8zQXzInNhmFBWNs46sWJ%2BFX3OLiRtDguFn8y8sWaHx/18408mQWjCXM0Z6w%2BHJS1OMvaNGvMkobdk1fKaEpP9YF0ILZ0%2BiUEfV3yCVehnd6jTTy2W/YT7Hf42gaWW64zXxF7vtCdVpnMDUV9EWjLiYAacjCWN%2B21B6ouXCi9euY4IkpI6sHuvnxGuEit99lr%2By17nsGWv49euSSWtbPjotImA2YMJTQA5cTW9LgMcbn32EYlEWGxis1Zl4EJZUIokCYnPFsVKq2aBa4s7TaGzEGLTnm7Zx8quZ5IY67fehPMHNp7UlfrJVYGl7chDrUJqFoY9ySM1ublvIS1jOZ3GlwcCImptYuUjQycMKhPPb%2BlPFm609r9XvjZ%2BNOThOlHJFG%2B9mfWBbV3xBJhMBcvuoV6dPCSk%2Bp6oCefp2psU2eItlcoFPkNQu7a8KtQqaQVmWUcnK/zZY/%2BL3h0oM%2Bmc%2BvM6yCn/S/KumRNechEwMH4DV/bBXaPhnXlR4n7%2ByD18hu/mvxsv9DZzxu2yVhBJySQ2rDCSEvQWXCrWXp0UyHmaNW1maJHRtFCEeXQVbLUuFlh5Rmj7prAm0iAgzwUMjLaTWuoHDF0AhrRUUF14HVWnanjwyqt4xE2Ec2RnVkgL6Uxniyl0R8V8qQS7l21/9lLGhqv09JMOZcvDChMfrk9t3PBOFslOAKveHzBfZ1nZmTCZJz2SgWToUt/CBZGU5kpnx1/URs/jC%2BPIn8rTRAh2IYwG%2BtM3NbNNqsbZjU%2B8ibdhrQKsNeXlO0KCmzqyYMRSnVstTXGLwNLp3PG3f81sTpPEoU%2B88mtqdgtYWWGZI%2BourJ6m/6Tls3NYDN9nM3TH30yBxuq2J8D2JDBW7cW7gNLY%2ByjiOX0LjY5jWf1duT7m2bKt9zbeyCzi%2BGQwVgxicjtdBJ3Tl2aVvaYmJd8IPmSw46%2BVE1h5%2Bqi8FXbriX6nji3reX%2BJcr1d2PmczA7yax58op7NC9Knf3myuo8lsOY3j7dV/vaX33eqgYHuAGv7Oe%2BbLv9pyjmC1L/%2B8fizk3wBfWEfpdTN%2BvV7b3gZB1QvbhXO//bhr6he/M5br99//ZiDV2/d%2BuFLR9Y7xzdblZNewDHXW/ktP/T47u2fcMy3nrHlAEsfK9aQP89A7Htno0ZKWYkzZgSBmC6/UNwuKsdKCol//OjhhvQ4srYznPcr7uhNc96Tdphf%2BUOmzQ7X%2BfjuRzF53/nWN1t1//nvOzqrZ6jzV/pV5/lTqebz5Mk8jsWroIxknJ3UWv9XARaT6nTWRNqpbZ18GwWKxuSgFmuT13dQiy9S7pQp1zuLN66%2BoAjqe1Gjzd6OUXBlKj8cnsXWtxx7uzETbHCIAZl6kMwCSOXo2g3asTJeqs36Z0TBZV55fHzbevfuz/ikEQ6ohRffef/%2BvfvUN37%2BNn%2B%2B994DD7wsLdgsB/xJB%2BoGvSxvXM7CsESk9/9vUjpHna9ovJatxCnXRlfn6WCvT3y06KS2MMTJ8WrnADJmRqt0WgWp/eajj5WmIuYnSyklN6qPlbhC8e7MEI1zd9oXAV7g9NfVn1jpCT9Jn%2Bkk1ciccSwfIm2FsmLic/DJ3/9JzQUcO941WYFf1c32LTWSXG%2B4QR/rwQcfRfKP//TJoz885jjIZuCZMpCEKLQwHMi%2BfVUuoBZgpRO0wgTQHE0MTyRTwj1UC7tIz2yEA8/U8lrTqNMglQkGHAqCT44Ljf/yHaXDBc5WLeu%2B%2B7bmtXVmeLZkLJPJ9F12/JWFyZrMI0wLF%2Ba13BR%2BJhdBCUFORlelTzVWftlbKHd/Xxjr3n0xvlD0T3zx8cPkbox/GHpry9iT51zM7dloEFHkTeGG1UNZeQ7Ct07sbG/zTpe8nOgMgroTsFYpeSWOby7Z8ZCvGbnZK5yAtdPAmqV9jk5N22LxscRkZpfHIauHhH0v5gSsXSlmUJ2L7Skjunn/Vt447MtRzKKegDWVVTzCkpJ1eDGvfjRb32f4NmTKJ2A9FcWnhvKWnrwrS4RtYh99AtZTUcqLSU8eAa/fpy17TYw1ldWtoW5W3ouc9yX3vZRlAtZUFhcfi8q/PMlrz/2/hxOwprKWNfTB2sTfh9%2BBPQFrKmOtoU/x5%2BVQG32qYgLW00Va/vcb/z3nRu81AevpKr5tYPi9EhOwprK7ZQLWVCZgTeX8lP8CuDenorrKqfIAAAAASUVORK5CYII%3D">
</div>':
require_once('dompdf/dompdf_config.inc.php');
$dompdf = new DOMPDF ();
$dompdf->load_html ($html);
$dompdf->render ();
$dompdf->stream ("Test.pdf", array ("Attachment" => false));
Get the image from php in base64:
//getIMG.php?data=1&id=123
if ($data == 1) {
echo "data:image/".$adj->type.";base64,"
.str_replace ("\n", "", base64_encode ($adj->imageBinary));
}
For showing the image, you have to go to your dompdf source file like
..dompdf\src\Image\Cache.php
In the Cache.php file, you will search .... and make chrootValid true.. by default it will be false.
$chrootValid = true;
save it and try now...
Hope it will work
Related
I am getting below error when generating a PDF in Laravel using barryvdh/laravel-dompdf package of laravel.
Image not found or type unknown
HTML
<html>
<head>
<style>
table
{
border-color: #000;
color: #000;
border-collapse: collapse;
font-family: sans-serif;
}
</style>
</head>
<body>
<table style="width: 100%; margin-top: 10px;" cellpadding="3" border="1">
<tr>
<td style="text-align: right; font-weight: bold; font-size: 14px; padding-left: 5px;">User Image</td>
<td colspan="4" style="height: 50px;">
<img src="/val/test/storage/images/profile_1611820816863.jpg" height="70">
</td>
</tr>
</table>
</body>
</html>
Level
$complete_html = '<above HTML>';
$dompdf = new Dompdf();
$dompdf->loadHtml($complete_html);
$page_size = 'A4';
$dompdf->setPaper($page_size, 'portrait');
$dompdf->render();
$file_name = 'test_dom';
$dompdf->stream($file_name.'.pdf', array("Attachment" => 1));
I have reviewed other post on this topic and set "RemoteEnable" as true in dompdf config file and restarted the server but still getting this issue.
Edit
I have changed image path it is a shared folder path, not project or local path.
Also, file and folder path both have full permission to read and write(777) is already given
This could be because of a file permission issue, Please check your BL server has all required access to read/write an image file from the shared location.
This could happen only if the server configuration could have been changed.
Your class is wrong, to use laravel-dompdf you should call PDF or \Barryvdh\DomPDF\PDF. and change /test/example-app/storage/images/profile_1611820816863.jpg to real absolute path. if your image folder inside app folder you should change to app_path('storage/images/profile_1611820816863.jpg'). Below is working code using dompdf wrapper:
$pdf = \Barryvdh\DomPDF\PDF::loadHtml('<html><head>
<style>
table
{
border-color: #000;
color: #000;
border-collapse: collapse;
font-family: sans-serif;
}
</style>
</head>
<body>
<table style="width: 100%; margin-top: 10px;" cellpadding="3" border="1">
<tr>
<td style="text-align: right; font-weight: bold; font-size: 14px; padding-left: 5px;">User Image</td>
<td colspan="4" style="height: 50px;">
<img src="'.app_path('storage/images/profile_1611820816863.jpg').'" height="70>
</td>
</tr>
</table>
</body></html>');
$pdf->stream('test_pdf.pdf', array("Attachment" => 1));
if you want still use original dompdf without wrapper, you need to change image url to app_path('/storage/images/profile_1611820816863.jpg') and also set chroot to app_path()
below is my tested working code withoud wrapper:
$complete_html = '<html><head>
<style>
table
{
border-color: #000;
color: #000;
border-collapse: collapse;
font-family: sans-serif;
}
</style>
</head>
<body>
<table style="width: 100%; margin-top: 10px;" cellpadding="3" border="1">
<tr>
<td style="text-align: right; font-weight: bold; font-size: 14px; padding-left: 5px;">User Image</td>
<td colspan="4" style="height: 50px;">
<img src="'.app_path('/test/example-app/storage/images/profile_1611820816863.jpg').'" height="70>
</td>
</tr>
</table>
</body></html>';
$dompdf = new \Dompdf\Dompdf();
$options = $dompdf->getOptions();
$options->setChroot(app_path());
$options->setIsRemoteEnabled(true);
$dompdf->setOptions($options);
$dompdf->loadHtml($complete_html);
$page_size = 'A4';
$dompdf->setPaper($page_size, 'portrait');
$dompdf->render();
$file_name = 'test_dom';
$dompdf->stream($file_name.'.pdf', array("Attachment" => 1));
I'm doing a project in Laravel in which student's certificate will be generated dynamically using Barryvdh DomPDF. This is my controller function:
public function certPdfGenerate()
{
ini_set('memory_limit', '-1');
$apply_id= input::get('id');
$get_certificate_data = DB::Connection('mysql1')->table('tbl_apply_certificate')->where('apply_id',$apply_id)->first();
$get_certificate_id1 = DB::Connection('mysql1')->table('tbl_apply_certificate')->select('apply_certificate_id')->where('apply_id',$apply_id)->get()->toArray();
foreach ($get_certificate_id1 as $key)
{
$get_certificate_id = $key->apply_certificate_id;
}
$filename = $get_certificate_id.'.pdf';
DB::Connection('mysql1')->table('tbl_apply_certificate')
->where('apply_id', $apply_id)
->update(['apply_pdf' => $filename]);
$data1 = [$get_certificate_data];
$pdf=PDF::loadView('students::htmlcertificate', array('data' =>$data1), [], ['format' => 'A4-L']);
$pdf->setPaper('A4', 'landscape');
$pdf->save(storage_path('certificates/'.$get_certificate_id.'.pdf'));
return $pdf->stream('htmlcertificate.pdf');
}
This is my view page :
<style type="text/css">
#certbackground
{
background-image: url('http://localhost/folder_name/public/cer_template/final-certificate.png');
background-position: top left;
background-repeat: no-repeat;
background-size: 100%;
padding: 300px 100px 10px 100px;
width:100%;
height:100%;
}
#certbackground1
{
background-image: url('http://localhost/folder_name/public/cer_template/final-certificate-back.png');
background-position: top left;
background-repeat: no-repeat;
background-size: 100%;
padding: 300px 100px 10px 100px;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="certbackground">
#foreach ($data as $value)
<h3 style="margin-top: 142px;margin-left: 900px;font-weight: 100;">{{$value->apply_certificate_id}}</h3>
<h3 style="margin-top: 30px;margin-left: 370px;font-weight: 100;">{{$value->apply_name}}</h3>
<img style="height: 180px!important;margin-top: -5px;margin-left: 845px;" src="{{ URL::asset('public/certif_pro_image/'.$value->apply_photo) }}" />
<h3 style="margin-top: -148px;margin-left: 370px;font-weight: 100;">{{$value->apply_course}}</h3>
<h3 style="position:absolute;top:320px!important;margin-top:320px;margin-left: 450px;font-weight: 100;">{{$value->apply_softwares}}</h3>
<h3 style="position:absolute;top:175px!important;margin-top:175px;margin-left: 532px;font-weight: 100;">{{date('d-m-Y', strtotime($value->apply_start_date))}}</h3>
<h3 style="position:absolute;top:175px!important;margin-top:175px;margin-left: 670px;font-weight: 100;">{{date('d-m-Y', strtotime($value->apply_end_date))}}</h3>
<h3 style="position:absolute;top:189px!important;margin-top:189px;margin-left: 550px;font-weight: 100;">Grade {{$value->apply_grade}}</h3>
<h3 style="position:absolute;top:210px!important;margin-top:210px;margin-left: 440px;font-weight: 100;">{{$value->apply_centre}}</h3>
<img style="height: 80px!important;position:absolute;top:196px;margin-top:196px;margin-left: 220px;" src="{{ URL::asset('public/qrcode/'.$value->apply_qrcode) }}" />
<h5 style="position:absolute;top:545px;margin-left: 5px;font-weight: 100;">www.domain.in/certificate/{{$value->apply_certificate_id}}</h5>
#endforeach
</div>
<div style="page-break-after: always;"></div>
<div id="certbackground1">
</div>
</body>
The problem here is that the background image of pdf is too large in pdf. The size of background image is 3507 x 2480 with resolution 300. When I change the image size to 1058 x 748, it fits to pdf but the quality of pdf after print is too low.
How do we adjust the background image of pdf without losing clarity?
Dompdf, up through and including 0.8.4, does not support the background-size declaration (ref issue 463).
Since it looks like you want to contain the entirety of the image within the container you could try using a positioned image with a low z-index inside a relatively-positioned div. You would have to more precisely define the the positioning of the elements, but it should work for your example.
Here's a minimized demo that renders OK in Dompdf 0.8.4:
<div style="position: relative; border: 5px solid black; width: 450px; height: 375px; margin: auto;">
<img src="https://picsum.photos/200/150?grayscale" style="position: absolute; width: 450px; height: 375px; z-index: -1000;" />
<div style="position: absolute; top: 180px; width: 100%; text-align: center; color: white; line-height: 1.5"><span style="background-color: black; padding: .5em;">CONGRATULATIONS</span></div>
</div>
try this
<style type="text/css">
#certbackground
{
background-image: url('');
background-position: top left;
background-repeat: no-repeat;
background-size: 100%;
padding: 300px 100px 10px 100px;
width:100%;
height:100%;
}
#certbackground1
{
padding: 300px 100px 10px 100px;
width:300px;
height:500px;
}
</style>
</head>
<body>
<div id="certbackground">
#foreach ($data as $value)
<h3 style="margin-top: 142px;margin-left: 900px;font-weight: 100;">{{$value->apply_certificate_id}}</h3>
<h3 style="margin-top: 30px;margin-left: 370px;font-weight: 100;">{{$value->apply_name}}</h3>
<img style="height: 180px!important;margin-top: -5px;margin-left: 845px;" src="{{ URL::asset('public/certif_pro_image/'.$value->apply_photo) }}" />
<h3 style="margin-top: -148px;margin-left: 370px;font-weight: 100;">{{$value->apply_course}}</h3>
<h3 style="position:absolute;top:320px!important;margin-top:320px;margin-left: 450px;font-weight: 100;">{{$value->apply_softwares}}</h3>
<h3 style="position:absolute;top:175px!important;margin-top:175px;margin-left: 532px;font-weight: 100;">{{date('d-m-Y', strtotime($value->apply_start_date))}}</h3>
<h3 style="position:absolute;top:175px!important;margin-top:175px;margin-left: 670px;font-weight: 100;">{{date('d-m-Y', strtotime($value->apply_end_date))}}</h3>
<h3 style="position:absolute;top:189px!important;margin-top:189px;margin-left: 550px;font-weight: 100;">Grade {{$value->apply_grade}}</h3>
<h3 style="position:absolute;top:210px!important;margin-top:210px;margin-left: 440px;font-weight: 100;">{{$value->apply_centre}}</h3>
<img style="height: 80px!important;position:absolute;top:196px;margin-top:196px;margin-left: 220px;" src="{{ URL::asset('public/qrcode/'.$value->apply_qrcode) }}" />
<h5 style="position:absolute;top:545px;margin-left: 5px;font-weight: 100;">www.domain.in/certificate/{{$value->apply_certificate_id}}</h5>
#endforeach
</div>
<div style="page-break-after: always;"></div>
<img id="certbackground1" src="http://localhost/folder_name/public/cer_template/final-certificate-back.png" />
</div>
</body>
When I try to send an HTML email using the PHPMailer library, the received email shows incorrectly.
I have already tried with different mail clients (Gmail and Outlook), but they look very the same.
This is my current code
require_once 'includes/mail-denied.php'; // Here is specified the $message variable, containing the HTML and CSS (https://i.imgur.com/UG1B34V.png)
$keys = array('{{ server_name }}', '{{ player_name }}', '{{ reason_area }}', '{{ date }}');
$_POST['description'] = nl2br($_POST['description']);
$replace = array($servernam, $name, $_POST['description'], date("Y"));
$message = str_replace($keys, $replace, $message);
$mail_manager = new PHPMailer(true);
try {
$mail_manager->SMTPDebug = 2;
$mail_manager->setFrom('noreply#'.$_SERVER['HTTP_HOST'], $servernam);
$mail_manager->addAddress($mail);
$mail_manager->addReplyTo('noreply#'.$_SERVER['HTTP_HOST'], 'Do not reply');
$mail_manager->isHTML(true);
$mail_manager->Subject = "Staff Application System - ".$servernam;
$mail_manager->Body = $message;
$mail_manager->AltBody = 'Your application has been declined.';
$mail_manager->send();
} catch (Exception $e) {
echo "Message could not be sent. Mailer Error: {$mail_manager->ErrorInfo}";
I do receive the email, but part of the HTML looks just messed up.
Here's the HTML code:
<?php
$message = '
<div style="width: 500px;
height: 110px;
position: fixed;
background-color: #ff9999;
border-bottom: 1px solid #ff8080;
display: block;
border-top-left-radius: .5em;
border-top-right-radius: .5em;
color: #FFF;
text-align: center;
font-family: \'Product Sans\', Arial, sans-serif;">
<h2>Staff System Application</h2>
<h3>{{ server_name }}</h3>
</div>
<div style="width: 500px;
height: 600px;
background-color: #f2f2f2;
display: block;
padding-top: -10px;
z-index: 999;
border-radius: .5em;
font-family: \'Product Sans\', Arial, sans-serif;">
<div style="padding: 120px 15px 5px 15px;
color: #797979;
font-family: \'Product Sans\', Arial, sans-serif;">
<p>Dear {{ player_name }}...</p>
<p>After carefully considering your staff application the head staff have acquired a verdict.</p>
<p>We regret to inform you that your application has been:</p>
<p style="color: #C60000; font-size: 80px; text-align: center; margin-top: 10px;">DENIED</p>
<div style="margin-top: -55px; font-size: 15px;">
<p>You have been denied for the next reason(s):</p>
{{ reason_area }}
</div>
<br>
<br>
<p style="text-align: center; padding-bottom: -15px;">THIS IS AN AUTOMATED MESSAGE, DO NOT REPLY.</p>
</div>
</div>
<div style="margin-top: -10px;
width: 500px;
height: 90px;
position: fixed;
display: block;
background-color: #595959;
border-bottom-left-radius: .5em;
border-bottom-right-radius: .5em;
text-align: center;
font-family: \'Product Sans\', Arial, sans-serif;
color: #edeff2;">
<p style="font-size: 20px;">© {{ server_name }} - {{ date }}</p>
<p style="font-size: 9px;">© {{ date }} Carinae Studios. All rights reserved.</p>
</div>';
?>
This is how it should look like:
And this is how it looks when I receive the email:
I'm pretty new with HTML inside emails, I have no idea how this could be fixed.
Here are a few suggestions for what I've gathered from your information:
Like I said in the comments, use tables as much as possible.
Avoid classes and use inline styles. Add the font style to your td's as well as any html element inside of your td. Use the font or span tag instead of the p tag.
An example:
<td style="font-family:Arial; font-size:18px;">
<font style="font-family:Arial; font-size: 18px">Text here</font>
</td>
Don't use paddings and margins and floats, use heights and withds to create spacings. You can even use transparent images to create spacings:
<tr>
<td width="10" style="10px"></td> <!-- vertical spacing to create left/right margins -->
<td><img src="full-image.jpg" alt="your visible image here"></td>
<td width="10" style="10px"></td> <!-- vertical spacing to create left/right margins -->
</tr>
<!-- horizontal spacing to create top/bottom margins START -->
<tr height="50" style="height:50px;">
<td height="50" width="10" style="height: 50; width: 10px"></td>
<td height="50"><img height="50" style="height: 50px;" src="transparent.png" alt="this is a transparent image"></td>
<td height="50" width="10" style="height: 50; width: 10px"></td>
</tr>
<!-- horizontal spacing to create top/bottom margins END -->
<tr>
<td width="10" style="10px"></td> <!-- vertical spacing to create left/right margins -->
<td><img src="full-image.jpg" alt="your visible image here"></td>
<td width="10" style="10px"></td> <!-- vertical spacing to create left/right margins -->
</tr>
Other tips:
Avoid using css border-radius, use images instead
Use websafe fonts, use google to find which ones are websafe
Reference your images with CDN's
Litmus has free templates that you can use to base your code off of, they are guaranteed to work within any client/device.
I hope this helps. Let me know if you still have questions.
Be aware, Outlook uses Word for rendering emails. You can read more about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the following articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
I'm working with osCommerce for the first time. I inherited this code, and we'd like to tighten up the new_products page. This is the code for the display:
div class="contentText">
<div class="NewProductsList">
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr>
<td style="border-bottom:solid 1px #ccc;">
<div class="outer">
<div id="x">
<img src="images/swords-sandals.jpg" alt="Swords, Sandals and Sirens" title="Swords, Sandals and Sirens" width="120" height="180" />
<span class="name-font">
Swords, Sandals and Sirens
</span>
<span class="price-font">$19.00</span>
<br /><br />
Murder, conmen, elephants. Who knew ancient times could be such fun?
<br /><br />
Many of the stories feature Claudia Seferius, the
...read more
</div>
</div>
Then this is my stylesheet (css) code:
<style>
.price-font {
float: right;
color: #000000;
font-size: 18px;
}
.name-font {
font-size: 14px;
font-weight: bolder;
}
.outer {
padding: 10px;
}
#x {
display: inline-block;
}
#y {
width: 82%;
vertical-align: top;
display: inline-block;
}
.NewProductsList tr.alt td #x {
float: right;
}
.NewProductsList tr.alt td {
background-color: #ecf6fc;
}
Any help I could get for tightening up the text so that it's directly next to the image, rather than under it, would be greatly appreciated.
Thanks!
Try adding this to your CSS:
#x > a {
float: left;
}
JSFiddle: https://jsfiddle.net/suomyone/h2j013dx/
Basically, this targets the product link (and image, in this case) and floats it to the left. As a result, the product title and description moves up, right next to the image. You'll have to play around with the margins or paddings to achieve the desired spacing between the image and text.
Was this the effect you were looking to get?
Ps. Your HTML is missing some closing tags, specifically </td>, </tr>, </table>, and two </div> tags. I added these to the JSFiddle demo.
I have made few pages where all the files where tested on screen resolution 1366x768. But when i tested it on 1024x768 the menu & images overlap. Is there some solution to this ?
Please Help!
This is my homepage.php
<?php session_start();?>
<html>
<head><title>Welcome</title></head>
<style>
#heading{ text-align:right;font-size: 18px;float:right;margin:35px 20px;}
a:hover{ color:#BEBEBC; }
a{ color:black;}
#img{margin:10px 10px;}
.box {margin-left: auto;margin-right: auto;}
.wrapper {display: table-cell;vertical-align: middle;width: 2500px;height:450px;}
#rectangle {width: 300;height: 200;border-style: solid black;border-radius:5px;border-width:10px;border-color:black;}
img{opacity: 0.5;filter: alpha(opacity=40); /* For IE8 and earlier */}
img:hover {opacity: 1.0;filter: alpha(opacity=100); /* For IE8 and earlier */}
#copyright{text-align:center;color:black;}
ul{
padding: 0;
list-style: none;
}
ul li{
width: 100px;
display: inline-block;
position: relative;
text-align: center;
line-height: 21px;
}
li{
width: 100px;
display: inline-block;
position: relative;
text-align: center;
line-height: 21px;
//background: #1E90FF;
color:black;
}
ul li a{
display: block;
//padding: 5px 10px;
color: black;
//background: #B0D8FF;
text-decoration: none;
}
ul li a:hover{
color: white;
//background: #939393;
}
ul li ul{
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
</style>
<body background="a6.jpg">
<img id="img" src="LOGO.jpg" width="150px" height="100px">
<h1 align="center" style="position:absolute;top:30px; left:400px;">MEETING ROOM APPLICATION</h1>
<div id="heading"><ul>
<li>Home</li>
<li><?php echo ucwords($_SESSION['usr_name']); ?> ▾
<ul>
<li>Change Password</li>
<li>Logout</li>
</ul>
</li>
<li>Help</li>
</ul></div>
<br><br>
<hr width="100%">
<table border="1" width="100%" style="border:black;">
<tr><th align="center" colspan="8" style="border-radius: 5px;border-style: solid;">No. of Booking for Present Day</th></tr>
<tr><td align="center" style="border-radius: 5px;border-style: solid;">3-Seater</td><td align="center" style="border-radius: 5px;border-style: solid;"><?php include('count.php'); ?></td>
<td style="border-radius: 5px;border-style: solid;" align="center">5-Seater</td><td align="center" style="border-radius: 5px;border-style: solid;"><?php include('count.php'); ?></td>
<td style="border-radius: 5px;border-style: solid;" align="center" align="center">8-Seater</td>
<td align="center" style="border-radius: 5px;border-style: solid;"><?php include('count.php'); ?></td>
<td style="border-radius: 5px;border-style: solid;" align="center">16-Seater</td>
<td align="center" style="border-radius: 5px;border-style: solid;"><?php include('count.php'); ?></td> </tr>
</table>
<div class="wrapper">
<table class="box">
<tr>
<td align="center"> <img src="#" id="rectangle" width="330" height="250" style="border: 10px solid white;border-radius:10px;"><h2 align="center">3-Seater</h2><p align="center">This is a 3-Seater room.</font></p></td>
<td align="center"> <img src="#" id="rectangle" width="330" height="250" alt="5-Seater" style="border: 10px solid white;border-radius:10px;"><h2 align="center">5-Seater</h2><p align="center">This is a 5-Seater room.</font></p></td>
<td align="center"> <img src="#" id="rectangle" width="330" height="250" alt="8-Seater" style="border: 10px solid white;border-radius:10px;"><h2 align="center">8-Seater</h2><p align="center"><This is a 8-Seater room.</font></p></td>
<td align="center"> <img src="#" id="rectangle" width="330" height="250" alt="16-Seater" style="border: 10px solid white;border-radius:10px;"><h2 align="center">16-Seater</h2><p align="center">This is a 16-Seater room.</font></p></td>
</tr>
</table>
</div>
</body>
</html>
With the code provided above you will find that the rendering of the site will differ dependent on the screen size. For example when using an iPad or iPhone you will have issues having to scroll round the page.
The only way to counter this is to use responsive design which effectively uses percetages to calculate the desired width.
For example we have two elements on a page side by side, rather than say each element is 500px wide (as this would require scrolling on a screen smaller than 1000px, we can say that each element has a width of 50%, this way regardless of the screen size, the elements sizes according to the device.
Responsive design is really the way forward and you will not be able to solve your issue without following this path. Responsive design is becoming the standard more and more and you may as well learn sooner rather than later or risk being left in the dust.
I would suggest reading the following and should you still struggle, create a new question targeted towards responsive design.
http://blog.froont.com/9-basic-principles-of-responsive-web-design/
http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
http://learn.shayhowe.com/advanced-html-css/responsive-web-design/
You may also find that integrating a pre-existing responsive template may be the quickest solution, see the following:
http://www.responsivegridsystem.com/
http://getbootstrap.com/css/
Hope this helps.