basic html code user here, just trying to get some scripts finished up and im struggling.
I have a hosted website, and a hosted dedicated server. I have a folder on my dedicated server full of pictures (screenshots) from server players that gets taken randomly. Its for anti cheat.
Basically, ive been trying to write a script so that on a webpage on my hosted website, it automatically shows all the pictures from that folder on my dedi.
Im struggling.
The only code i know to show a picture from ftp is
img src="ftp://username:password#my_ftp_ip_address/Images/imagename.jpg"
I want to create something that automatically shows all the pictures or at least lists the folder directory so that i can click on the pictures, but im a bit confused on how to do this! Any help would be great thanks!
This is basically an anti-pattern. You shouldn't be exposing your username and password in your HTML code.
One thing you can do, is set up a web server on your FTP server so instead of <img src="ftp://..." /> you'll be using <img src="https://my-server.com/image.jpg" />
For example you can set up nginx or apache to serve the images from a certain directory but prevent directory listings.
For nginx, you can either follow the official docs, or get a hint from this SO Question
Same thing with apache, you can pick whichever you find that fits your needs best.
With using <img src""></img> you can target the folder directly without having to insert a link. Like so: <img src"<folder holding images>/<image name>" /> this should target the photo you are looking for without having to expose your username, password, and FTP information.
If you want to show all images it needs to be defined in your HTML, you need to use the code above to target each image individually (Helps organization).
If you want to be able to click on the photos you can add and that should allow you to click on the image and then open it in a bigger version. If you want to make it open in a new tab add this target="_blank" to your <a></a> tag so that way it opens in a new tab.
Related
I'm designing a WordPress Site right now, and want to include a webcam to give users the possibility to see the live weather. Therefore a picture from the webcam is uploaded to the wordpress webspace under wordpress/wp-content/uploads/webcam/upload.jpg every 5 minutes.
I now want to include this picture (which changes every 5 minutes but always has the same name) on my website.
Currently I'm using simple html to include the picture:
<img class="alignnone size-medium" src="https://XXXXXXX.de/wp-content/uploads/webcam/upload.jpg" width="1280" height="720" />
I can see a picture on the website, but when the image on the server gets overwritten, the website still shows the "original" picture.
How can I achieve a that a user who logs onto the site always sees the newest version of the picture on the server? As I said, the name of the file is always the same.
I'm using the impreza theme if this is important.
Thanks!
Try to use a get param to make browser understand it is a new URL and it will fetch. e.g use src attribute something like
src="https://XXXXXXX.de/wp-content/uploads/webcam/upload.jpg?your_Ver_var=currenttimeoutput()"
Implement currenttimeoutput() or use inbuilt php time method to render it
I have made a site with Codeigniter and users have options to upload their photos there. As the photos are personal, I think keeping them on web directory is not safe. As a result, I kept them on a root directory like /var/www/images directory. Now, how I can get the images in a webpage?
Wrong Choice dear learner. you images folder needs to be accessible by your code and to the browser to render that image by the image path. For example
This is the image directory of my project. I am using all these images in different pages of my website. Some are selected dynamically by my code.
Now in your case by putting images in www folder, you are making a path of http://images/ which is not recommended by any PHP guidelines. Your images folder should be in your project root not outside.
If you want to disable folders to be viewed, just add empty index.html file, but if you try to protect images from being viewed then your website wont be able to find them too image protection in codeigniter
The code will be as safe as you make it. Well what you are doing is fine, the web server will still have to access the images.
While ignoring the rest of your code or what yo are trying to achieve, you could try referencing the images fro your webroot or probably create a symlink.
Also, I would try to put the images in another place like AWS.
If security is a concern for you, you can try building a ImagesController that checks if image exists, if user has permissions to see it and after that render it.
Uploaded images should also have some reference row inside a table in your database that can have a column which specifies if it should be public (also try to sort them to folders depending on what it represents - user profile pics, product images, etc).
I know it's a little bit of work but this would be the way I would do it.
You can check online for examples of controllers that return an image.
Good luck on your project.
My question is about HTML and PHP.
This is my setup right now:
A website where user have accounts
A FTP server with pictures (currently none)
Files are currently saved on the website in the "PICTURES" folder (which is accessible by everybody who know the full URL)
So, I would like to know how I can display the images without storing them on the website (which will fix my URL problem).
My idea was to move the files on the FTP server, and when a users logon and request a page with those images, download them through a FTP connection, save them on the website, display the images, and remove them. Which would make them accessible only between the downloading time. But this solutions sounds REALLY bad to me.
You need always to have a place where your images are stored. But, if you don't want to give a user the chance to know where are stored, you can create a system which is used to show the images.
Think about this, if you want to download a file from Mega, you can't access to the URL where the file is stored, instead of that, the server itselfs calls a system who assign you a "key" and you can download the file only through that system using your "key".
You could use a system like "base64" so you can encode your image, and show it using it, or, you can use the "header" modifier so, you can display an image using a PHP code.
For example your image tag will be like:
<img src="processImage.php?id=01&user=10&key=123" />
So, your processImage will return a "tricky" image, actually not the image, but the code processed by PHP will be returned, like using "imagejpg()" function with the header "Content-Type:image/jpeg" and then the user will not know where the image is stored actually but the img will works actually.
Make a basic web page, only purpose of the web page is to be able to upload background image and display locally when going to that address in the browser.
For example, say I have this:
<html>
<head>
</head>
<body>
<input type="hidden" name="MAX_FILE_SIZE" value="500" />
<input type="file" />
</body>
</html>
Now, what next? Here is what I want to do:
I click the upload button.
It uploads to my own computer at the following address:
file://C:\dummyfolder\images\
See what I'm getting at? I do real web design online but this is different. I got this idea and now I wanna do it. Please help!
I can think of someone who did this before. Google does it on their site. When you go to google.com you can choose a background image to display on Google. It stores the image locally on your computer. I want to do that, just on a web page that is stored locally, and the web page is stored locally at the url:
file://C:\dummyfolder\dummypage.html
It could be PHP too, it doesn't matter. It will never be accessed anywhere except locally within my own computer so it does not have to be too complicated.
I want the littlest code possible. Just an upload link and then it stores the image on my computer and automatically displays as a background on that html page whenever I visit it. If I upload another image it changes to the new image that is also stored locally or maybe it could replace the old image? Dunno.
Thanks for your help!
I am fairly certain that a web page cannot store (upload is the wrong term here, as the image never leaves your computer) an image on the clients PC.
Sites that allow you to set a background image generally store the image on their webserver & then store information pointing to which background is yours in either a cookie or database. Twitter, google, and many more use this method.
You might be able to use some HTML5 features to store the image locally using the new local storage options in HTML5. You can pick through the W3C docs here: http://dev.w3.org/html5/webstorage/
In my website people can upload their photos. And I show them. Is it possible, that they would not be able to see url where that image is?
Photos are shown like this <img src="http://mywebsite.com/my_images/image_name.gif" />. What I want to do, that people couldn't see that src link. Is there any way to show photos from that directory without exposing directory name?
Thanks.
There isn't, but you can use URL rewriting (apache's mod_rewrite or a custom PHP script to serve the images) to hide the actual location on your web server.
For example for the latter approach you coud have a serveimage.php on the server, which is called like serveimage.php?file=file1.jpg.
You can call another php-script via <img src="..."> the script loads the image and generates it. This FAQ entry should help.