• ACCUEIL
  • blogger

    Comprendre et solutionner l'affichage de photos stockées dans Drive

    GOOGLE DRIVE permet de :
    -Télécharger et Stocker dans le Cloud n'importe quel fichier.
    -Créer avec ses outils comme Google Docs / Sheets / Slides.. des documents dont les fichiers stockés  sont facilement partageables et publiables (via "Fichier > Intégrer")

    MAIS
    la prise en charge des fichiers qui ne peuvent pas être modifiés à l'aide de Google Docs / Sheets / Slides est limitée. Par exemple, vous pouvez intégrer des fichiers PDF et des vidéos, mais Google Drive n'offre pas de liens pour intégrer des images. Il permet uniquement d'afficher une photo dans sa visionneuse intégrée.

    DONC
    Si vous souhaitez publier dans votre blog des images classiques ou  défilantes soit pour un bandeau qui s'affichera sous le titre du blog, soit un slider/ diaporama classique dans un article, en théorie vous ne pourrez pas utiliser les photos stockées dans Drive
    En effet, après avoir partagé vos photos et obtenu le lien de partage,  celui-ci ne permet pas d'afficher vos photos dans votre blog !

    TOUTEFOIS
    Toutefois il existe une SOLUTION...
    Avant de la proposer,  nous présenterons les difficultés d'affichage de photos  partagées stockées dans Drive afin de  bien comprendre le fonctionnement

    PLAN
    1-Stocker dans Google DRIVE permet uniquement de partager les documents, les photos...
    2-Afficher une photo stockée dans DRIVE dans un Blog via l'outil "Insertion"
    3-Afficher une photo stockée dans DRIVE dans un Blog en mode HTML? plusieurs possibilités
    4-Mieux Gérer ses fichiers images dans Drive pour les partager en créant un "Dossier partagé"
    5-RÉSUMÉ : Publier des photos stockées dans Google Drive


    1-Stocker dans Google DRIVE permet uniquement  de partager les documents

    • Dans Google Drive est stocké  un fichier image nommé 1.png .
    Nous le partageons :


    Nous obtenons ce lien qui sert UNIQUEMENT au partage du fichier image et permet de le voir dans Google Drive 
    • Affichage via un  simple lien  : => l'image s'affiche dans la visionneuse de Google Drive, pas dans le blog !     Voir la photo
    • Rappel : IDENTIFIANT
      Le lien de partage permet d'obtenir  l'identifiant du fichier  en fluo jaune:  1mRAyI8gyIwBLQI1SQ3qD-xgNHDsm3lNH


    2-Afficher une photo stockée dans DRIVE dans un Blog  via l'outil "Insertion" 

    c'est une solution simple et facile
    A -Via l'outil INSERER UNE IMAGE  puis Depuis une URL en indiquant le lien de partage






    résultat:OUI






    Mais quelle est l'adresse URL de cette image intégrée?
    via un clic droit  et "Copier l'adresse du lien" ou " Copier l'adresse de l'image "


    Nous obtenons une nouvelle URL !  :
    https://1.bp.blogspot.com/IRjt2eDhcL1gDRrf9Fv5dzYnciN3hN9BolnbH-zPFBF4No6DL_hJR16JMdXb9Y0Z8IAUblyW7Uo=s400
    mais  on ne retrouve plus l'IDENTIFIANT du fichier


    B-Via l'outil INSERER UNE IMAGE  donc Depuis une  l'image stockée dans l"ordinateur URL 



    Résultat OUI



    Nous obtenons une nouvelle URL avec l'extension du fichier !
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhExrF2WUxxpaHanyM0y8Bq5ZdWA79bnHefR9zOk0L-b77bbqA0k1u4uip1ycDbRRPQuKNA0S7j8lGQ96Uei9bgpuNnp4_djYVs1fbnH2faf90JPNkH49SDN-lqufrrwTrI5y1cMPgL2B4/s320/1.png


    Cette solution permet de récupérer de vraies URL (avec extension) qui permettent d'afficher/intégrer des images:
    1-Dans votre Blog, publiez un nouvel article
    2-Insérer de manière classique  vos photos (qui seront ensuite stockées dans Drive)
    3-Publier votre article
    4- Clic droit sur chaque image pour récupérer l'adresse de l'URL 
    "Copier l'adresse de l'image"
    5 Copiez toutes les adresses dans le bloc note

    Désormais vous avez des liens vers vos images

    Quel intérêt ?Si vous souhaitez obtenir un affichage RAPIDE des photos, cette solution permet un affichage quasi instantané, beaucoup plus rapide qu'avec la solution préconisée ci-dessous, en partie 3 B.

    Rappel : Les images  que vous insérez dans votre blog sont stockées dans des albums archivés par Google=> https://get.google.com/albumarchive/





    C-Via les albums archivés par Google

    Résultat OUI


    Nous obtenons encore  une nouvelle URL


    3-Afficher une  photo stockée dans DRIVE dans un Blog   en mode HTML? plusieurs possibilités

    A- Manuellement
    Le code (mini)  HTML pour insérer une image :<img src="image.gif">
    testons avec
    • Code avec URL de partage
    <img src="https://drive.google.com/file/d/1mRAyI8gyIwBLQI1SQ3qD-xgNHDsm3lNH/view?usp=sharing">
    résultat :NON


    • Code avec Nouvelle URL après insertion
    <img src="https://1.bp.blogspot.com/IRjt2eDhcL1gDRrf9Fv5dzYnciN3hN9BolnbH-zPFBF4No6DL_hJR16JMdXb9Y0Z8IAUblyW7Uo=s400">
    Résultat NON



    • Code avec Nouvelle URL après "insérer une image de l'ordinateur"
    :  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhExrF2WUxxpaHanyM0y8Bq5ZdWA79bnHefR9zOk0L-b77bbqA0k1u4uip1ycDbRRPQuKNA0S7j8lGQ96Uei9bgpuNnp4_djYVs1fbnH2faf90JPNkH49SDN-lqufrrwTrI5y1cMPgL2B4/s320/1.png">

    Résultat : OUI





    B. Via une URL spécifique, intégration/diffusion d'une image stockée dans Drive 

    •  via ces  codes  qui fonctionnent, tous les 3, sans aucune différence : 
      • http://drive.google.com/uc?id=identifiant
        code court et simple, mais aussi : 
      •  http://drive.google.com/uc?export=view&id=identifiant 
      • http://drive.google.com/uc?export=download&id=identifiant

    DEMONSTRATION

    Il est utile d'utiliser le Bloc notes pour la réalisation
    DEMARRER> PROGRAMMES >ACCESSSOIRES  WINDOWS> BLOC NOTES


    1-Obtenir l'identifiant du fichiervia le clic droit, vous pouvez  "Partager"  ou directement Obtenir  le lien partageable
     si le code est un peu différent, dans les 2 cas, est affiché le même identifiant du fichier



      https://drive.google.com/file/d/1mRAyI8gyIwBLQI1SQ3qD-xgNHDsm3lNH/view?usp=sharing

      OU



      https://drive.google.com/open?id=1mRAyI8gyIwBLQI1SQ3qD-xgNHDsm3lNH

    => copier dans le bloc notes


    2- Préparer l'URL d'Affichage/intégration

    • Manuellement
    http://drive.google.com/uc?id=1SjJREXLL6NmGk8i30JbKRK20rO7qv3WT
                 
              =>utiliser le bloc notes

    qui permettra d'afficher  la photo de Drive  ou l'utiliser dans un diaporama/slider...






    • ASTUCE : Un outil pour obtenir automatiquement  le lien d'intégration
    utiliser :  https://google-drive-direct-link.blogspot.com/
    Copier le lien de partage > GENERATE> Récupérer le lien d'intégration
    Réinitialiser pour recommencer


    ou GDURL    https://gdurl.com/


    • A SAVOIR
    l'affichage des images est beaucoup plus rapide en utilisant
    -l'URL avec extension de fichier (obtenue après avoir inséré une image de l'ordi dans le blog puis récupération de l'URL"
    que via
    -les URL contenues avec l'identifiant via "http://drive.google.com/uc?id=identifiant"



    3-Mieux Gérer ses fichiers images dans Drive pour les partager : créer un DOSSIER partagé

    Pour mieux gérer vos fichiers images que vous envisagez d'exploiter dans votre blog, regroupez les dans un dossier:

    1. Créez un nouveau dossier sur votre disque
    Entrez votre lecteur Google https://drive.google.com , appuyez sur "Nouveau" dans le coin supérieur gauche, sélectionnez "Nouveau dossier" et Mettre un  nom. "photos partage"

    2. Autoriser l'accès public au DOSSIER
    Faites un clic droit sur le dossier et choisissez «Partager»;
    Choisissez "Avancé" dans le coin inférieur droit et cliquez dessus;
    Dans la fenêtre qui apparaît, appuyez sur «Modifier» et choisissez
     "Activé - public sur le Web"  = En plus d’être consultable par tous ceux qui disposent du lien sans qu’il n’aient besoin de se connecter à leur compte Google, le fichier pourra également être indexé dans les moteurs de recherche.
    OU (conseillé)
    "Activé – Tous les utilisateurs disposant du lien" = Le caractère public du fichier est un peu plus restreint. Il n’est pas indexé dans les moteurs de recherche, mais toutes les personnes disposant du lien peuvent y accéder, sans avoir besoin de se connecter à leur compte Googlepuis appuyez sur «Enregistrer» et «Terminé».

    3. Déplacer vos images dans ce nouveau dossier 
    Entrez dans le dossier et téléchargez vos images ou photos. (ou déplacez des images déjà situées dans Drive)
    Elles seront automatiquement partagées, à l'identique du partage initial du dossier
    4. Obtenez l'IDENTIFIANT dans  URL de l'image
    Faites un clic droit sur l'image  pour "Obtenir le lien partageable"
    Copiez l'URL qui sera générée;
    Obtenez l'ID URL. Il comprend tous les symboles, après id =
    https://drive.google.com/open?id=1rRB0XtPwUKgMdJzbxzJT2iqYzlvtvR

     5. Générez l'URL de l'image  à publier
    Insérez l'identifiant dans l'URL ;

    http://drive.google.com/uc? id=IDENTIFIANT 

    votre image sera disponible avec cette URL pour être publiée (code html, diaporama...)

    NOTE :
    -vous pouvez aussi l'outil en ligne qui génère automatiquement le lien  pour diffuser une image
    -autres URL de partage possibles :
    http://drive.google.com/uc?export=view&id=identifiant
    ou
    http://drive.google.com/uc?export=download&id=identifiant

    - cela fonctionne pour tout fichier Google Drive non privé, pas seulement pour les images.



    4-RÉSUMÉ : Publier des photos stockées dans Google Drive

    1-Préparer un dossier et partagez le : il est destiné à stocker vos photos à intégrer
    2-Y déposer vos photos
    ------utiliser le bloc notes--------
    3-Récupérer le lien de partage de chaque photo

    https://drive.google.com/file/d/1mRAyI8gyIwBLQI1SQ3qD-xgNHDsm3lNH/view
    2-Copier l'identifiant        1mRAyI8gyIwBLQI1SQ3qD-xgNHDsm3lNH
    3-Créer le lien d'affichage et coller l'identifiant:
    https://drive.google.com/uc?id=identifiant

    ex => https://drive.google.com/uc?id=1mRAyI8gyIwBQI1SQ3qD-xgNHDsm3lNH


    ------pour un affichage rapide----------------
    1-Dans votre Blog, publiez un nouvel article
    2-Insérer de manière classique vos photos issues de votre ordinateur (elles seront ensuite stockées dans Drive)
    3-Publier votre article 
    4- Clic droit sur chaque image pour récupérer l'adresse de l'URL => "Copier l'adresse de l'image"
    5-Copiez toutes les adresses dans le bloc notes

    >Désormais vous avez des liens vers vos images qui s'afficheront plus rapidement que dans la méthode précédente
    > Les images que vous insérez dans votre blog sont stockées dans des albums archivés par Google=> https://get.google.com/albumarchive/




    SOURCES et COMPLÉMENTS

    https://stackoverflow.com/questions/10311092/displaying-files-e-g-images-stored-in-google-drive-on-a-website

    https://stackoverflow.com/questions/29561000/public-google-drive-image-url-display-on-webpage

    http://googlesystem.blogspot.com/2013/02/permalinks-for-google-drive-images.html

    https://elfsight.com/blog/2018/02/how-to-upload-images-for-direct-url-in-google-drive/

    https://support.awesome-table.com/hc/en-us/articles/115002196665-Display-images-from-Google-Drive