I have a website that I am designing and I want to use a folder in a google drive to store the images. The issue is that I can't seem to find how to get the URL for these images. The actual use of this needs to be that anyone with permissions for the google folder can drop in an image and it will show up when you load the page.
I have the php looping figured out and I am just short the path for the <img src="" >.
At the moment even just getting one image statically from google drive would be a start.
If I understand what you are aiming for, it's pretty much hosting the images from the Google Drive. Looked around the community and found some stuff that I think is what you're looking for or at the very least, can help you have an idea on how to do it.
First, is from this answer. You just have to use this URL format:
https://drive.google.com/uc?export=view&id=<fileId>
-- providing the file ID. There is a note though, Note: this link seems to be subject to quotas. So not ideal for public/massive sharing. But this proves that you can retrieve the files (in your case, images) from the file drive.
Second, is the top answer from the same post as above. Simply states that it is very much possible, provided that you put the files in a public folder, then retrieve it using the following URL:
https://googledrive.com/host/<folderID>/<filename>
Lastly, is to follow the tutorial video. It's similar to the second answer where the image should also be shared publicly (haven't really tried to tweak around, try it out maybe it can also work if it's only shared selected users), get the shared link and use gdurl.com which will turn the shared link and turn it into a hosted link which will be a direct link to the image.
Here is a simple example:
Problem: The image url that you get from sharing a google drive image will be something like this
Simple Solution:
(**a) https://drive.google.com/file/d/{this part will contain the image ID that we need}/view?usp=sharing
But to use image we need url something like this
(**b) https://drive.google.com/uc?id={this part will contain the image ID that we need}
So the simple thing we can do is manually copying that part of the image ID from (**a) url and pasting in the (**b) url.
Automating using JavaScript:
let sharableLink = (**a); //paste the google drive image sharing link here
let baseUrl = "https://drive.google.com/uc?id=";
let imageId = sharableLink.substr(32, 33); //this will extract the image ID from the shared image link
let url = baseUrl.concat(imageId); //this will put the extracted image id to end of base Url
Here 32 and 33 are the starting and ending position of the image ID to be extracted from the shared image link.
AddOn:
You can create a simple HTML to get the converted image Url from the sharable link.
HTML:
sample.html
<!DOCTYPE html>
<html>
<head>
<body>
</div>
<!-- container for url and button to load it -->
<div class="thumbnail-container">
<input
type="text"
id="edt-thumbnail-url"
name="thumbnail-url"
placeholder="Thumbnail Url">
<div>
<button class="btn btn-load-thumbnail" id="btn-load-thumbnail">Upload Thumbnail</button>
</div>
</div>
<!-- script that runs the code for conversion -->
<script src="/sample.js"></script>
</body>
<head>
</html>
now create a javascript file and paste this
sample.js
const productThumbnailUrl = document.getElementById("edt-thumbnail-url");
const btnUploadThumbnail = document.getElementById("btn-load-thumbnail");
btnUploadThumbnail.addEventListener("click", (e) => {
e.preventDefault();
let str = productThumbnailUrl.value;
let baseUrl = "https://drive.google.com/uc?id=";
let imageId = str.substr(32, 33);
let url = baseUrl.concat(imageId);
productThumbnailUrl.value = url; //this will put the converted url in the edit text box
console.log(url);
});
Related
Right, so this is a really simple - and likely somewhat stupid one. Apologies in advance.
I've got a site that has three URLs that go to the same site. Web server is apache, virtual host is done proper with StieAlias(es) so that if someone visits the site via URL1.com, the browser just sees URL1.com and then URL2.com, URL3.com - you get the idea.
Now the issue is the user wants to display a certain logo based on the base URL. So if they do:
www.URL1.com --> logo1.gif
www.URL2.com --> logo2.gif
www.URL3.com --> logo3.gif
Totally elementary, but I've never done it before. Site is PHP and I'm decent enough with PHP I suppose but I've got no idea even where to start on this one.
TIA.
You could do that with some javascript code:
<script type="text/javascript">;
var host = location.host;
// here we use the location to build the image name
// for example, for stackoverflow the image name would be: `stackoverflow.com.jpg`
document.getElementById('myImage').src = host+'.jpg';
</script>
and then in your html use:
<img id="myImage" src="" />
Check this JSFiddle that I've created for you. You can inspect the image element and check its source.
Assuming your logo file is located in the images folder with the file name URL1-logo.png.
PHP
$mylogotoload = $_SERVER['SERVER_NAME'];
echo '<img src="images/'.$mylogotoload.'-logo.png" />';
I'm creating a slideshow where I'm displaying images based on their urls. I've used PHP to extract the image urls from web pages and I've used JavaScript to display them in a slideshow format. Only thing is, the first picture takes a lot of time to load so I decided to cache the urls by storing them in a text file, but I don't know how to read the urls from the text file in my JavaScript bit?
Could anyone point me in the right direction as to how I should proceed. I couln't find anything helpful online.
My JS code is like this:
<script language="JavaScript1.1">
var slideimages=new Array()
slideshowimages("<?php echo join("\", \"", $image_urls); ?>") <--this is where I was initially echoing the array or image urls from php, but it proves slow for the first few images
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
var slideshowspeed1=30000
var whichimage1=0
function slideit1(){
if (!document.images)
return
document.images.slide1.src=slideimages[whichimage1].src
if (whichimage1<slideimages.length-1)
whichimage1++
else
whichimage1=0
setTimeout("slideit1()",slideshowspeed1)}slideit1()
</script>
Thanks!
Why are you pulling from an external website? You generally will get a lot more speed if you pull them locally. I do believe that once it pulls the images once or so, it will cache for users when it shows up again. What you could do is to use that list you pull and create the images hidden on the page so they load with the page. Then when going through the slideshow, the user should have had time to cache the images and the slideshow will have sped up.
Just make a CSS class known as hidden and visability:hidden;it. Most browsers will still try to load the data.
I have limited space in my server. So, I am looking for an alternative for hooking up image URLs to my site like a product image.
What I would like to do is input an URL then load an image without refreshing the whole page.
Here is my idea:
input "any url" then submit
if url is image and existing {
display the image
}
else if (url is a non-image) or (url is image but not existing) {
display a default image
}
I tried getimagesize but it was so heavy. curl is not functioning on my server, so I am trying to do is use jQuery or JavaScript or something.
At the moment I'm using something like this:
HTML
<img src="http://www.yoursite.com/img/someimage.jpg" onerror="NoImage(this);">
Javascript part:
<script type="text/javascript">
function NoImage(p){
p.src="http://www.yoursite.com/img/nopic.gif";
}
</script>
Hope it helps
use fopen to check if that image exists u dont have to read the full content
http://www.astro.keele.ac.uk/oldusers/rno/Computing/File_magic.html
( u should restrict that possible urls cause auf bandwidth stealing from other pages - and maybe some copyright problems caused by that images )
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).
I have some thumbnail images with its larger version.I placed the thumbnail images in a page.Now for link I just gave a link
<img src="thumbnail1.jpg>
but for this I have to make different pages for showing larger one.I want to give a link to show them in a single page.means whenever I will click the thumbnail it will open the larger one in a page with the same url but with its name like
imagegallery.php?news=images/largerimage1/13.jpg
imagegallery.php?news=images/largerimage1/14.jpg
so how to do that?
Pretty basic stuff, I suggest you get to read some PHP tutorials on the internet to get some knowledge on one thing and another.
The ?news= part in your URL is a parameter that can be read by PHP. This type is known as $_GET. To get this part you would need $_GET['news'] so if we'd use your first link and place this inside a script: echo $_GET['news']; the page would say images/largerimages1/13.jpg.
In order to get the image loaded on your website we need some simple steps, I'm changing the news parameter into image, that suits better for your script since it ain't news items:
<?php
// Define the path (used to see if an image exists)
$path = 'your/absolute/path/to/public_html/'; # or wwwroot or www folder
// First check if the parameter is not empty
if($_GET['image'] != "") {
// Then check if the file is valid
if(file_exists($path . $_GET['image'])) {
// If an image exists then display image
echo '<img src="'. $_GET['image'] . '" />;
}
}
?>
Below this script you can put all your thumbnails the way you want. Ofcourse, also for these thumbnails there are some automated options. But I strongly suggest you get a good look at the script above and some beginner PHP tutorials so you completely understand the example given. This still isn't the best method, but it's kicking you in the right direction.
if your imagegallery.php is in root of your domain, you can just add slash as a first char to links like this:
<img src="thumbnail1.jpg>
else you will have to write some php function which it returns BaseUrl of your web. Then it should looks like this:
<img src="thumbnail1.jpg>
maybe you can something like this,
Techincally, there is no thumbnail image, just a stretch version of the regular image
I don't understand which part you don't know how to do:
- the link part?
it should look like
<img src="thumbnail1.jpg>
- or the PHP part (the file called imagegallery.php)?