Allow images from GitHub domain on the wiki

Feedback
1

Could the gramps-projects allow GitHub images to make drafting addon documentation easier?

Uploading screen captures to the wiki is awkward.

And while in beta, the dialogs for addons are in continous revision but the wiki image system is too wasteful … it maintains a history of “throwaway” images.

If we could use GitHub images (posted to repositories for use in README.md docs) during the early documentation, then it becomes easier to support quality documentation during the “Addon” beta cycle.

This Discourse domain might be another trusted image source.

(When the addon goes into broad release, the image should be committed to the wiki.)

from Google AI Overview
Images from other domains can be used in MediaWiki if the system administrator enables the option and a user uploads the file. By default, images from outside the wiki are not displayed to prevent malicious users from collecting visitor information.

To enable external images, you can:

  1. Add $wgAllowExternalImages = true; to LocalSettings.php
  • To restrict the list of domains, use $wgAllowExternalImagesFrom

Once enabled, users can add images from external domains by pasting the image’s full URL into the wiki text. For example, https://domain.com/images/image_file.png will display the image.

If you want to use images from a trusted source, like your own domain, you can set $wgAllowExternalImages to false and use $wgAllowExternalImagesFrom

1 Like
2

Sample MediWiki markup: for the native wiki domain and another with a GitHub target.

[[https://gramps-project.org/wiki/images/7/75/ChartsCategory-PedigreeView-PersonContextMenu-showing-Children-example-52_he.png|thumb|right|450px|Addon GUI (e.g. detached gramplet screen capture)]]

[[https://github.com/kajmikkelsen/HistContext/blob/master/gramplet.png|thumb|right|450px|Addon GUI (e.g. detached gramplet screen capture)]]

Or with standard HTML instead of markup:

<img src="https://github.com/kajmikkelsen/HistContext/blob/master/gramplet.png" width="450" align="right" alt="Addon GUI (e.g. detached gramplet screen capture)" />
3

I believe the wiki already allows this because the on the portal translators page it shows an external image from the weblate website ( see the following template Template:Translators/Weblate looking at the templates view source page the links to the images are plain urls eg

https://hosted.weblate.org/widgets/gramps-project/-/287x66-grey.png < br />
https://hosted.weblate.org/widgets/gramps-project/-/gramps/multi-auto.svg.png

@sam888 so maybe just the domain needs to be whitelisted?

2 Likes
4

Checked the wiki and see that I already added urls for github and gramps discourse back in May 2021 , but as @Gioto points out the only format accepted using this method are bare (plain) urls (but you can embed the url in a table).

Current settings from Gramps mediawiki ( LocalSettings.php )

#### Allows external images from select urls added 2021/06/05 (sm)###
$wgAllowExternalImagesFrom = [
    'https://hosted.weblate.org/',
    'https://gramps.discourse.group/',
	'https://github.com/'	
];

This does not guarantee that the listed websites allow hotlinking / embedding an image from them.

my reference:

2 Likes
5

I tried previewing bare URL tests for a .png from Kaj’s HistContext repository. And the wiki just rendered the URL…maybe ‘Preview’ isnt enough?

https://github.com/kajmikkelsen/HistContext/blob/master/gramplet.png

(Discourse tries but says the bare URL is a binary file. So had to wrap the URL with a link markup.)

6

I’m guessing on mediawiki with external images a preview will not work until added based on my test as the weblate url does not show a preview also!

@gramps-project For github you may also need to add the supplemental url

https://raw.githubusercontent.com

so that linking to a raw image from github works?

https://raw.githubusercontent.com/kajmikkelsen/HistContext/refs/heads/master/gramplet.png

Have not tested discourse image linking yet. seems to use

https://canada1.discourse-cdn.com

based on looking at about twenty images on gramps discourse, so try that one please?

3 Likes
7

Ok, added the extra urls

#### Allows external images from select urls added 2021/06/05 (sm)###
#### updated 2023/11/09 (sm) https://gramps.discourse.group/t/allow-images-from-github-domain-on-the-wiki/6402 ###
$wgAllowExternalImagesFrom = [
    'https://hosted.weblate.org/',
    'https://gramps.discourse.group/',
    'https://raw.githubusercontent.com/',
    'https://canada1.discourse-cdn.com/',
	'https://github.com/'	
];

and can see on your sandbox page that the images are showing.

Thanks for testing and working that out :slight_smile:

@emyoulation Please test.

2 Likes
8

Thanks. That makes this the test data to be used for writing the WikiContributor docs.

From Discourse for @kmikkels HistContext gramplet on wiki:

https://gramps.discourse.group/t/my-first-gramplet-for-gramps-5-2/6348/63

when editing the posting, this is how Discourse markup IDs the image:

![image|432x500, 75%](upload://8p4psndyzjSvbdlG9Ih7qEe6wgY.png)

right-click to open image in new window:

https://global.discourse-cdn.com/free1/uploads/gramps/original/2X/3/3ae6e85a9c69d04cd4dd50c8fbfc99bc4ed2124c.png

From GitHub

https://github.com/kajmikkelsen/HistContext/blob/master/gramplet.png wrapped with server content

https://github.com/kajmikkelsen/HistContext/blob/master/gramplet.png?raw=true just shows as URL

https://raw.githubusercontent.com/kajmikkelsen/HistContext/blob/master/gramplet.png bad link

https://raw.githubusercontent.com/kajmikkelsen/HistContext/refs/heads/master/gramplet.png

1 Like
9

@Gioto thanks very much! The tests works. Time to build the transclusion template.
How did you suss out the /refs/head/ portion of the GitHub URL?

@gramps-project Thanks for the new trusts!

1 Like
10

Only experimentation and a bit of luck!

11

Darn. We are going to have a structured way to extract that part of the path if it is going to be part of the new addon wiki documentation template.

There is a reproducible method for extracting the Discourse image path. We will need something for similar for GitHub images. (Since they could be in branches, we cannot assume they will always be in a refs/head/ path.)

1 Like
14

It seems like viewing the GitHub image file in a new window has the https://raw.githubusercontent.com/ URL in the new window’s address bar.

Then pasting that URL in a line of the MediaWiki page will render the image on the page… at 100% size. Parameters (like size or alignment) are not supported with external images. .png, .jpg, and .gif are supported supported as external image links in MediaWiki. .svg, WebP is not natively supported.

Now we have to find a process for sussinng out a URL for re-using a Discourse image.

15

@ztlxltl has asked for a template for creating an “Addon:” wiki page. (Similar to the “How do I…?” template )

My first thought was directly transposing the developer’s README.md markdown into MediaWiki markdown and subbing in the raw URL for each image. (There’s an removed {see the diff} experiment of this for FTV on User:Ztlxltl page. The image substitution worked for the .png but not the .svg image. Had to upload that to a MediaWiki file.)

But the template also need the Language bar, the 3rd Party Addon note at the top. And a table row template for cross-referencing the new Addon in the 5.2 addons table template.

Nick has mentioned the past generating an addon list for the table and a plugin doc. But any movement towards that is on hold until our MediaWiki instance can have the Lua extension.

16

Maybe a developer audience Text Report could output a table listing for a selected registered Plugin? And another report could make the shell of a wiki page? (At some point in the future, it will probably make sense to spin out wiki pages for all the core plugins. This would simplify the flow of the wiki.)