web-dev-qa-db-fra.com

Comment afficher des images de Google Drive sur un site Web?

Un de mes clients a téléchargé des photos sur leur Google Drive et souhaite que je les affiche sur le site Web de son entreprise. J'ai consulté la documentation pour afficher le contenu Google Drive dans une page Web, mais il semble qu'il s'agisse simplement d'instructions permettant d'afficher le contenu dans une page Web, ce qu'elle fait déjà.

Ma question est la suivante: comment puis-je afficher le contenu directement sur la page Web du client?

Merci.

google-drive-sdk
33
fmz

Si vous avez des fichiers image, téléchargez-les simplement dans un dossier public sur votre Google Drive, copiez-le ID du dossier de la barre d'adresse (par exemple, 0B0Gi4v5omoZUVXhCT2kta1l0ZG8) dans un formulaire sur GDrives , puis choisissez votre propre alias (par exemple, myimgs) et le tour est joué! Vous pouvez accéder aux images une par une en utilisant, par exemple, http://gdriv.es/myimgs/myimage.jpg .

Si vous souhaitez intégrer un dossier entier à votre site Web (dans un cadre), vous pouvez utiliser l'une des URL suivantes, en remplaçant [folderID] par votre propre ID:

Si vous préférez obtenir la liste de fichiers au format XML ou JSON, vous pouvez utiliser YQL .

Remarque: vous pouvez également utiliser Photos Google+ pour héberger et incorporer vos images.

14
niutech

Utilisez l'option "Obtenir le lien" dans Google Drive pour obtenir l'URL.

Utilisez la balise <img> en HTML et collez le lien ici.

Remplacez Open? par l'URL par uc?.

61
Richard

J'ai trouvé un moyen de le faire sans utiliser de sites externes.

<img src="https://drive.google.com/uc?export=view&id=XXX">

https://Gist.github.com/evansims/f23e2f49e3d4be793038

<a href="https://drive.google.com/uc?export=view&id=XXX">
    <img src="https://drive.google.com/uc?export=view&id=XXX"
    style="width: 500px; max-width: 100%; height: auto"
    title="Click for the larger version." />
</a>

Vous aurez besoin de saisir l'ID de l'image: Cliquez sur «Ouvrir dans une nouvelle fenêtre» et obtenez l'ID de l'URL. 

Click on “Open in new window”

14
Quitiweb

De pages d'aide de google drive :

Pour héberger une page Web avec Drive:

  1. Ouvrez Drive sur drive.google.com et sélectionnez un fichier.
  2. Cliquez sur le bouton Partager en haut de la page.
  3. Cliquez sur Avancé dans le coin inférieur droit de la zone de partage.
  4. Cliquez sur Modifier ....
  5. Choisissez On - Public sur le Web et cliquez sur Enregistrer.
  6. Avant de fermer la boîte de partage, copiez l'ID du document à partir de l'URL dans le champ situé sous "Lien pour partager". L'ID de document est une chaîne de des lettres majuscules et minuscules et des chiffres entre des barres obliques dans le URL.
  7. Partagez l'URL qui ressemble à "www.googledrive.com/Host/[doc id] où [doc id] est remplacé par l'ID de document que vous avez copié à l'étape 6.

Tout le monde peut maintenant voir votre page Web.

Si vous souhaitez voir votre image sur un site Web, intégrez le lien vers l'image dans votre HTML comme d'habitude:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Example image from Google Drive</title>
    </head>
    <body>
        <h1>Example image from Google Drive</h1>

        <img src="https://www.googledrive.com/Host/[doc id]" alt="whatever">

    </body>
</html>

Remarque: 

À compter du 31 août 2015, l'hébergement Web dans Google Drive pour les utilisateurs et les développeurs sera obsolète. Vous pouvez continuer à utiliser cette fonctionnalité pendant un an jusqu'au 31 août 2016, date à laquelle nous cesserons de diffuser du contenu via googledrive.com/Host/[doc id]. Plus d'informations

11
gugol

