Bilder in ein GitHub-Wiki-Repository (Gollum) einbetten?

84

Die Github-Wikis werden von einem separaten Git-Repository und dann vom Hauptprojekt-Repository unterstützt.

In diesem Beitrag des Github-Teams klingt es so, als ob Sie in der Lage sein sollten, Links zu Bildern zu erstellen, die im Wiki-Repository im Wiki-Markup gespeichert sind.

Bilder und Ordner

Sie können jetzt auf Bilder verweisen, die im Git-Repository gehostet werden.

Ich habe das Repository meines Wikis ausgecheckt und einen Ressourcenordner und ein Bild hineingeschoben. Meine Frage ist, wie gehe ich mit diesem Bild um ?

Ist das überhaupt möglich oder habe ich etwas falsch verstanden?

James McMahon
quelle
Es gibt eine Github-FAQ über das Hinzufügen von Bildern zu Wikis, aber es gibt keine Infos über kurze relative Bild-URLs, die hier diskutiert werden
k3b

Antworten:

55

Um relative Pfade zu verwenden, gehen Sie wie folgt vor:

[[foo.jpg]]

Weitere Informationen finden Sie auf der Seite des Demo-Wikis zu Bildern .

Benjamin Oakes
quelle
Dies ist der Hardcodierung des Pfads vorzuziehen. Ich konnte nur nicht herausfinden, wie man mit dieser Methode Alternativtext erstellt. Oh, und die Bilder in dieser Demo werden für mich nicht geladen.
James McMahon
Wenn Sie git: //github.com/mojombo/gollum-demo.git klonen und dann ausführen gollum, werden Sie sie sehen. :)
Benjamin Oakes
4
Vielleicht fehlt mir etwas ... aber die [[wiki syntax]]Arbeiten in diesem Wiki, bei denen ich helfe: github.com/newhavenrb/conferences/wiki/WindyCityRails-2012 Vielleicht versuchen Sie dies mit einer README?
Benjamin Oakes
2
Die Wiki-Syntax wird durch die Dateierweiterung bestimmt. .wikiverwendet den Mediawiki-Stil. .mdverwendet den Markdown-Stil (Antwort von RyanQ).
Drew Noakes
3
Diese Antwort funktioniert nicht mehr, siehe @ Werners Antwort unten (in Kürze verwenden! [Text] (images / someimage.png) und speichern - wird nicht in der Vorschau
angezeigt
96

Für Zuschauer, die Bilder in einem Github-Wiki anzeigen möchten, habe ich die folgende Methode gefunden:

  • Gehen Sie zur Registerkarte "Git Access" auf der Wiki-Seite Ihres Repositorys und rufen Sie den SSH-Pfad ab, der ungefähr so ​​lauten sollte: [email protected]: USER / REPO.wiki.git wobei USER Ihr Kontoname und REPO der ist Repository-Name.
  • Verwenden Sie auf Ihrem lokalen Computer das Git-Befehlszeilentool, das Sie in das lokale Verzeichnis Ihrer Wahl cd möchten, und rufen Sie das Repository über auf

    Git-Klon [email protected]: USER / REPO.wiki.git

  • Jetzt in diesem Repository erstellen Sie ein Bildverzeichnis, ich nenne es "Bilder" und lege alle gewünschten Bilder in das Verzeichnis

  • Und dann schiebe dein Wiki-Git-Verzeichnis auf Github
  • Sie können die Bilder auf der Registerkarte "Seiten" nicht physisch sehen. Wenn Sie jedoch einfach auf die Bilder in einem lokalen Link verweisen, sollten Sie sie sehen können. Beispiel mit Markdown unten:

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

  • Sie können das Bild auch als Link selbst einbetten, indem Sie es wie folgt weiter einschließen:

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

Sie können Ihrer lokalen Kopie auch Unterverzeichnisse hinzufügen, um das Wiki besser zu organisieren, da sie auf der Registerkarte "Seiten" einfach aufgelistet werden. Beachten Sie jedoch, dass die Registerkarte "Seiten" das Verzeichnis auch dann nicht auflistet, wenn das neue Verzeichnis verschoben wird.

Ryan Q.
quelle
31

Keine der Antworten scheint zu funktionieren, wenn ein Bild hinzugefügt wird readme.md. Ich habe jedoch eine Lösung:

Wenn die URL des Bildes lautet:

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

Durch Ersetzen blobdurch erhalten rawSie die URL des Rohbilds:

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

Jetzt würden Sie das Bild mit normalem Markdown einbetten:

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

UPDATE: Ab sofort liefert GitHub auch Rohbilder aus einer anderen Subdomain raw.github.com. Sie können also auch Folgendes verwenden:

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

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

da ich bin
quelle
Genial ... so konnte ich direkt in einem GitHub-Kommentar auf ein Bild verlinken. :) github.com/mccalltd/AttributeRouting/issues/…
Leniel Maccaferri
1
hat für mich gearbeitet danke. Schade, dass es nicht mit relativen Pfaden funktioniert
Elvis Ciotti
26

