I am trying to pull images from a database into an html table as a php variable:
<img src=img/$image&w=100&h=150>
the image does not show, but everything else in the table pertaining to the product shows
If I change the code adding a space after the variable:
<img src=img/$image &w=100&h=150>
The images show but they are very large.
How do I get $image to show at w=100 and h=150 within the table?
Thanks!!
OK I figured it out:
CODE:
<img src='img/$image' class='scale-down' style='width:100px;height:150px'>
CSS:
.scale-down {
object-fit: scale-down;
}
If the code below doesn't work for some reason, be sure you linked your CSS file.
CODE:
<img src='img/$image' class='scale-down'> <!-- Removed style attribute --!>
CSS:
.scale-down {
width:100px;
height:150px;
}
Another interesting point is if you want to you the object-fit then you can. Meaning you would have the images contained by the size of the elements you are putting them in. Therefore, you should be defining the width & height of the element that contains the images and then you can do as you did:
In this example I wrote td but I don't know what element contains your images so be sure to change it, if it is different.
td {
width:100px;
height:150px;
}
.scale-down {
object-fit: scale-down;
}
If your aim is to learn web-development then you should also be thinking about the client as kerbholz rightly points out:
Probably. Scaling down an image via CSS/style isn't a performant solution though, clients would still need to transfer for example a 1920x1080 image only to scale it down to 100x150. Anyway. – kerbholz
Please be aware that many questions about web development have already been answered here and on the web. Good luck!
The following are links to CSS, these websites have a lot more than just CSS.
MDN is really useful if you want to know more:
https://developer.mozilla.org/en-US/docs/Glossary/CSS
W3 is also useful but they don't always do as good of a job:
https://www.w3schools.com/w3css/
Hi so I added a video into the front-page.php code using the following code:
<div style="text-align: center" id="video">
<iframe width="867" height="488" src="https://www.youtube.com/embed/6c7Fx2PR9Dk" ></iframe></div>
(sorry for some reason the code editor is not working)
however when I try to change the width and height in the mobile mode using #video, it does not change. any help is appreciated!
EDIT: I added a class=container and changed the width to 100% and height to auto. This worked a little better but now the height of the container needs to be bigger. I cannot seem to find where to add the code to edit it.
I cannot see your code but I am sure it would be way easier to achieve this using CSS and media queries. Assuming your video player is configured to take 100% of the width of the container it sits in.
Actually you have to use the following cass to make it full width
#video iframe {
width:100%!important
}
Fitfids.js is really nice plugin to make the iframe, video embeds responsive. You may try to use that for your ultimate video responsive solution.
I am building a blogging website and I am facing troubles when I try to upload a photo. I need the photo to be pasted in the webpage. I know that javascript can do that, but it only affects the current session of the webpage. I need to permanently embed that image into the webpage as a child of this div element, for example:
<div id="img-wrapper"></div>
Everything is OK with PHP file uploads. How can I do that with PHP?
I assume its not an advisable solution as it increases the page size, but you can do this in the following manner:-
Some examples:
HTML:
<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />
CSS:
div.image {
width:100px;
height:100px;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
Here is a sample code
https://jsfiddle.net/casiano/xadvz/
For an online image to base 64 encode Click here
I am building my own website using Wordpress. When I was using a PNG picture(140*82 px) instead of the default "site-title" as my site logo, I got a really strange result. The picture is presented nicely, but there is a black line just under the picture. I have checked my "header.php" and "style.css" file, nothing wrong there. I also used Chrome "Inspector" to check the logo, it said: img 140*83( natural 140*82 ).
So, where does this line come from? Thanks, guys!
Here is my logo section in "header.php":
<<?php echo $heading_tag; ?> id="site-title">
<span>
<img src="http://118.228.173.234/wp-content/uploads/logo.png" width = "140" height = "82">
</span>
</<?php echo $heading_tag; ?>>
It's gotta be CSS related then. Check if you have reference to span in your CSS and locate the black #000 or #000000. Hard to tell without seeing more code at this point. Check for #site-title in CSS also.
this question seems an evergreen on TCPDF...
I have an issue that's driving me crazy.
I have an html code that I use as "template" for my PDF, here I have my company logo.
Everything works fine on localhost (Windows), but when I move online, the image is not shown.
Pay attention: I don't get any error (ie the Unable to get image error) on my PDF the image is simple blank!
Infact if I click on the PDF on the position where the images it's supposed to be, I can select it, and Adobe enables the option "Copy image".
Obviously the image exists, is here, and permission are correct.
If I try to surf there, or view the generated HTML page, everything is fine.
This is the PHP code:
$pdf->SetMargins($params->get('pdfMarginLeft', 15), $params->get('pdfMarginTop', 27), $params->get('pdfMarginRight', 15));
$pdf->SetHeaderMargin(PDF_MARGIN_HEADER);
$pdf->SetFooterMargin(PDF_MARGIN_FOOTER);
$pdf->SetAutoPageBreak(TRUE, PDF_MARGIN_BOTTOM);
$pdf->setImageScale(PDF_IMAGE_SCALE_RATIO);
$pdf->SetFont('helvetica', '', 8);
$pdf->AddPage();
$pdf->writeHTML($html, true, false, true, false, '');
$pdf->lastPage();
Then this is my HTML code (I just skipped everything except the image):
<img alt="logo black" src="../images/logo_black.png" height="60" width="210" />
I've tried with the url (relative and absolute) and with the path (relative and absolute), the problem still occurs.
Any ideas?
This wasn't your problem, but it's a possible solution for people with a similar issue in the future. Please make sure the HTML attributes have double quotes.
$html = "<img src='...' />"; // This will not work
$html = '<img src="..." />'; // This will work
As things are working locally so you may try changing the image type from png to jpg and check after modifying your code accordingly and uploading the jpg on the server.
You can convert image type "jpg/png" to base64.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA...."/>
this may help you !
In my case, I tried every solution above to no avail. It turned out I was missing width and height attributes. Adding those in, and using a root path ended up working for me:
<img src="/images/image.png" width="50" height="50"/>
In my case IMG tag not working until I write full path to file
Not working
<img src="/pdfrender/XXX.jpg" width="50" height="50">
Working (localhost example)
<img src="http://site.local/pdfrender/XXX.jpg" width="50" height="50">
It is also posible add image data inline as base64:
<img src="#Base64encodedImageFile" />
I implemented a str_replace for the image src, and that works ok now.
$html = str_replace("../images", $_SERVER["DOCUMENT_ROOT"] . '/images', $html);
I had to 'resave' the images:
$image = 'images/logo_example.png';
imagepng(imagecreatefrompng($image),$image);
Then it worked.
Not really an answer but as everybody is trying to add a "brick" here is a very strange detail I'm facing:
I have small "strips" of HTML that I put, one after other on a page. If I put the first one, which has 2 png and a small text, on the file, the png are visibles on the PDF.
If I put the second one, which has 2 png and a small text, on the file, the png are visible on the PDF.
Now, if I put the two, ONLY the first one as the images. The second one as blank picture. If I change the picture of the second strip, images became visible.
Detail: 1st and 2nd strips are using the same images!
Notice this seems to happened ONLY with PNG image. So it seems there is a bug and you can't have two time the same PNG image on a page. Using JPG solve the problem.
I had the same problem, locally it was working and on server blank image. I found out that htaccess password was the problem. I've put .htaccess file with the row Satisfy any to the folder with pictures and now it is working.