I am trying to display 3 images in a row using TCPDF from my PHP script. This is what I do:
I create some HTML which contains the img.
I am using TCPDFs writeHTML function to write the HTML to a file.
When I check the created file, the images are not next to each other, each one is a bit below the previous. It looks like stairs.
To see whats going on I debugged the script and copied the HTML string I give as param to the writeHTML function into a HTML file and opened it in a browser. It looks exactly the way I want in a browser. ONly the created PDF seems to be messed up.
This is the HTML:
<table>
<tbody>
<tr>
<td width="100">
<img width="75" height="75" style="float: left;" src="...">
</td>
<td width="200">
<h2> FOOBAR </h2>
<p>
<!--Those 3 are the problem -->
<img width="30" src="...">
<img width="30" src="...">
<img width="30" src="...">
</p>
</td>
</tr>
</tbody>
</table>
I am calling TCPDF like this:
$pdf->writeHTML($myHtmlFromAboveInAString, true, false, true, false, '');
Any ideas what might be wrong? I tried removing the p, doesnt change a thing.
Thanks!
NOTE: I just found the answer myself! Each image has to be in another tables column, like showh here: TCPDF: Writing multiple images after eachother using writeHTML renders images in a "staircase" shape instead of in a straight line
Related
I want to open an image in a new tab using a hyperlink. This image came from a database. I have tried this code
<td><img src='upload/<?=$row['misper_rep_pic']?>' height='50' width='50'></td>
but the image doesn't show when I use a hyperlink. So how can I use a hyperlink here so that I see the image too.
You question is a bit confusing.
Do you mean like this?
<td>
<a href='upload/<?=$row['misper_rep_pic']?>' target='_blank'>
<img src='upload/<?=$row['misper_rep_pic']?>' height='50' width='50'>
</a>
</td>
On my site: www.metallica-gr.net you can see that the main table has 3 columns.
1st column(left): Vertical image
2nd column(middle): Main content
3d column(right): Vertical image
Problem is, because the right image is on the bottom of the code(since it's the tables last column) it waits for main conent to load before appearing. So before the site loads it looks messy, since only one border of the layout appears.
I can't use the divs for this since I have a lot html pages made already, and also when I tried it didn' went good. Is there any way to fix this? Here's the code:
index.html:
<table border="0" cellspacing="0" cellpadding="0" id="main" align="center">
<tr>
<td width="2" valign="top"><?php include "vertical.php"?></td>
<td valign="top" style="vertical-align:top;">
<div><?php include "main.html"?></div></td>
<td width="2" valign="top"><?php include "vertical.php"?></td>
</tr>
</table>
vertical.php:
<div style="background-image:url(images/vertical.jpg); width:2px; height:100%; background-repeat:repeat-y; vertical-align:top; position:fixed; top:0;"></div>
While I would recommend exploring a more modern HTML structure (like the use of divs), I understand that sometimes a complete restructuring is not viable.
I believe the PHP output buffer may offer an interim solution.
<?php ob_start(); ?>
<table border="0" cellspacing="0" cellpadding="0" id="main" align="center">
<tr>
<td width="2" valign="top"><?php include "vertical.php" ?></td>
<td valign="top" style="vertical-align:top;">
<div><?php include "main.html" ?></div>
</td>
<td width="2" valign="top"><?php include "vertical.php" ?></td>
</tr>
</table>
<?php ob_end_flush(); ?>
What this will do is hold the page response until all the includes have been processed. You should also be aware that while this may cause less "shuffling" on the page it could also increase the perceived load time.
See the PHP Manual's documentation on ob_start for more information: http://www.php.net/manual/en/function.ob-start.php
While the above should take care of any issue caused by PHP includes it looks like you may have a few other likely culprits. The most likely being that you have tags loading from an "src". Script tags will delay all other loading while they're being loaded and processed which is why it is recommended that they be added asynchronously if possible. If they cannot be loaded asynchronously they should be included within the or directly above the closing tag.
For a little more information on your script issue see:
Does the <script> tag position in HTML affects performance of the webpage?
While sifting through the HTML I also spotted quite a few validation errors that should probably be resolved:
http://validator.w3.org/check?uri=http%3A%2F%2Fmetallica-gr.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Even a table based layout should validate as it makes browser rendering more predictable and bug hunting easier.
I think you should replace the table structure with div structure because that's the draw back of table structure that it'll load each TR / TD line by line while in DIV structure we make different divisions that's why browser will load different divisions simultaneously and that's why now a days designers are prefer DIV structure.
In your case it's starting to load from first TD and end with the last TD one by one so I think DIV structure is the solution for your problem.
For example my site is mysite.com. Here is source of this site:
<html>
<head>
<title>site</title>
//here is many javascript and css codes
</head>
<body>
<div>
<table border="1">
<tr>
<td><a href="somthing.html">Here is a text</td>
<td><img src="image.gif" alt="this is image"/></td>
</tr>
</table>
</div>
</body>
</html>
How can I using php get only text and image without all tags(javascript codes, links, tables and other)?
I want get only "here is a text" and "image.gif".
Use PHP cURL if the file is on the internet else you can use the file_get_contents() function if the file on the local machine.
To get rid of the extra tags you can use the code:
$contents - file_get_contents('file.html');
$contents = strip_tags( $contents, '<img>' ); //other than <img> you can specify more tags also
Alternatively you can use the DOM approach also.
Dreamweaver is generally pretty easy to image map in but I can't seem to get the crosshairs for the image mapping tool to work. I have version CS5.5.
<html>
<head>
<div id="top-header">
<div align="center">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" margin="20">
<tr>
<div id="top-image"><img src="pics/TopHeader.jpg"></div>
<tr>
<div id="nav-bar"><img src="pics/NavBar.jpg" name="NavBar" border="0" usemap="#NavBarMap" id="NavBar"></div>
</div>
</div>
</div>
</table>
</head>
</html>
Basically I'm trying to just click on the NavBar.jpg file in the design window, get the rectangle mapping cursor and just start making the map. For further clarity, this is a header.inc.php file that I'm using to include in all the pages on the site. Every time I go to click on the image it highlights the table code on the split screen.
Can you not image map within a table? I'm using the table for alignment purposes so I'd like to keep it in there if possible. Thanks.
I'm not exactly sure what you are shooting for in your navigation, but you can do the whole thing with CSS in a multitude of different ways. It will be easier to create, and easier to change later on if you find that you need to.
If you haven't created navigation in css before, this list will help you cover a lot of ground: http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php
EDIT:
This site also has some excellent tutorials to clear up any confusion: http://net.tutsplus.com/?s=css+navigation
I have a string that contains text and some html elements. I want to find the img elements that have the class size-thumbnail and add some html around it.
For example, From:
<img class="size-thumbnail wp-image-279 alignleft" title="fellaisworkinghard" src="workinghard-150x150.png" alt="" height="150" width="150">
To:
<div style="width:150px;" class="article-image">
<img class="size-thumbnail wp-image-279 alignleft" title="fellaisworkinghard" src="workinghard-150x150.png" alt="" height="150" width="150">
<span style="width:150px;" class="article-image-content">BLABLA</span>
</div>
The widths on the div and span elements are taken from the width of the image.
Whats the best way of doing this, and how?
I thought of using regex to get the height but I don't know how to add everything else on the right position.
You can use http://www.php.net/manual/en/class.domelement.php DOM Element for finding and manipulating HTML.
Also im using and recommending http://framework.zend.com/manual/en/zend.dom.query.html Zend_Dom_Query for finding and manipulating html. It works perfectly.
(If you want to make this manipulation on same page you need to buffer, manipulate and flush it to browser.)
You could always throw jQuery at it. Have your theme enqueue jquery, and add this to your header.
jQuery(document).ready( function () {
jQuery(".size-thumbnail").wrap("<div style='width:150px;' class='article-image'/>");
jQuery(".size-thumbnail").after("<span style='width:150px;' " +
"class='article-image-content'>BLABLA</span>");
});
Not the most elegant solution, but it would have the desired outcome...