Login/Register
Embedding images inside a GitHub wiki (gollum) repository?
Asked Answered
Solved githubwikigollum-wiki
B

16

92

The Github wikis are backed by a separate git repository then the main project repository.

This post by the Github team makes it sound like you should be able to link to images stored in the wiki repository inside the wiki markup.

Images and Folders

You can now reference images hosted inside the Git repository.

I've checked out my wiki's repository and pushed a resource folder and an image into it. My question is, how do I go about using this image?

Is this even possible or have I misunderstood something?

Bemock answered 6/4, 2012 at 15:22 Comment(3)
There is a github-faq about adding-images-to-wikis but it has no infos about short relative image urls discussed here – Reincarnate
Typical image urls are rendered with Camo. – Mlawsky
Feb. 2022: there is an official support for uploading images to your Wiki pages. See my answer below. – Won
D
56

To use relative paths do:

[[foo.jpg]]

For more info, see the demo wiki's page on images.

Devindevina answered 2/5, 2012 at 13:34 Comment(14)
This is preferable to hardcoding the path. Only thing I couldn't figure out is how to create alt text using this method. Oh and the images in that demo don't load for me. – Bemock
If you clone git://github.com/mojombo/gollum-demo.git and then run gollum, you'll see them. :) – Devindevina
Ah, they have alt text on that demo using [[file|alt=alt text]]. – Bemock
Marking this as the answer, I prefer this relative path method to the method I posted. – Bemock
It wasn't obvious to git clone what's on the last tab of the wiki, then use regular commands to add a directory for images, add a file, commit, push, and then link to the image. No problem once you do it once, but I think this process could be easily automated on github's side. – Sinusoidal
@Sinusoidal Agreed. However, gollum is open source. It might be a feature they'd welcome. – Devindevina
One thing I'd add is that I'd never remove the ability to configure files in the git repository as that is in some ways way better than waiting for individual files to upload. I.e., one can put all the images for an article in a directory, and easily get them uploaded. – Sinusoidal
The above no longer works. I've forked the above repo and update it, example here github.com/thomaswelton/gollum-demo/blob/patch-1/Mordor/… This relative path works ![Eye of Sauron](eye.jpg) – Theresatherese
Maybe I'm missing something... but the [[wiki syntax]] works in this wiki that I help with: github.com/newhavenrb/conferences/wiki/WindyCityRails-2012 Perhaps you're trying this with a README? – Devindevina
Worth mentioning that the filename is case sensitive! Eg [[images/foo.jpg]] won't work when your image is named Foo.jpg – Brevier
The wiki syntax is determined by the file extension. .wiki uses mediawiki style. .md uses markdown style (RyanQ's answer). – Monthly
@Thomas Welton the github clone is not available any more – Reincarnate
@JamesMcMahon, my answer shows how to add the alt text. – Liddy
This answer no longer works, see @Werner's answer below (in brief, use ![text](images/someimage.png) and save - won't show in preview) – Cupule
O
107

For viewers wishing to view images on a github wiki I've found the following method to work:

  • Go to the "Git Access" tab inside the wiki page of your repository and retrieve the SSH path which should be some thing like: [email protected]:USER/REPO.wiki.git where USER is your account name and REPO is the repository name.

  • On your local machine use whichever Git command line tool you wish to cd into your local directory of choice and get the repository via

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

  • Now within this repository create an image directory, I'll call it "images" and put whatever images you want into the directory

  • And then push your wiki git directory to github

  • You will not be able to physically see the images in say the "Pages" tab, but if you simply reference the images in a local link you should be able to see them. Example with Markdown below:

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

  • You may also embed the image as a link itself by wrapping it further like so:

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

You can also add subdirectories within your local copy to help organize the wiki since the "pages" tab simply lists them out. Keep in mind, however, that even when the new directory is pushed the "pages" tab doesn't list the directory.

Oswaldooswalt answered 17/9, 2012 at 4:49 Comment(2)
Here is a post explaining what @urig suggested which is the solution to follow. Super cool. mikehadlow.blogspot.com/2014/03/… – Selfpossessed
@Selfpossessed the answer was posted by Ryan Q. I only made a minor edit to it. :) – Inconvincible
D
56

To use relative paths do:

[[foo.jpg]]

For more info, see the demo wiki's page on images.

