how to display image from upload directory on show.php page - html

Images are stored in the folder name upload in my website directory.
can anybody tell me how will i display it in another page name show.php
This question might be very basic level but I am very new to php.

Scan the directory for all image names and then output the image tag with the src set to the path for the image.

<img src="/upload/name-of-image-file-here" />
assuming the upload directory is web-accessible and whatnot. If not, then you'll need to do a script to handle the output of the image, of which there are plenty of sample questions/answers on this site.

You want to use PHP to scan the directory with the images in it and then generate HTML to show them.
You might want to look into the Directory Iterator object. You can use that to loop through the images and then generate the HTML as needed.
For getting files, you might want to use the following code (based on this PHP Documentation sample):
<?php
$iterator = new DirectoryIterator(dirname(__FILE__));
foreach ($iterator as $fileinfo) {
if ($fileinfo->isFile()) {
//Add filetype check here and then echo the HTML
echo $fileinfo->getFilename();
}
}
?>

Related

What is the correct way to express a path in order to get Pelican generated html to link to an image?

I'm just starting to create a blog with Pelican and wanted to link to an image. I did this by including the following line in my Markdown file:
<img src="./myImg1a.png" alt="./myImg.png" style="width: 750px; height: 800px;"/>
This line was successfully reproduced in the html file, which Pelican placed in the output directory (i.e. /myBlog/output). I placed the png files in the output directory (i.e. the same directory as the html files and got the following error:
WARNING:root:Unable to find file /category/myImg1a.png/index.html or variations.
where /category refers to myBlog/output/category. When I, instead, used the following html code:
<img src="/myImg1a.png" alt="/myImg.png" style="width: 750px; height: 800px;"/>
everything worked fine. I don't understand why this should be:
If the image file is in the same directory as the html file, shouldn't "./myImg1.png" be correct and "/myImg.png" be incorrect?
Why was the folder /category/myImg1a.png/index.html being sought at all?
First of all, by design, you should not change the contents of the output directly/manually.
You should put all your static contents in separate directory which is usually named as images or paths. And, then configure the path(s) in pelicanconf.py as:
# ...
PATH = 'content'
STATIC_PATHS = ['images', 'files'] # add any no. of locations
# ...
In that case, when Pelican is building actual page, it will look for any referenced static file in ./content/images and ./content/files locations. If cannot find there, it will emit the error message.
Now, answering to your trouble ...
By,
... src="./myImg1a.png" ...
Pelican look for this myImg1a.png file in your myBlog/content/ folder as you are mentioning ./ which is the root folder for Pelican is working on.
But, when you are referring it as
... src="/myImg1a.png" ...
Pelican eventually finds it in the html file's directory. By getting / as location, Pelican is looking for it in the same directory of your myblog/my-blog-post/index.html which is myblog/my-blog-post/.
Hence, working. But not in the ideal way.
For a deeper understanding, please take a look into Pelican's documentation on this matter.
Why was the folder /category/myImg1a.png/index.html being sought at all?
Pelican, here, just trying to be smart.

HTML/ display images in a HTML page

I created a HTML page.
Now, I try to display all the pictures that are in a specific folder (/folder1) in this HTML page (Note: I don't know the names of these images).
I try to create a loop, which read all this images, and display it in this HTML.
There is an easy way to do that?
You are looking for something which HTML cannot do. You are going to need some sort of backend language, whether that be Rails, PHP, Python, or something else doesn't really matter.
HTML is and always will be only a Markup Language.
Here is a similar post which has code that might help you:
How To Display All Images in Folder
With php you can use function scandir() to retrieve all the files in a directory, and save them as an array.
Then iterate over that array and display any image with something like:
echo '<img src="path/to/folder1/'$files_array[i]'">
where $files_array contains the names of every image file in that directory.
if your images are stored in a server you can read the directory and get the image name them send to the font end.
if you are work in a local file system such as
/dir/index.html
/dir/images/
/dir/images/xxx.png
/dir/images/aaa.png
/dir/images/other image.png
you can rename all images in batch to 1.png 2.png 3.png ...and so on then use javascript in html to
generate the image
var body = document.getElementsByTagName("body")[0];
for (var i = 0; i < 100; ++i) {
var img = document.createElement("img");
img.src = "images/" + i + ".png";
body.appendChild(img);
}

How to access image files outside project folder in html?

I put the user uploaded image files on separate disk partition on my local dev server(OS windows) which is outside of project folder. I need to access those image files in html pages of web app.
I tried out giving paths like: http://localhost:8080/C://tmp/thumbnails/pl_2001.JPEG but no help. Image is not fetched. How to properly access such files in html pages ?
You will have to use rewrites for this so you don't display sensitive folder names.
if you are using php you can use .htaccess rewrites for a slug something like images/someimage.mime and split/get what's after images/ and have a php function that takes the filename and makes sure it exists and if you want you can check if its a valid mime then send a header to say its a image/somemime so the browser can display the image instead of gibberish it will display without it.
$filename = "C://tmp/" . $file;
if(file_exists($filename)){
$img = getimagesize($filename);
if(in_array($img['mime'], array('jpg','jpeg','gif','png','etc'))){
header("Content-type: image/" . $img['mime']);
readfile($filename);
}else{
//default image
}
}else{
//default image
}
I haven't tested this but it should give you a idea on getting you started. If this isn't the language you are looking for try searching for something similar for your language you are using.

How to find image path in mediawiki?

I would like find the exact URL for an image in mediawiki to send in my pinterest code.
To find the page URL I use urlencode($wgTitle->getFullURL()) but I can't figure out what code to use for image and image description.
Thanks
To get the filepath in a wiki page, you can use [[Special:Filepath]], the {{filepath:...}} parser function or a link to the Media namespace.
To get it programmatically with PHP, you might want to have a look at How does MediaWiki calculate the file path to an image? or the code of the filepath function:
$file = wfFindFile( $filename );
$url = $file->getFullUrl();
(getFullUrl() method in the File class)
For your use case you might also have a look at the Extension:AddThis, they plan to support Pinterest too.
$f = wfFindFile( 'Foo.jpg' );
$imageUrl = $f->getCanonicalUrl(); // http://mywiki.com/images/0/06/Foo.jpg
$descriptionPage = $f->getTitle()->getFullUrl(); // http://mywiki.com/wiki/File.jpg
See the File class and Title class docs for details.
You can link to the page /wiki/Special:Filepath/File_name or /wiki/Special:Redirect/file/File_name, that will redirect the request to the full image location, for example: https://en.wikipedia.org/wiki/Special:Filepath/Turtle.jpg redirects to the full image path https://upload.wikimedia.org/wikipedia/commons/6/60/Turtle.jpg

Embedd Images from MongoDB gridFS into my HTML-Page

I saved some files via MongoDBs gridFS into my database.
I know how to retrieve files just with php in my browser:
header('Content-type: '.$object->file['filetype']);
echo $object->getBytes();
That works perfectly fine. But I now wan't to put the image in a context.
e.g.
<img><?php echo $object->getBytes(); ?></img>
If I put the code
echo $object->getBytes();
in a htmlpage, I just get the image like this:
����JFIFHH��C !"$"$��C���Y"�� ��O!"12AQaq�BR��#b��3Cr��$S����4���%cs�5&��DT�������&!1A"Q2q�#Ba��?�( �#�EUDDUU�#��(�?2� ��.h#k���.��d�M���(��=�]��Nk��E�gZz�GI�Вr���~+x������<{YZSm�n�N I�DAmDU������G���U:���H�6J̺'!lV�������D:H2��S��7��U;����7����������n��wV$�ʞ�i|��wP����?Qx۾�/�K'�:=���i�E�0)�E��4OU�G�W��`t] �������.�j��='�/�:9�V����봺a_}2����a_�D��J[r�J���f�6�B<���ѿc���=8�Q��1!("��B���⅝4<#��L���K�Iy�"���?�6�6�a7�k����%�F6�y��� v��
and so on...
does anybody know how I can embedd an image into a website???
Thanks
You should add a new PHP page that returns the image (with appropriate content-type and content-length headers) like your first sample above. Say that page is called "image.php". In your "main" page, then, you should construct an image tag like:
<img src="/path/to/image.php?..."/>
Where "..." is replaced with some query string to look up and serve the image you want (the string representation of the GridFS file's ObjectId in the _id field might do well here, or some other unique identifier).
If you're looking for in-doc images you could try
<img src="data:image/png;base64,����JFIFHH��C !"$"$��C���Y..." />
But dcrosta's method may be preferred depending on your overall intent.
You'll have to plug in the correct image type and encoding (or re-encode).