Relative Pfadarbeit für mich so:

Homepage des Wikis:

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

Unterseite des Wikis:

![text](images/someimage.png)

Beachten Sie, dass beim Erstellen einer Vorschau das Bild nicht angezeigt wird. Ich habe es gespeichert.

Werner
quelle
3
Dieser Tipp von @Werner ist sehr wichtig. (Vielen Dank!) Aus irgendeinem Grund unterscheidet sich die Homepage Ihres Wikis von allen anderen. Auf der Homepage benötigen Sie also wiki / path / foo.ext, wo alle anderen Seiten path / foo.ext verwenden . Relative Referenzen zurück zu Ihrem eigenen Repo sind viel besser als absolute Referenzen. Wenn Sie Ihr Projekt verschieben, klonen oder offline ändern, funktioniert immer noch alles, egal wo sich das Repo befindet. Beachten Sie auch, dass diese! [Text] (Link) -Syntax für die meisten Zwecke in Ordnung ist. Wenn Sie jedoch Ihr Bild ausrichten müssen, müssen Sie ein Standard-HTML-IMG-Tag verwenden.
TonyG
Dies scheint die aktuellere Antwort zu sein
Albfan
Was ist die Niederlassung hier?
Jonny
15

Wenn Sie ein Bild schnell per Drag & Drop hochladen möchten, können Sie Folgendes ausführen (wenn auch hackisch):

Erstellen Sie ein Dummy-Problem. Ziehen Sie Ihr Bild dorthin und legen Sie es dort ab. Kopieren Sie den hochgeladenen Markdown-Bildcode und fügen Sie ihn in Ihr Wiki ein.

Nachdem Sie das Problem einmal erstellt haben, können Sie es dazu beliebig oft verwenden.

Ich hoffe, dies hilft jedem, der nach einer schnellen Lösung sucht, ohne dass sich das Bild im Repo befinden muss.

tiby
quelle
8

Hier ist ein praktischer Weg, dies zu tun:

  • Gehen Sie zu jedem Thema auf Github
  • Im Kommentarbereich können Sie Dateien anhängen, einfach per Drag & Drop Ihr ​​Bild auswählen oder einfügen
  • Kopieren Sie den im Textbereich angezeigten Code / Link
  • Fügen Sie es in das Wiki ein
  • Gewinn!

Sie müssen im Vergleich zur @ tiby-Lösung nicht einmal ein Problem erstellen oder ändern!

Jacob Yiendedoi
quelle
2
Danke dir! Ich frage mich, warum Github diese Funktionalität auf ihren Wiki-Sites nicht unterstützt.
Sven
5

James 'URL-Format hat bei mir nicht funktioniert, vielleicht wurde es geändert. Ich habe benutzt:

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

Wo pathtoimageist optional.

Ninjakannon
quelle
@ JonathanLeung es ist nur ein Beispiel für die Syntax für einen Link, den es eigentlich nirgendwo gibt
James McMahon
2

Schließlich wurden die Bilder mit der von nerdwin beschriebenen Methode in das Repository aufgenommen und mit im Wiki angezeigt ![test](test.jpg)

Rupweb
quelle
1

