¿Incrustar imágenes dentro de un repositorio de wiki de GitHub (gollum)?


84

Los wikis de Github están respaldados por un repositorio de git separado y luego por el repositorio principal del proyecto.

Esta publicación del equipo de Github hace que parezca que debería poder vincular las imágenes almacenadas en el repositorio wiki dentro del marcado wiki.

Imágenes y carpetas

Ahora puede hacer referencia a imágenes alojadas dentro del repositorio de Git.

Revisé el repositorio de mi wiki y inserté una carpeta de recursos y una imagen en él. Mi pregunta es, ¿cómo hago para usar esta imagen ?

¿Es esto posible o he entendido mal algo?


Hay un github-faq sobre cómo agregar-imágenes-a-wikis, pero no tiene información sobre las URL de imágenes relativas breves que se discuten aquí
k3b

Respuestas:


57

Para usar rutas relativas, haga lo siguiente:

[[foo.jpg]]

Para obtener más información, consulte la página de la wiki de demostración sobre imágenes .


Esto es preferible a codificar la ruta. Lo único que no pude averiguar es cómo crear texto alternativo con este método. Ah, y las imágenes de esa demostración no se cargan para mí.
James McMahon

Si clona git: //github.com/mojombo/gollum-demo.git y luego ejecuta gollum, los verá. :)
Benjamin Oakes

4
Tal vez me esté perdiendo algo ... pero los [[wiki syntax]]trabajos en este wiki con los que ayudo: github.com/newhavenrb/conferences/wiki/WindyCityRails-2012 ¿ Quizás estás intentando esto con un README?
Benjamin Oakes

2
La sintaxis de la wiki está determinada por la extensión del archivo. .wikiusa estilo mediawiki. .mdusa estilo de rebajas (respuesta de RyanQ).
Drew Noakes

3
Esta respuesta ya no funciona, vea la respuesta de @ Werner a continuación (en resumen, use! [Texto] (images / someimage.png) y guarde; no se mostrará en la vista previa)
edmofro

96

Para los espectadores que deseen ver imágenes en una wiki de github, he encontrado el siguiente método para funcionar:

  • Vaya a la pestaña "Git Access" dentro de la página wiki de su repositorio y recupere la ruta SSH que debería ser algo como: git@github.com: USER / REPO.wiki.git donde USER es su nombre de cuenta y REPO es el nombre del repositorio.
  • En su máquina local, use la herramienta de línea de comandos de Git que desee guardar en el directorio local de su elección y obtenga el repositorio a través de

    git clone git@github.com: USER / REPO.wiki.git

  • Ahora, dentro de este repositorio, cree un directorio de imágenes, lo llamaré "imágenes" y pondré las imágenes que desee en el directorio.

  • Y luego empuja tu directorio git wiki a github
  • No podrá ver físicamente las imágenes en la pestaña "Páginas", pero si simplemente hace referencia a las imágenes en un enlace local, debería poder verlas. Ejemplo con Markdown a continuación:

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

  • También puede incrustar la imagen como un enlace envolviéndola más así:

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

También puede agregar subdirectorios dentro de su copia local para ayudar a organizar la wiki, ya que la pestaña "páginas" simplemente las enumera. Sin embargo, tenga en cuenta que incluso cuando se inserta el nuevo directorio, la pestaña "páginas" no muestra el directorio.


31

Ninguna de las respuestas parece funcionar al agregar una imagen readme.md. Aunque tengo una solución:

Si la URL de la imagen es:

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

Reemplazar blobcon rawle da la URL de la imagen sin procesar:

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

Ahora, incrustarías la imagen usando la reducción normal:

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

ACTUALIZACIÓN: A partir de ahora, GitHub también sirve imágenes sin procesar de un subdominio diferente raw.github.com. Entonces, también puedes usar:

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

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


Impresionante ... esto me permitió vincular una imagen directamente en un comentario de GitHub. :) github.com/mccalltd/AttributeRouting/issues/…
Leniel Maccaferri

1
funcionó para mí gracias. una pena que no funcione con rutas relativas
Elvis Ciotti

26

El camino relativo funciona para mí así:

página de inicio de la wiki:

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

subpágina de la wiki:

![text](images/someimage.png)

Tenga en cuenta que al hacer una vista previa, la imagen no se mostrará, la tuve que guardar.