Devindevina answered 2/5, 2012 at 13:34 Comment(14)
This is preferable to hardcoding the path. Only thing I couldn't figure out is how to create alt text using this method. Oh and the images in that demo don't load for me. – Bemock
If you clone git://github.com/mojombo/gollum-demo.git and then run gollum, you'll see them. :) – Devindevina
Ah, they have alt text on that demo using [[file|alt=alt text]]. – Bemock
Marking this as the answer, I prefer this relative path method to the method I posted. – Bemock
It wasn't obvious to git clone what's on the last tab of the wiki, then use regular commands to add a directory for images, add a file, commit, push, and then link to the image. No problem once you do it once, but I think this process could be easily automated on github's side. – Sinusoidal
@Sinusoidal Agreed. However, gollum is open source. It might be a feature they'd welcome. – Devindevina
One thing I'd add is that I'd never remove the ability to configure files in the git repository as that is in some ways way better than waiting for individual files to upload. I.e., one can put all the images for an article in a directory, and easily get them uploaded. – Sinusoidal
The above no longer works. I've forked the above repo and update it, example here github.com/thomaswelton/gollum-demo/blob/patch-1/Mordor/… This relative path works ![Eye of Sauron](eye.jpg) – Theresatherese
Maybe I'm missing something... but the [[wiki syntax]] works in this wiki that I help with: github.com/newhavenrb/conferences/wiki/WindyCityRails-2012 Perhaps you're trying this with a README? – Devindevina
Worth mentioning that the filename is case sensitive! Eg [[images/foo.jpg]] won't work when your image is named Foo.jpg – Brevier
The wiki syntax is determined by the file extension. .wiki uses mediawiki style. .md uses markdown style (RyanQ's answer). – Monthly
@Thomas Welton the github clone is not available any more – Reincarnate
@JamesMcMahon, my answer shows how to add the alt text. – Liddy
This answer no longer works, see @Werner's answer below (in brief, use ![text](images/someimage.png) and save - won't show in preview) – Cupule
A
33

None of answers seem to work when adding an image in readme.md. I've got a solution though:

If the URL of the image is:

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

Replacing blob with raw gives you the URL of the raw image:

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

Now, you'd embed the image using normal markdown:

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

UPDATE: As of now, GitHub also serves raw images from a different sub-domain raw.github.com. So, you can also use:

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

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

Andradite answered 18/7, 2012 at 19:47 Comment(2)
Awesome... this allowed me to link to an image directly in a GitHub comment. :) github.com/mccalltd/AttributeRouting/issues/… – Burlington
worked for me thanks. a pity it does not work with relative paths – Mutate
L
28

Relative path work for me like this:

home page of the wiki:

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

sub page of the wiki:

![text](images/someimage.png)

Note that when doing a preview the image will not show, I had save it.

Lengthen answered 18/2, 2013 at 7:34 Comment(4)
This tip by @Lengthen is Very important. (Thank you VERY much!) For some reason the home page of your wiki is different from all others, so on the home page you need wiki/path/foo.ext where all other pages use path/foo.ext. Relative references back to your own repo are much better than absolute references. If you move or clone your project, or modify it offline, everything still works no matter where the repo is. Also note that this ![text](link) syntax is fine for most purposes but if you need to align your image you must use a standard HTML IMG tag. – Chiropody
Seems this is the more up-to-date answer – Magnolia
What is the branch here? – Itching
Note that when doing a preview the image will not show, I had save it. still a very handy tip for those of us who chose not to keep it in mind. – Mlawsky
B
16

If you want to quickly upload an image with drag/drop, you can perform the following (albeit hackish):

Create a dummy issue; drag & drop your image there; copy/paste the uploaded markdown image code to your wiki;

After you create the issue once, you can use it any number of times to do this.

Hope this helps anyone looking for a quick fix, without needing to have the image reside in the repo.

Broadleaf answered 21/11, 2013 at 11:32 Comment(0)
V
10

Here is a practical way to do it:

  • Go to any issue on github
  • In the comment section you can attach files, just drag/drop, select or paste your image
  • Copy the code/link displayed in the textarea
  • Paste it in the wiki
  • Profit !

You don't even have to create or modify any issue compared to @tiby solution !

