GitHub Wiki How-To for Image and File links

github-wiki-how-to-image-links.md

(After cloning the wiki locally)

Adding Images to a GitHub Wiki Page

• Add images to an images directory (or subdirectory below it) in your wiki repo.

• In wiki page markup embed an image with this link format:

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

  Note the leading / in the path.

  You don't need it if all your wiki docs and image files are located at the top level of the wiki (like when you use the online wiki editor), but if you are working with a clone of the wiki, then you can organize files in subdirectories; and in that case, absolute or relative path specifiers are critical so that the path to the image resolves correctly when editing a doc that is located in a different subdirectory.

• Commit and push changes.

  Note

  • This is not the same as providing a link to an image that is part of your project repo (not the wiki repo).

  • To link to an image in a project repo, need full URL that looks something like:

    [[https://github.com/username/repository/blob/master/img/octocat.png|alt=octocat]]

Linking Files is Similar

• With files in a files directory (or subdirectory below it)

• In markup,

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

• For example,

  [Project Presentation](files/project-presentation.pdf "Project Presentation PDF")

• Commit and push changes.

More About the Link Format for .md or .wiki files

• (https://gist.github.com/subfuzion/0d3f19c4f780a7d75ba2#gistcomment-2684624)

• For an image named myimage.jpg in an images directory (or subdirectory below), the linking format follows by file type:

  .wiki:

  [[images/myimage.jpg]]
  [[/images/myimage.jpg]]
  

  • markdown !()[] syntax will not work

  <img src="images/myimage.jpg">

  • img tag works but only with relative path
  • does not support figure and figcaption tags

  .md:

  [[images/myimage.jpg]]
  [[/images/myimage.jpg]]
  
  ![](../../blob/master/images/myimage.jpg)
  

  • the markdown !()[] syntax works but not relative paths

  <img src="images/myimage.jpg">

  • img tag works but only with relative path

  <figure><img src="images/myimage.jpg"><figcaption>image caption</figcaption></figure>

Trick to Prevent Caching

• (https://gist.github.com/subfuzion/0d3f19c4f780a7d75ba2#gistcomment-2717607)

• to prevent caching and updates working, append '?v_DATE' to the filename:

  !['Example Rig Presets'](https://raw.githubusercontent.com/wiki/schroef/extra-image-list/images/extra-image-list.jpg?v26-09-2018)

Reference Links

• https://help.github.com/articles/adding-images-to-wikis/
• https://help.github.com/articles/relative-links-in-readmes/

how about these images showing up for when you share the page to Facebook the image is blank how can this be fixed?

i am trying to link my png file that when someone click on the png, it would lead them to the github repository or a youtube link. which step is it included?

This might be really late to reply but I think this markup language should work
let me know if it work or there are better ways of doing this.

<a href="https://www.youtube.com/watch?v=your-video-id">
  <img src="path-to-your-image.png" alt="Click me!" />
</a>

Greetings aadil442 and loiwai,

I've found this: github-add-youtube-video and think it might help.

Cheers !