Der folgende Markdown verweist auf ein Bild in Ihrem GitHub- Repo aus dem entsprechenden GitHub- Wiki

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

Im obigen Beispiel wird davon ausgegangen, dass Sie in Ihrem Repo die folgende Dateistruktur haben

  • Pfad
    • ToAssets
      • Im
        • Repo.png

Wenn ich für ein Beispiel aus der realen Welt dieses Bild in Github aus dem entsprechenden Wiki referenzieren möchte, würde ich diesen Markdown verwenden

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

Vorsichtsmaßnahmen

  1. Fallangelegenheiten
  2. Wenn Sie sich auf der speziellen Homepage des Wikis befinden, müssen Sie nicht mit dem ../ aufsteigen. In meinem obigen Beispiel wäre der richtige Link

Für die Homepage:

![Azure App Settings](blob/master/TrelloWorld/TrelloWorld.Server/Assets/Azure_AppSettings.png?raw=true)
Josh
quelle
Fallangelegenheiten. Repo.png ist nicht dasselbe wie repo.png
Josh
Wenn Sie sich auf der Homepage des Wikis befinden, ändert sich dies geringfügig. Sie müssen die ../ fallen lassen. Der Link wäre (blob / master / Pfad / ToAsset / In / Repo.png? Raw = true)
Josh
Ist der Zweig des gehosteten Images wichtig?
Jonny
Ich habe es nicht ausprobiert, aber wenn ich mir die URLs in meinem Beispiel anschaue, glaube ich, dass es so wäre. In meinen Beispielen gehe ich davon aus, dass alles im Master ist. Sie könnten vermutlich einfach das Wort "Master" in meinem Beispiel in den Zweig ändern, in dem sich das Bild befindet.
Josh
1

Verwenden Sie den relativen Pfad

Das Wiki befindet sich unter [repositoryname]/wiki

Die Dateien im Repository befinden sich unter [repositoryname]/raw/master/[file path in repository]

Verwenden Sie also einfach den relativen Pfad: ../raw/master/[file path in repository]

Samuel P.
quelle
Ich musste ../../in einer Unterseite tun , also Vorsicht, es ist relativ zum aktuellen
Seitenpfad
Wenn Sie keinen Zweig namens Master haben?
Jonny
1

Ich habe sowohl Bilder als auch PDFs in meine Wikis eingefügt. Ich klone das Wiki und füge ein imagesund ein filesVerzeichnis hinzu. Dann verwende ich den folgenden Markdown, um Bildlinks einzubetten und Dateilinks hinzuzufügen:

Bilder:

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

Der führende Schrägstrich ist nicht erforderlich, wenn sich Ihre Wiki-Seiten alle auf der Stammebene befinden, aber ich verwende Unterverzeichnisse und ein absoluter Pfad wird korrekt aufgelöst und hält die Dinge einfach.

Dateien:

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

Beachten Sie, dass kein führender Schrägstrich für den Wiki- filesPfad als Link in diesem Format korrekt aufgelöst werden kann.

Ich habe dies detaillierter in einem GitHub-Gist dokumentiert

Subfuzion
quelle
0

Verwenden Sie Folgendes, um eine Miniaturansicht eines externen Bildes einzubetten: ![Image](<external link to the image>)

delta24
quelle
0

Der Kommentar von @ Drew Noakes zur ursprünglichen Frage hat es für mich getan:

Die Syntax für das Bild, das angezeigt werden soll:

[[/images/imageName.png]]

Dieses Bild wurde nur beim Umbenennen angezeigt:

wikiPage.md --> wikiPage.wiki

Die folgende Ordnerstruktur wurde im Wiki-Repository verwendet:

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

ABER:

Die Syntax in .wiki unterscheidet sich von .md-Dateien.

rocksteady
quelle
0

Viele der Antworten haben bei mir nicht funktioniert, hier ist, was schließlich funktioniert hat:

![](../raw/master/Images/ImportantImage.png)

Verwenden des Editor-Modus "Markdown" und einer Unterseite wie:

https://github.com/project/repo/wiki/MyPage

-John

JohnKoz
quelle