web-dev-qa-db-fra.com

Intégrer des images dans un référentiel GitHub wiki (gollum)?

Les wikis Github sont sauvegardés par un référentiel git séparé, puis par le référentiel principal du projet.

Ce message de l’équipe Github donne l’impression que vous devriez pouvoir créer un lien vers des images stockées dans le référentiel wiki à l’intérieur du balisage wiki.

Images et dossiers

Vous pouvez maintenant référencer des images hébergées dans le référentiel Git.

J'ai consulté le référentiel de mon wiki et y ai inséré un dossier de ressources et une image. Ma question est la suivante: comment utiliser cette image? 

Est-ce même possible ou ai-je mal compris quelque chose?

githubwikigollum-wiki
78
James McMahon

Pour utiliser des chemins relatifs, faites:

[[foo.jpg]]

Pour plus d'informations, consultez la page du démo wiki sur images .

52
Benjamin Oakes

Pour les téléspectateurs souhaitant voir des images sur un wiki github, j'ai trouvé la méthode suivante qui fonctionne:

  • Allez sur l'onglet "Git Access" dans la page wiki de votre référentiel et récupérez le chemin SSH qui devrait ressembler à quelque chose du genre: [email protected]: USER/REPO.wiki.git où USER est le nom de votre compte et REPO le nom du référentiel.

  • Sur votre ordinateur local, utilisez l’outil de ligne de commande Git que vous souhaitez insérer dans le répertoire de votre choix et récupérez le référentiel via

    git clone [email protected]: USER/REPO.wiki.git

  • Maintenant, dans ce référentiel, créez un répertoire d'images, je l'appellerai "images" et placerons les images souhaitées dans le répertoire.

  • Et puis poussez votre répertoire wiki git sur github

  • Vous ne pourrez pas voir physiquement les images dans l'onglet "Pages", mais si vous faites simplement référence aux images dans un lien local, vous devriez pouvoir les voir. Exemple avec Markdown ci-dessous:

    ![Alt attribute text Here](images/YOURIMAGE.ext)

  • Vous pouvez également incorporer l'image en tant que lien lui-même en l'enveloppant plus loin de la manière suivante:

    [![Alt attribute text Here](images/YOURIMAGE.ext)](http://Yoursite.com)

Vous pouvez également ajouter des sous-répertoires dans votre copie locale pour aider à organiser le wiki car l'onglet "pages" les répertorie simplement. Gardez toutefois à l'esprit que même lorsque le nouveau répertoire est inséré, l'onglet "Pages" ne répertorie pas le répertoire.

94
Ryan Q

Aucune des réponses ne semble fonctionner lors de l'ajout d'une image dans readme.md. J'ai une solution cependant:

Si l'URL de l'image est:

https://github.com/Username/Repository-Name/blob/master/Directory-Inside-Repository/image.png

Remplacer blob par raw vous donne l'URL de l'image brute:

https://github.com/Username/Repository-Name/raw/master/Directory-Inside-Repository/image.png

Maintenant, vous intégrez l'image en utilisant un démarquage normal:

![Image Alt](https://github.com/Username/Repository-Name/raw/master/Directory-Inside-Repository/image.png)

UPDATE: À partir de maintenant, GitHub sert également des images brutes provenant d'un autre sous-domaine raw.github.com. Donc, vous pouvez aussi utiliser:

https://raw.github.com/Username/Repository-Name/master/Directory-Inside-Repository/image.png

EXEMPLE: https://raw.github.com/Automattic/liveblog/master/screenshot-1.png

30
its_me

Chemin relatif travail pour moi comme ça:

page d'accueil du wiki:

![text](wiki/images/someimage.png)

sous page du wiki:

![text](images/someimage.png)

Notez que lorsque vous faites un aperçu, l'image ne s'affichera pas, je l'ai enregistrée.

24
Werner

Si vous souhaitez télécharger rapidement une image par glisser-déposer, vous pouvez effectuer les opérations suivantes (bien que hackish):

Créer un problème factice; faites glisser votre image là-bas; copier/coller le code de l'image de démarquage téléchargée sur votre wiki;

Après avoir créé le problème une fois, vous pouvez l'utiliser autant de fois que vous le souhaitez.

J'espère que cela aidera tous ceux qui recherchent une solution rapide, sans avoir à laisser l'image résider dans le repo. 

14
tiby

Voici un moyen pratique de le faire:

  • Allez à n'importe quel numéro sur github
  • Dans la section des commentaires, vous pouvez joindre des fichiers, il suffit de glisser/déposer, de sélectionner ou de coller votre image.
  • Copiez le code/lien affiché dans la zone de texte 
  • Collez-le dans le wiki
  • Profit!

Vous n'avez même pas besoin de créer ou de modifier un problème par rapport à la solution @tiby!

7
Jacob Yiendedoi

Deviner.

L'URL est formaté comme suit

https://raw.github.com/wiki/username/project/pathtoimage/imagename.extension

pathtoimage est facultatif

6
James McMahon

Le format de l'URL de James ne fonctionnait pas pour moi, il a peut-être été modifié. J'ai utilisé:

https://github.com/username/project/wiki/pathtoimage/image.extension

Où pathtoimage est facultatif.

5
Ninjakannon

Enfin, les images ont été enregistrées dans le référentiel à l'aide de la méthode décrite par nerdwin et affichées dans le wiki à l'aide de ![test](test.jpg)

2
rupweb

Le démarquage suivant référencera une image dans votre GitHub repo à partir de votre GitHub wiki correspondant

![My Alt Text](../blob/master/Path/ToAsset/In/Repo.png?raw=true)

L'exemple ci-dessus suppose que vous avez la structure de fichier suivante dans votre référentiel.

  • Chemin
    • ToAssets
      • Dans
        • Repo.png

Pour un exemple du monde réel, si je voulais référencer cette image en github depuis le wiki correspondant, j'utiliserais ce marquage.

![Azure App Settings](../blob/master/TrelloWorld/TrelloWorld.Server/Assets/Azure_AppSettings.png?raw=true)

Mises en garde

  1. L'affaire compte
  2. Si vous êtes sur la page d'accueil spéciale du wiki, vous n'avez pas besoin de monter d'un niveau avec le ../ Dans mon exemple ci-dessus, le lien correct serait 

Pour la page d'accueil:

![Azure App Settings](blob/master/TrelloWorld/TrelloWorld.Server/Assets/Azure_AppSettings.png?raw=true)
1
Josh

Utilisez le chemin relatif

le wiki est situé à [repositoryname]/wiki

Les fichiers dans le référentiel sont situés à [repositoryname]/raw/master/[file path in repository]

Alors utilisez simplement le chemin relatif: ../raw/master/[file path in repository]

1
Samuel P

Je mets les images et les PDF dans mes wikis. Je clone le wiki et ajoute un répertoire images et un files, puis j'utilise le démarquage suivant pour incorporer des liens d'image et ajouter des liens de fichier:

Images:

[[/images/path/to/image.ext|ALT TEXT]]

La barre oblique n'est pas nécessaire si vos pages wiki se trouvent toutes au niveau racine, mais j'utilise des sous-répertoires et un chemin absolu est résolu correctement et reste simple.

Des dossiers:

[link text](files/path/to/file.ext "ALT TEXT")

Remarque: pas de barre oblique du chemin files du wiki à résoudre correctement en tant que lien dans ce format.

Je l'ai documenté dans un GitHub Gist

1
Subfuzion

Pour incorporer une vignette d'image externe, utilisez ce qui suit, ![Image](<external link to the image>)

0
delta24

Le commentaire de @ Drew Noakes à la question d'origine l'a fait pour moi:

La syntaxe de l'image que je voulais afficher:

[[/images/imageName.png]]

Cette image ne s’affiche que lors du changement de nom:

wikiPage.md --> wikiPage.wiki

La structure de dossiers suivante a été utilisée dans le référentiel wiki:

repository.wiki
   |--wikiPage.wiki
   |--images
        |--imageName.png

MAIS:

La syntaxe dans .wiki diffère des fichiers .md.

0
rocksteady