Vc answered 22/2, 2017 at 17:10 Comment(1)
Thank you! I wonder why github does not support this functionality on their wiki sites. – Phonsa
B
6

Figured it out.

The url is formatted as follows

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

pathtoimage is optional

Bemock answered 6/4, 2012 at 15:44 Comment(1)
That works, but is tightly coupled to how GitHub stores files. If they change their paths, it would break. It would also break when running the wiki locally via gollum. – Devindevina
T
5

James' URL format did not work for me, perhaps it has been changed. I have used:

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

Where pathtoimage is optional.

Theisen answered 31/5, 2012 at 15:49 Comment(1)
@JonathanLeung it is just sample of the syntax for a link it doesn't actually go anywhere – Bemock
B
2

Finally got the images into repository using the method described by nerdwin and got them to display in the wiki using ![test](test.jpg)

Bitthia answered 7/4, 2014 at 16:17 Comment(0)
A
1

The following markdown will reference an image in your GitHub repo from within your corresponding GitHub wiki

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

The above example assumes that you have the following file structure in your repo

  • Path
    • ToAssets
      • In
        • Repo.png

For a real world example, if I wanted to reference this image in github from the corresponding wiki, I'd use this markdown

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

Caveats

  1. Case matters
  2. If you are on the special Home page of the wiki, you do not need to go up a level with the ../ In my example above, the correct link would be

For Home Page:

![Azure App Settings](blob/master/TrelloWorld/TrelloWorld.Server/Assets/Azure_AppSettings.png?raw=true)
Acetyl answered 3/4, 2015 at 21:18 Comment(4)
Case matters. Repo.png is not the same as repo.png – Acetyl
If you are on the home page of the wiki, this changes slightly. You need to drop the ../. The link would be (blob/master/Path/ToAsset/In/Repo.png?raw=true) – Acetyl
Does branch of the hosted image matter? – Itching
I haven't tried it, but by looking at the URLs in my sample, I believe it would. In my samples I assume everything is in master. You could presumably just change the word "master" in my sample to whatever branch the image is in. – Acetyl
L
1

I put both images and PDFs in my wikis. I clone the wiki and add an images and a files directory, then use the following markdown to embed image links and add file links:

Images:

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

The leading slash isn't necessary if your wiki pages are all at the root level, but I use subdirectories and an absolute path resolves correctly and keeps things simple.

Files:

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

Note, no leading slash for the wiki files path to resolve correctly as a link in this format.

I documented this with more detail in a GitHub gist

Liddy answered 25/2, 2016 at 5:36 Comment(0)
B
1

Use the relative path

the Wiki is located at [repositoryname]/wiki

The files in the repository are located at [repositoryname]/raw/master/[file path in repository]

So just use the relative path: ../raw/master/[file path in repository]

Biagio answered 28/2, 2016 at 21:8 Comment(2)
I had to do ../../ in a sub-page, so beware it's relative to the current page path – Putrescine
If you have no branch named master? – Itching
S
1

The comment from @Drew Noakes to the original question did it for me:

The syntax for the image I wanted to be displayed:

[[/images/imageName.png]]

This image was only displayed when renaming:

wikiPage.md --> wikiPage.wiki

The following folder structure was used in the wiki repository:

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

BUT:

The syntax in .wiki differs from .md files.

Schuller answered 21/12, 2016 at 7:26 Comment(0)
W
1

Since Feb. 2022, you can simply drag and drop, select or paste the file.

That will upload the image to your Wiki pages, and store it in https://user-images.githubusercontent.com

https://user-images.githubusercontent.com/3369400/153617338-24d3895c-dc02-4267-ba62-cf4529d03805.mp4

Won answered 14/2, 2022 at 22:18 Comment(2)
But if you do a git clone on the wiki the image links will point to that github usercontent URL right? So it's not self contained any more, if you git clone the wiki you can't see the images offline? – Privation
@Privation I haven't tested it, but it is possible indeed. – Won
D
0

To embed an external image thumbnail, use the following, ![Image](<external link to the image>)

Divisible answered 4/3, 2014 at 3:20 Comment(0)
R
0

Many of the answers didn't work for me, here's what finally worked:

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

Using the "Markdown" editor mode and a sub-page such as:

https://github.com/project/repo/wiki/MyPage
Radford answered 16/4, 2020 at 14:23 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.