3
Este consejo de @Werner es muy importante. (¡Muchas gracias!) Por alguna razón, la página de inicio de su wiki es diferente de todas las demás, por lo que en la página de inicio necesita wiki / ruta / foo.ext donde todas las demás páginas usan ruta / foo.ext . Las referencias relativas a su propio repositorio son mucho mejores que las referencias absolutas. Si mueve o clona su proyecto, o lo modifica sin conexión, todo seguirá funcionando sin importar dónde se encuentre el repositorio. También tenga en cuenta que esta sintaxis! [Texto] (enlace) está bien para la mayoría de los propósitos, pero si necesita alinear su imagen, debe usar una etiqueta HTML IMG estándar.
TonyG

Parece que esta es la respuesta más actualizada
albfan

¿Qué rama es aquí?
Jonny

15

Si desea cargar rápidamente una imagen con arrastrar / soltar, puede realizar lo siguiente (aunque sea hackish):

Cree un problema ficticio; arrastre y suelte su imagen allí; copie / pegue el código de la imagen de rebaja cargada en su wiki;

Después de crear el problema una vez, puede usarlo tantas veces como desee para hacerlo.

Espero que esto ayude a cualquiera que busque una solución rápida, sin necesidad de que la imagen resida en el repositorio.


8

He aquí una forma práctica de hacerlo:

  • Ir a cualquier problema en github
  • En la sección de comentarios puede adjuntar archivos, simplemente arrastre / suelte, seleccione o pegue su imagen
  • Copie el código / enlace que se muestra en el área de texto
  • Pégalo en la wiki
  • Lucro !

¡Ni siquiera tiene que crear o modificar ningún problema en comparación con la solución @tiby!


2
¡Gracias! Me pregunto por qué github no admite esta funcionalidad en sus sitios wiki.
Sven



2

Finalmente, llevé las imágenes al repositorio usando el método descrito por nerdwin y consiguió que se mostraran en la wiki usando ![test](test.jpg)


1

La siguiente rebaja hará referencia a una imagen en su repositorio de GitHub desde su correspondiente wiki de GitHub

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

El ejemplo anterior asume que tiene la siguiente estructura de archivos en su repositorio

  • Camino
    • Activos
      • En
        • Repo.png

Para un ejemplo del mundo real, si quisiera hacer referencia a esta imagen en github desde la wiki correspondiente, usaría esta rebaja

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

Advertencias

  1. El caso importa
  2. Si estás en la página de inicio especial de la wiki, no necesitas subir un nivel con el ../ En mi ejemplo anterior, el enlace correcto sería

Para la página de inicio:

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

El caso importa. Repo.png no es lo mismo que repo.png
Josh

Si está en la página de inicio del wiki, esto cambia ligeramente. Necesita soltar el ../. El enlace sería (blob / master / Path / ToAsset / In / Repo.png? Raw = true)
Josh

¿Importa la rama de la imagen alojada?
Jonny

No lo he probado, pero al mirar las URL en mi muestra, creo que lo haría. En mis muestras, asumo que todo está en master. Presumiblemente, podría simplemente cambiar la palabra "maestro" en mi muestra a cualquier rama en la que se encuentre la imagen.
Josh

1

Usa la ruta relativa

el Wiki se encuentra en [repositoryname]/wiki

Los archivos del repositorio se encuentran en [repositoryname]/raw/master/[file path in repository]

Así que usa la ruta relativa: ../raw/master/[file path in repository]


Tuve que hacerlo ../../en una subpágina, así que ten cuidado, es relativo a la ruta de la página actual
tutuDajuju

¿Si no tiene una rama llamada master?
Jonny

1

Pongo imágenes y archivos PDF en mis wikis. Clono la wiki y agrego un directorio imagesy un files, luego uso la siguiente rebaja para incrustar enlaces de imágenes y agregar enlaces a archivos:

Imágenes:

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

La barra inclinada no es necesaria si sus páginas wiki están todas en el nivel raíz, pero yo uso subdirectorios y una ruta absoluta se resuelve correctamente y simplifica las cosas.

Archivos:

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

Tenga en cuenta que no hay barra inclinada para que la filesruta de la wiki se resuelva correctamente como un enlace en este formato.

Documenté esto con más detalle en una esencia de GitHub


0

Para incrustar una miniatura de imagen externa, utilice lo siguiente, ![Image](<external link to the image>)


0

El comentario de @ Drew Noakes a la pregunta original lo hizo por mí:

La sintaxis de la imagen que quería que se mostrara:

[[/images/imageName.png]]

Esta imagen solo se mostró al cambiar el nombre:

wikiPage.md --> wikiPage.wiki

La siguiente estructura de carpetas se utilizó en el repositorio wiki:

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

PERO:

La sintaxis en .wiki difiere de los archivos .md.


0

Muchas de las respuestas no funcionaron para mí, esto es lo que finalmente funcionó:

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

Usando el modo de editor "Markdown" y una subpágina como:

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

-Juan

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.