Website with auto updating image from latest file in folder - image
I am a noob with everything related to coding, except for some knowledge of the linux command line. Anyway, I have this idea for a project. I need a website with an image that updates every few hours or so. I have a folder in google drive, and every few hours a new image is uploaded. These times are not regular, but as long as the website gets the new photo within an hour-2hours, it will be fine. I was thinking of making an alias folder that links to the latest image in a folder (like how apple does it with time machine backups) if that makes sense. Then I would copy the link on google drive (of the alias folder) and put that into wordpress. It would pull that link, which would go to the latest image in a folder. I have a feeling that this would not work out, however. Basically, I just want an automated updater to pull the latest image from a google drive folder and publish it to the website. If it needs to be local, I could use the backup and sync for drive and the google drive folder would be synced to my local machine.
Another thing I was thinking of was a automatic slideshow maker. I would use some kind of script in google to delete all files in a folder except for the latest one. Then I would use the automatic slideshow maker to make a slideshow based on data in the particular google drive folder, which would be the latest photo.
Again, these are just some ideas that I have had, and they are both likely not going to work.
I have a self hosted web server (docker) and could put a wordpress instance on that, or I could use an online website builder like weebly or wix or even google sites. It needs to be free because this is for a community service project and I do not want to have to constantly fundraise. However, if my only option requires payment, I am open to that.
Does anybody have a solution for this?
Thanks!
There are several ways to achieve what you desire.
One approach:
I would suggest naming the image that you put in drive with the same filename. (renaming the old ones, as each new image is uploaded)
Google Apps script makes it easy (and free) to deploy a Web App, and using it gives you the benefit of using it's Drive Service among others.
Use a time-driven trigger to execute a function that renames your images so that the most recently uploaded one has the name of the image your website is requesting.
Alright, I have found an awesome solution! First, I setup a google account and made a folder in google drive. Then, I downloaded an app called DriveSync. I used the app Automate (by llamalab) to take photos (you can program it however you want it to trigger the photo). The trigger happens, then it deletes a file called latest.jpg in the Automate Image folder (on the android phone). Then it takes a photo with an image name of latest.jpg. And all of this is synced to the remote Google Drive Folder thanks to DriveSync. So now we have a synced google drive folder. Then, I setup a Wordpress Instance. Get the Add-On called Image and video gallery from Google Drive here https://wordpress.org/plugins/skaut-google-drive-gallery/. Now, follow the steps to link up your google drive folder to it, and configure your website to display this addon on your page of choice. It will pull the only image in the folder we configured earlier, and it will display it on the website! Plus it auto updates. Also, you can configure the image size which is helpful as this was probably meant to display more than one photo, but with only one photo there is a lot of empty space.
Hope you found this helpful!
Related
how to automatically upload screenshots to Azure blob when pressing "print screen"using Azure blobs and Windows XP
I would like to locate an existing software or simple set up that works on XP (I'm beginning HTML, CSS and a bit of Jquery) so I can do the following: a)"Shift + Prt Sc" lets me select a rectangle with the mouse, and deposits the image in my Azure Blob Storage container. This can be changed to another Azure container when needed. I would like to have this image automatically upload onto the Internet and place a URL link in my clipboard. I want it to be automatic. As soon as foo.png appears in my Azure blob, the copy to clip board needs to execute. DropBox does the screenshots and url copy but it goes to their blob while I need it to go to mine. With Jing I'm able to take screenshots and have the url copied to my clipboard however i only got it to work to my hosted website's image folder as Azure Websites has an FTP link but Azure Storage Blob do not show such an FTP link. b) the same as above but instead of getting to selecting a rectangle with my mouse, I want the entire screen real estate to be taken as the image and automatically upload onto the Internet and place a URL link in my clipboard when I press "Prt Sc" How can I do this?
Unfortunately there is nothing that will do exactly what you want. Options below: You could use Cerebrata's free Azure Explorer tool to upload images and get a url, but I am not sure if it will work on XP. Follow this blog post by Maarten Balliauw on Using FTP to access Windows Azure Blob Storage and use it in combination with what you have already done.
Flask-WTF FileField Uploaded file disappears after a couple days and doesn't show up in the folder
So I'm just using the FileField to add files to the server and it worked the time I tested it on Heroku (by worked I mean the image was rendering properly, granted I should be using some more proper ways to render images), but after a couple days I checked again and the image is no longer rendering properly. I checked my uploads folder and the image is not there any longer (one of the old images were). I ran the test again and the image is showing but the picture file is not in the uploads folder (despite the image showing). I checked on my local machine with the same code and the image uploaded showed up in the uploads folder. I have no clue what's going on... It would be great if someone could shed some insights! Thanks!
The "problem" (it is in fact by design) is with Heroku. Every time your application restarts (when a new change is pushed to your Heroku application or when it restarts after inactivity) your app is recreated and all stored data is gone. Most people use an external service for persistent files/data such as Amazon S3.
Cannot delete particular file
I am developing gallery viewer app. App will fetch the image file from Isolated Storage and will show in an image control. Most of the things are already setup and working fine. Now images are stored in folders which act as album and user can delete the whole album. I tested with many many folders with assorted images and delete works fine. But I see that when there is a particular image file of name "XXXX.jpg", it doesn't get deleted. Although all the images from folder are shown in image control. That file doesn't gets deleted, and an exception is thrown "ArgumentUnhandledException". I tried after renaming the file but earth didn't move. Also, for testing purposes I am transferring folders(with images in it) using "Windows Phone Device Manager". I know it is not official to use it, but it makes testing easy. Also peculiar thing is that "Windows Phone Device Manager" also cannot delete that particular file, although I dumped that file in app's isolated storage using "Windows Phone Device Manager". So I think that there is some problem with that file. How can I delete the file. And if I cannot, how can I know it before hand that some files cannot be dealt with properly and should not be dumped in Isolated storage.Here is that file. File is inside zip file. I think file is required and not not just uploading image to a image hosting site. Please take a look. Also try not to look over the content of image file, that's only random file which is not working and I want to know why.
I found that file was marked read-only and was causing problem when a delete attempt was made. Removing read-only solves the problem.
Automatically choose Download Location, Ebook Library, PDF, Epub, Mobi on the MAC ios
I am creating a flipbook for a client, it will be flash based however the client wants an option for Mac users to which when they click on download file, thats fine as it is pdf but now they want it to automatically goe into their ebook library on their system, rather than a downloads folder Is this achievable, thinking that i might have to reformat it to be of a completely different file type? any ideas?
Swapping an image during web development
I'm trying to see what a certain webpage would look like if I replaced a certain image with another. Rather than upload the image, edit the site, etc, each time I tweak it, I'd like to know if there's a way to change the image in the page to my local version while viewing the remote page. I use Firebug for debugging web development usually, but I'm open to any other tool that might do this. (It is absolutely impossible to search for this and find anything but questions about dynamic image swapping on a deployed website, so sorry if this is a duplicate.) Added: I just tried substituting a file:/// URI pointing to the image (copied and pasted from the address bar after manually opening the image), and alas, it did not work — the image fails to change.
It seems to only work with the http[s] protocols (likely for security reasons). You can store your images on service like Dropbox, share the image or folder, then use the public URLs. Really, you can use any web accessible images, so a local server would work too.
If your image is in a localhost server(not as file mind you) i think you can still put that localhost url in the firebug inspect element and it'll work. Tried an absolute file path but it doesn't work apparently. So I guess you just have to make do with a localhost server image. That works for me
Quick and Lowtech Answer: Take a screen shot of the page open it in photoshop and drop the local image on a layer above the webpage image.
Hi if you are serving from a webserver, u probably can't point it to a file on ur local drive. Even if its localhost, u can't point to a local file c:/test.jpg for example. Its because the browser sorts of sandbox ur page so that scripts can't access local files.
One way is to upload the new file (new_file.jpg) to the webserver, give the image link an id
<img id="something1" src="test.jpg"/>
Using jQuery in the firebug watch window do
$("#something1").attr("src","new_file.jpg");
You should see the image change. If you are not using jQuery, you can use document.getElementById("something1") and get the element to modify.
Another way is to use http://makiapp.com/ You can overlay an image from you computer onto any website you look at with this. Very cool tool for lining up a comp with your code.
You can: Drag your test image into Google Drive Open it in a browser Go to the actual image path Use this path as a substitute in Firebug It's almost as fast as working from a local drive.