I have an applicaton written in PHP that retrieves files from mongoDB Grid collection, and allows a user to view/download them based on if they're an image or not.
It's all working fine, except that the title bar of the browser displays the name of the php file I'm running the script in, rather than the filename of the image that's displayed. for example:
myphpfile (JPEG 1024 X 768 pixels)
I'm not sure if it's possible, but I'd like to change it if it is. If I right-click and select save as I get the correct image name, as user header() I've set:
content-disposition: inline; filename="thefilename"
I've also tried setting name with the content-type with no success.
Thanks for any help.
The only possible way is not to open image directly in the browser's window, but a simple HTML code like this:
<html>
<head>
<title>
Put your title here
</title>
</head>
<body>
<img src='your_script_generating_images.php?parameters'>
</body>
</html>
But did you think about some fancy and nice solutions like http://highslide.com/ or http://fancybox.net/? All that you need is to set the links to your script generating images and to update the page title correspondingly (which is not even required as you can write information you want just above the image in popup).
Related
This is the minimum code in order to demonstrate the effect.
https://replit.com/#computinginschools/imageload#index.php
This is a simple php file which loads image using an external script, image.php, and displays them on the page. The reason I have done this on my live site is because the images are stored outside the www folder and I need the image.php script to access them. To make it easier I have just put everything under the webroot.
In this example, all the images are located in a folder called images next to index.php.
<html>
<head>
<title>Image Load</title>
</head>
<body>
<?php
$images = glob('images/*.png');
foreach($images as $image){
echo('<img src="image.php?i='.urlencode($image).'" loading="lazy">');
}
?>
</body>
</html>
This is the image.php file which loads the images.
<?php
$path = urldecode($_GET['i']);
if (file_exists($path)) {
$extension = pathinfo($path)['extension'];
header('Content-type:'.$extension);
header('Cache-control:public, max-age=604800');
header('Accept-ranges:bytes');
header('Content-length:'.filesize($path));
header('Last-Modified: '.date(DATE_RFC2822, filemtime($path)));
header_remove('pragma');
echo(file_get_contents($path));
}
else {
echo("File not found: ".$file);
}
?>
The script works fine to display the images however, the loading is often prolonged with all the images loading in a 'wave' as the image.php file renders them on the screen after index.php has loaded. The REPL is fast so this is not really noticeable, however, on my production site, this effect is quite pronounced.
I would like to know if there is a way of delaying the loading of the images in index.php until all the images rendered by images.php have loaded. My intention is to set the display attribute of the images to none by default and then, when the index.php document has loaded, apply an appear animation to all the images on the page to make them fade into view.
It would be even better if I could embed some kind of loading animation in the container for each image.
Please help?
This can't really be done in PHP; the slowdown is from the browser going through the HTML and loading all of the images. If you would like to hide the page until everything is loaded, then you can set the HTML body to display: none, and the use JavaScript to remove that once all of the images are loaded. This has to be done from JavaScript because there isn't really any way to check on the browser's status from PHP.
If you must do this from PHP, then you can have all of the images inline using base64 encoding, although this is just about the least efficient way of serving images, and will probably cause major slowdowns. The format to do so is like this:
<img src="data:image/jpeg;base64,<?php echo base64_encode(file_get_contents($image)); ?>">
In my project I have a text editor and has a Image upload specification it will upload the picture according to $_SESSION['imageID'] and $_SESSION['userID'] and when it is done it will show that picture in my editor iframe.
Note: For uploading pictures I used popup window and another php file like uploader.php.
Every ting is working well until I try the add preview section for my text editor. Then one by one I checked my preview codes and I found the problem. It's just #, in img tag src="#". It's causes different value $_SESSION['imageID'] in my uploader.php than texteditor.php.
Simply which causes this problem codes like this:
texteditor.php
<?php
session_start();
include 'function.php';
$_SESSION['imageID']=rast();
echo "Image ID :".$_SESSION['imageID'];?>
<img class="preview_image" src="#"/>
upload.php
<?php
session_start();
echo "Image ID :".$_SESSION['imageID'];
?>
For Example output like this:
From texteditor.php
Image ID :vKF8Ro6hI2VpyYX
From upload.php
Image ID :O5cg7Ro0vo882FP
Note:rast(); gives me random 15 charters from a to z, A to Z, 0 to 9 and date.
Question is Why my $_SESSION['imageID'] is causes different value in my uploader.php than texteditor.php when I use "#" this in img tag like < img src="#"/> that?
After a bit of fiddling around i finally figured it out.
When you set the image's source to be #, the browser converts that to http://www.somesite.com/texteditor.php#
This is so that if you wrote #content, the browser would scroll to the element with the id content
After the browser has converted the src tag, it tries to load the page http://www.somesite.com/texteditor.php#, because it thinks it will receive an image.
Therefore your browser loads the page twice, and your rast() function is called twice.
My pdf file is open in browser tab. In the title of pdf tab instead of name it shows the url how can i changed it .I am using codeigniter framework and using Mpdf library for pdf.
Your PDF document should have Title metadata set. Afterwards, browser will use it for rendering tab title.
http://www.w3.org/TR/WCAG20-TECHS/PDF18.html
In Acrobat Pro, open the PDF and select File -> Properties -> Description and then edit the meta data title (and others if required) as you see fit.
We only saw the title being displayed like this in Firefox.
Put it in a div inside a page and change the page title like this:
<head>
<title>YOUR TAB TITLE</title>
</head>
and then:
<div>
<object data="test.pdf" type="application/pdf"
width="300" height="200">
alt : test.pdf
</object>
</div>
You can also set the object width and height to match the page.
Reference
For changing PDF tab title in browser, you need to update "title" in property.
If you have PDF editor you can do it easily. Else it is not editable.
You can use any of the tool online to edit the title.
I did it using below link.
https://www.sejda.com/edit-pdf-metadata
Try this. It's so simple.
$mpdf->SetTitle('My Title');
I build web application to manage spare parts for client,it comes with manual book as standard their part-id. I checked its part-id are unique numbers. Storing records using MYSQL v5.5.16 and web interface using PHP v5.3.8.
As client requirement, they want to have spare parts image to be listed in folder. Basically, when user inputting record and upload a image, i renamed the image based on part-id stored into database and copied an uploaded image to folder.
Yes, it work well when user displaying images (part-id: 241203, 299301 ... etc). When part-id come with 1/8S40003, as you know image name couldn't consist with some characters (/ \ : * ? " < > |).
I also put <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> between <head> tags and header('Content-type: text/html; charset=utf-8'); on the top of page.
I simplified, just encode '/' sign to html decimal code -> /.Storing image name into database seem work well, uploading image work 100%, i also checking image manually inside folder,
but when displaying image with
<img src='../Images/Spare parts/1/8S40003.png' />
Web browser automatically decoded it into path directory ('/'), but i checked a tag on 'view source', it written with <img src='../Images/Spare parts/1/8S40003.png' />.
Even using htmlentities, html_entity_decode, htmlspecialchar, htmlspecialchars_decode doesn't work and make it worse to convert '&' sign into &
I found another way, by using urlencode from php, by convert '/' -> %2F and append the rest of number.
<img src='../Images/Spare parts/1%2F8S40003.png' />
I checked a tag on 'view source', it written similar with above but it doesn't give an solution.
Anyone, who ever had experienced with this problem before or ideas would be appreciated ! Thank you.
As chirag indicated with his reply, the problem is that the file system does not accept some characters like / as well. So you probably stored the images with / in the file name.
So to use that messed up image name in the url, you need to use: urlencode(str_replace('/','/',$id)).
It probably would be better if you came up with a more solid scheme of generating file names from part ids, for example by applying rawurlencode to the file name. this would result in applying url encoding twice when refering to the image in html links, but it be solid: urlencode(rawurlencode($id))
After using the PHP QrCode lib I discovered that for some reason when using a dynamic page with scripts and dialog boxes (JQuery) that when trying to output a QR code in a .png format I get weird symbols instead of the actual generated .png file.
Heres what I have tried:
Created a seperate file with just:
<?php
//include only that one, rest required files will be included from it
include "phpqrcode/qrlib.php";
QRcode::png('barrda554');
?>
Works great,
Attempt 2:
File opened within a dialog box type using JQuery UI:
<?php
header stuff...
include "phpqrcode/qrlib.php";
...
?>
<html>
...
<?php
QRcode::png('barrda554');
?>
..
</html>
In this attempt I get multiple funky symbols for some reason:
�PNG IHDRWWKK/PLTE���U��~�IDAT8��ѱ � P# �c��n :V�L�#�k
y��)�|F��5`ڸzHF|l���
%Z"e�Ы�D{\�ގ����p`�f�eh�������k�[BJeJ�c����,�^�gu�m|Q��o��W����g�
�#�s�<�y��k�m��!v�.��(+�u���$s�-�n$߫>�gR�`IEND�B`�
This has stumped me and I am unsure on how I should approach this to fix it.
Let me know your ideas,
David
UPDATE:
After putting header('Content-Type: image/png'); within the file that JQuery opens, no cigar.
Here is the actual file:
http://jsfiddle.net/T4nEP/
The problem is here:
<html>
<?php
QRcode::png('barrda554');
?>
</html>
To understand what this is doing, imagine that you open a regular PNG file in a text editor, and just copy/paste the contents directly into your HTML file. It's not going to show an image - it'll just be garbage, like you're seeing.
To include an image in an HTML file, you need to use the <img> tag, and point to the URL of the image. In this case, the URL of the image would be a PHP script that outputs nothing except the PNG contents - like this:
<img src="qrcode.php">
And then in qrcode.php, generate the image:
<?php
include "phpqrcode/qrlib.php";
QRcode::png('barrda554');
?>
If you need some information from the HTML page in order to generate the image, you can include it as query parameters in the URL, like this:
<img src="qrcode.php?product=1&format=2">
And then get those values in your PHP like this:
<?php
include "phpqrcode/qrlib.php";
$product = $_GET['product'];
$format = $_GET['format']
// ...
// whatever you need to do to generate the proper code
// ...
QRcode::png('barrda554');
?>
And finally - there are ways to include the image data directly into the HTML page, but it's not supported by all browsers, and is not recommended because it makes the page size much larger and prevents the browser from being able to cache the image separately.
You can see more about base64 data URLs here and here.
Make sure you have the following php code to generate the correct Content-Type header so the browser knows how to render the data its receiving.
header("Content-Type: image/png");