Mise à jour du 18/02/2017 Google avait amorti la fonctionnalité d'hébergement gratuit sur Google Drive et vous ne pouvez désormais plus héberger votre site Web statique sur Google drive gratuitement.

Mais si vous souhaitez héberger votre fichier JavaScript, CSS et vos images sur Google Drive, vous pouvez toujours le faire. Vous avez juste besoin d'obtenir le permalien du fichier. suivant tutoriel mis à jour (2017).

http://www.bloggerseolab.com/2017/02/Host-images-javascript-and-css-on-google-drive.html

6
Vishal Chopra

Google Drive Hosting est maintenant obsolète. Il a cessé de fonctionner le 31 août 2016.

Hébergement sur Google Drive - Calendrier obsolète

J'ai supprimé l'explication de la manière d'héberger une image sur Google Drive. 

5
Sandy Good

Voir la liste

<iframe src="https://drive.google.com/embeddedfolderview?id=YOURID#list" width="700" height="500" frameborder="0"></iframe>

Vue grille

<iframe src="https://drive.google.com/embeddedfolderview?id=YOURID#grid" width="700" height="500" frameborder="0"></iframe>

Plus d'informations sur: https://thomas.vanhoutte.be/miniblog/embed-add-google-drive-folder-file-website/

4
trm5073

Exemple d'intégration d'une image Google Drive

URL d'origine: https://drive.google.com/file/d/0B6wwyazyzml-OGQ3VUo0Z2ddc

Photo de Paula Borowska

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>Google Drive</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <img src="https://drive.google.com/uc?export=view&id=0B6wwyazyzml-OGQ3VUo0Z2thdmc">
</body>

</html>

Merci https://codepen.io/jackplug/pen/OPmMJB

2
Aathi

Quelques alternatives intéressantes à l'hébergement public d'une image sur Drive (obsolète):

1. Google Photos

Si vous importez une image dans Google Photos au lieu de Drive, un lien Web public apparaît.

Ce comportement est un peu surprenant pour moi, mais le lien étant très long et aléatoire, ils pratiquent apparemment "la vie privée par obscurité".

2. Google Drawing

Si vous créez une image à l’aide du programme "Google Drawing" (intégré à Drive), vous pouvez appuyer sur File > Publish to Web pour obtenir un lien public.

 enter image description here

Remarque: ceci pourrait être une solution si vous essayez de partager une image existante, collez-la dans l'éditeur et rognez le canevas sur votre image (file > Page Setup), mais c'est un peu lourd. Si vous avez besoin de faire quelques retouches d'image de base, ou si vous essayez de créer une simple icône/graphique, je pense que c'est chouette.

0
Dustin Michels
<img src="https://drive.google.com/uc?export=view&id=Your_Image_ID" alt="">

J'utilise sur mon site wordpress comme stocker des fichiers image sur l'hôte local prend beaucoup d'espace et ralentit mon site

J'utilise textmate car il est facile de modifier plusieurs URL en même temps en utilisant le bouton 'alt/option'

0
Ryan Herter

Je ne connais pas de meilleur moyen mais vous pouvez dater la page avec php. Par exemple, si vous allez sur Google et partagez un dossier puis allez dans ce dossier, il ressemblera à quelque chose comme: 

https://drive.google.com/folderview?id=0B8TT0olkjsdkfji9jekbFF4LWc&usp=sharing

^^^ pas un vrai lien

Ce que vous recherchez, ce sont les images individuelles contenues dans le code source de cette page.

puis en utilisant php obtenir le code source avec

<? $f = fopen ("http://www.example.com/f", r);
echo $f;
?>

maintenant $ f a la source et vous pouvez utiliser d'autres commandes php pour ne séparer que les URL avec les images souhaitées. Cela demandera un peu de travail mais sera tout à fait faisable.

une fois que vous avez ces liens d’image montrant la façon dont vous voulez, il vous suffit de les incorporer dans une structure div ou un tableau à afficher dans une galerie, peut-être même d’ajouter un élément greybox pour obtenir un effet.

0
user3586571

Si le fichier se trouve dans un dossier public, vous pouvez utiliser Hébergement du site Web Google Drive .

0
Ali Afshar