Server UI Changes

README.md

@@ -16,14 +16,20 @@ We use [GitHub markdown](https://guides.github.com/features/mastering-markdown/)
 
 Note that we use British English spelling and grammar conventions.
 
-## Adding pictures
+## Adding screenshots
 
-Use the `{{site.url}}` variable to call an existing image in the corresponding directory for that language. This ensures the correct URL is used:
+In order to keep the size of the respository under control when images change over time, we do not store screenshots locally. Instead we use Jekyll's `include` function to call a file containing an external URL to the image itself:
 
-`<img src="{{site.url}}/assets/img/en-screenshots/mixer-channles.png" …`
+`<img src="{% include img/en-screenshots/main-screen-default.inc %}"  …`
 
 If you want to add a new image, use .png format if possible, and if it’s not a screenshot, ask about where you should store it. Localised images must go in a directory for that language (see the example for English, above).
 
+To get the URL for the `.inc` file, open a Github issue (in any repository) and add your image to it. Github will generate a URL for it like this:
+
+`![your-image-name](https://user-images.githubusercontent.com/45617 … .png)`
+
+Put that URL (only the part within the brackets) into the `.inc` file, saving that in the appropriate directory to be used as above for `<img src=`. Note that because Github generates unique "anonymous" URLs for every image, the `include` method allows us easily to manage the same image used in multiple places if necessary. 
+
 ### Style and tone
 
 Please have a look at our [style and tone guide](https://jamulus.io/contribute/Style-and-Tone).

_includes/img

@@ -0,0 +1 @@
+../assets/img

_translator-files/README.md

@@ -8,7 +8,7 @@ Proceed as follows:
 - Navigate to `_translator-files/po/LANG/`. Translate the content of the .po files in your editor of choice (Poedit, OmegaT...).
 - Change the `lang: en` parameter in the files containing it at the beginning of the file to your language code (it, fr, de, etc.) and make sure the `permalink: [parameter]` (e.g. /wiki/Client-Troubleshooting) stays the same.
 - At times there are links to other docs or specific paragraphs in other parts of the website: `[translate this](don't translate this#translate-this-but-don't-use-capitals)`. Make sure the last part uses the exact same words as the relevant paragraph title.
-- Some documents contain links to screenshots. Make sure you change the language code in them to your own. You can create screenshots for your language in `/assets/img/[LANG]-screenshots` - just replace them (if they exist already in English) or create them using the English ones as a guide.
+- Some documents contain links to screenshots. Make sure you change the language code in them to your own. You can create screenshots for your language in `/assets/img/[LANG]-screenshots` - note that we do not store these image locally but instead use include files calling an external URL to them. Please see README.md on the website repository for further information. Also note that screenshots that do not need to be localised are symlinked to the English version from each `[LANG]-screenshots` directory.
 - There are documents containing portions of text that do not require translation, e.g. scripts, links, etc., and which may constitute a full segment in your editor. In these cases, please do not leave the translation field empty, but insert the source text into the translation field. In OmegaT go to Options > Editor and enable "Allow translation to be equal to source". If you have chosen "Leave the segment empty" in Options > Editor, the `Ctrl+Shift+R` shortcut will insert it. In Poedit, `Ctrl+B` will copy it over.
 - Submit a Pull Request to the `next-release` branch with the translated .po files.
 - Pull requests for translations should have a title which looks like this: `Update [lang] web translation for [release number]`

_translator-files/po/de/FAQ.po

@@ -164,7 +164,7 @@ msgstr ""
 
 #. type: Plain text
 #: ../wiki/en/FAQ.md:58
-msgid "<img src=\"{{site.url}}/assets/img/en-screenshots/diagram-overview.png\" loading=\"lazy\" alt=\"Diagram showing how Jamulus works\">"
+msgid "<img src=\"{% include img/en-screenshots/diagram-overview.inc %}\" loading=\"lazy\" alt=\"Diagram showing how Jamulus works\">"
 msgstr ""
 
 #. type: Plain text

_translator-files/po/de/Getting-Started.po

@@ -125,10 +125,15 @@ msgstr "Wenn du Jamulus öffnest, siehst du ein Fenster, welches so aussieht:"
 
 #. type: Plain text
 #: ../wiki/en/Getting-Started.md:42
-#, no-wrap
+#, fuzzy, no-wrap
+#| msgid ""
+#| "<figure>\n"
+#| "  <img src=\"{{site.url}}/assets/img/en-screenshots/main-screen-default.png\" loading=\"lazy\" alt=\"Screenshot\" style=\"border: 5px solid grey;\">\n"
+#| "  <figcaption>The main window before you connect to a server</figcaption>\n"
+#| "</figure>\n"
 msgid ""
 "<figure>\n"
-"  <img src=\"{{site.url}}/assets/img/en-screenshots/main-screen-default.png\" loading=\"lazy\" alt=\"Screenshot\" style=\"border: 5px solid grey;\">\n"
+"  <img src=\"{% include img/en-screenshots/main-screen-default.inc %}\" loading=\"lazy\" alt=\"Screenshot\" style=\"border: 5px solid grey;\">\n"
 "  <figcaption>The main window before you connect to a server</figcaption>\n"
 "</figure>\n"
 msgstr ""
@@ -151,10 +156,15 @@ msgstr "Lasse zuerst die anderen Teilnehmer wissen, wer du bist. Klick auf “An
 
 #. type: Plain text
 #: ../wiki/en/Getting-Started.md:52
-#, no-wrap
+#, fuzzy, no-wrap
+#| msgid ""
+#| "<figure>\n"
+#| "  <img src=\"{{site.url}}/assets/img/en-screenshots/settings-profile.png\" loading=\"lazy\" alt=\"Screenshot\" style=\"border: 5px solid grey;\">\n"
+#| "  <figcaption>Let people know who you are</figcaption>\n"
+#| "</figure>\n"
 msgid ""
 "<figure>\n"
-"  <img src=\"{{site.url}}/assets/img/en-screenshots/settings-profile.png\" loading=\"lazy\" alt=\"Screenshot\" style=\"border: 5px solid grey;\">\n"
+"  <img src=\"{% include img/en-screenshots/settings-profile.inc %}\" loading=\"lazy\" alt=\"Screenshot\" style=\"border: 5px solid grey;\">\n"
 "  <figcaption>Let people know who you are</figcaption>\n"
 "</figure>\n"
 msgstr ""
@@ -193,10 +203,15 @@ msgstr "Nun klicke auf “Verbinden” im Jamulus-Hauptfenster, um einem Server
 
 #. type: Plain text
 #: ../wiki/en/Getting-Started.md:68
-#, no-wrap
+#, fuzzy, no-wrap
+#| msgid ""
+#| "<figure>\n"
+#| "  <img src=\"{{site.url}}/assets/img/en-screenshots/connection-setup-window.png\" loading=\"lazy\" alt=\"Screenshot\" style=\"border: 5px solid grey;\">\n"
+#| "  <figcaption>Connect to a server</figcaption>\n"
+#| "</figure>\n"
 msgid ""
 "<figure>\n"
-"  <img src=\"{{site.url}}/assets/img/en-screenshots/connection-setup-window.png\" loading=\"lazy\" alt=\"Screenshot\" style=\"border: 5px solid grey;\">\n"
+"  <img src=\"{% include img/en-screenshots/connection-setup-window.inc %}\" loading=\"lazy\" alt=\"Screenshot of the connection window\" style=\"border: 5px solid grey;\">\n"
 "  <figcaption>Connect to a server</figcaption>\n"
 "</figure>\n"
 msgstr ""
@@ -227,10 +242,15 @@ msgstr "Wenn die Audioeinstellungen fertig sind, kannst du loslegen. Nachdem du
 
 #. type: Plain text
 #: ../wiki/en/Getting-Started.md:81
-#, no-wrap
+#, fuzzy, no-wrap
+#| msgid ""
+#| "<figure>\n"
+#| "  <img src=\"{{site.url}}/assets/img/en-screenshots/main-screen-medium.png\" loading=\"lazy\" alt=\"Screenshot\" style=\"border: 5px solid grey;\">\n"
+#| "  <figcaption>The main window when you are connected to a sever</figcaption>\n"
+#| "</figure>\n"
 msgid ""
 "<figure>\n"
-"  <img src=\"{{site.url}}/assets/img/en-screenshots/main-screen-medium.png\" loading=\"lazy\" alt=\"Screenshot\" style=\"border: 5px solid grey;\">\n"
+"  <img src=\"{% include img/en-screenshots/main-screen-medium.inc %}\" loading=\"lazy\" alt=\"Screenshot\" style=\"border: 5px solid grey;\">\n"
 "  <figcaption>The main window when you are connected to a sever</figcaption>\n"
 "</figure>\n"
 msgstr ""

_translator-files/po/de/Running-a-Server.po

@@ -188,7 +188,7 @@ msgstr ""
 #, no-wrap
 msgid ""
 "<figure>\n"
-"\t<img src=\"{{site.url}}/assets/img/en-screenshots/diagram-public-server.png\" loading=\"lazy\" alt=\"Diagram of connections between clients within a Jamulus Public Server\">\n"
+"\t<img src=\"{% include img/en-screenshots/diagram-public-server.inc %}\" loading=\"lazy\" alt=\"Diagram of connections between clients within a Jamulus Public Server\">\n"
 "<figcaption>How Public Servers work</figcaption>\n"
 "</figure>\n"
 msgstr ""
@@ -208,7 +208,7 @@ msgstr ""
 #, no-wrap
 msgid ""
 "<figure>\n"
-"\t<img src=\"{{site.url}}/assets/img/en-screenshots/diagram-private-server.png\" loading=\"lazy\" alt=\"Diagram of connections between clients within a Jamulus Private Server\">\n"
+"\t<img src=\"{% include img/en-screenshots/diagram-private-server.inc %}\" loading=\"lazy\" alt=\"Diagram of connections between clients within a Jamulus Private Server\">\n"
 "\t<figcaption>How Private Servers work</figcaption>\n"
 "</figure>\n"
 msgstr ""
@@ -328,7 +328,7 @@ msgstr ""
 msgid ""
 "There is one upstream (musician sending to the server) and one downstream (server sending back the mix to the musician)\n"
 "<figure>\n"
-"\t<img src=\"{{site.url}}/assets/img/en-screenshots/bandwidth-diagram.png\" loading=\"lazy\" alt=\"A diagram of Jamulus network bandwidths from different audio qualities ranging from low to high\">\n"
+"\t<img src=\"{% include img/en-screenshots/bandwidth-diagram.inc %}\" loading=\"lazy\" alt=\"A diagram of Jamulus network bandwidths from different audio qualities ranging from low to high\">\n"
 "<figcaption>Calculate bandwidth use </figcaption>\n"
 "</figure>\n"
 msgstr ""
@@ -368,7 +368,7 @@ msgstr ""
 
 #. type: Plain text
 #: ../wiki/en/Running-a-Server.md:152
-msgid "<figure><img src=\"{{site.url}}/assets/img/en-screenshots/server-window-setup.png\" style=\"width:80%; border:5px solid grey;\" loading=\"lazy\" alt=\"Image of the Jamulus server setup window\"></figure>"
+msgid "<figure><img src=\"{% include img/en-screenshots/server-window-setup.inc %}\" style=\"width:80%; border:5px solid grey;\" loading=\"lazy\" alt=\"Image of the Jamulus server setup window\"></figure>"
 msgstr ""
 
 #. type: Plain text
@@ -423,7 +423,7 @@ msgstr ""
 
 #. type: Plain text
 #: ../wiki/en/Running-a-Server.md:177
-msgid "<figure><img src=\"{{site.url}}/assets/img/en-screenshots/server-window-options.png\" style=\"width:80%; border:5px solid grey;\" loading=\"lazy\" alt=\"Image of Jamulus server window options\"></figure>"
+msgid "<figure><img src=\"{% include img/en-screenshots/server-window-options.inc %}\" style=\"width:80%; border:5px solid grey;\" loading=\"lazy\" alt=\"Image of Jamulus server window options\"></figure>"
 msgstr ""
 
 #. type: Plain text

_translator-files/po/de/Software-Manual.po

@@ -86,7 +86,7 @@ msgstr ""
 #, no-wrap
 msgid ""
 "<figure>\n"
-"\t<img src=\"{{site.url}}/assets/img/en-screenshots/main-screen-medium.png\" style=\"border: 5px solid grey;\" loading=\"lazy\" alt=\"Image of the Jamulus main window\">\n"
+"\t<img src=\"{% include img/en-screenshots/main-screen-medium.inc %}\" style=\"border: 5px solid grey;\" loading=\"lazy\" alt=\"Image of the Jamulus main window\">\n"
 "\t<figcaption>Your local mix when connected to a Server</figcaption>\n"
 "</figure>\n"
 msgstr ""
@@ -110,7 +110,7 @@ msgstr ""
 
 #. type: Plain text
 #: ../wiki/en/Software-Manual.md:36
-msgid "<figure><img src=\"{{site.url}}/assets/img/en-screenshots/led-green.png\" style=\"float:left; margin-right:10px;\" loading=\"lazy\" alt=\"Image of a green LED symbol\"></figure>"
+msgid "<figure><img src=\"{% include img/en-screenshots/led-green.inc %}\" style=\"float:left; margin-right:10px;\" loading=\"lazy\" alt=\"Image of a green LED symbol\"></figure>"
 msgstr ""
 
 #. type: Plain text
@@ -121,7 +121,7 @@ msgstr ""
 
 #. type: Plain text
 #: ../wiki/en/Software-Manual.md:40
-msgid "<figure><img src=\"{{site.url}}/assets/img/en-screenshots/led-yellow.png\" style=\"float:left; margin-right:10px;\" loading=\"lazy\" alt=\"Image of a yellow LED symbol\"></figure>"
+msgid "<figure><img src=\"{% include img/en-screenshots/led-yellow.inc %}\" style=\"float:left; margin-right:10px;\" loading=\"lazy\" alt=\"Image of a yellow LED symbol\"></figure>"
 msgstr ""
 
 #. type: Plain text
@@ -132,7 +132,7 @@ msgstr ""
 
 #. type: Plain text
 #: ../wiki/en/Software-Manual.md:44
-msgid "<figure><img src=\"{{site.url}}/assets/img/en-screenshots/led-red.png\" style=\"float:left; margin-right:10px; clear: both;\" loading=\"lazy\" alt=\"Image of a green red symbol\"></figure>"
+msgid "<figure><img src=\"{% include img/en-screenshots/led-red.inc %}\" style=\"float:left; margin-right:10px; clear: both;\" loading=\"lazy\" alt=\"Image of a green red symbol\"></figure>"
 msgstr ""
 
 #. type: Plain text
@@ -219,7 +219,7 @@ msgstr ""
 
 #. type: Plain text
 #: ../wiki/en/Software-Manual.md:82
-msgid "<figure><img src=\"{{site.url}}/assets/img/en-screenshots/connection-setup-window.png\" style=\"border: 5px solid grey;\" loading=\"lazy\" alt=\"Image of a server connection window\"></figure>"
+msgid "<figure><img src=\"{% include img/en-screenshots/connection-setup-window.inc %}\" style=\"border: 5px solid grey;\" loading=\"lazy\" alt=\"Screenshot of the server connection window\"></figure>"
 msgstr ""
 
 #. type: Plain text
@@ -244,7 +244,7 @@ msgstr ""
 
 #. type: Plain text
 #: ../wiki/en/Software-Manual.md:94
-msgid "<figure><img src=\"{{site.url}}/assets/img/en-screenshots/mixer-channles.png\" style=\"float:left; margin-right:10px; margin-bottom:20px; border: 5px solid grey;\" loading=\"lazy\" alt=\"Image of a pair of server mixer controls\"></figure>"
+msgid "<figure><img src=\"{% include img/en-screenshots/mixer-channels.inc %}\" style=\"float:left; margin-right:10px; margin-bottom:20px; border: 5px solid grey;\" loading=\"lazy\" alt=\"Image of a pair of server mixer controls\"></figure>"
 msgstr ""
 
 #. type: Plain text
@@ -334,7 +334,7 @@ msgstr ""
 
 #. type: Plain text
 #: ../wiki/en/Software-Manual.md:132
-msgid "<figure><img src=\"{{site.url}}/assets/img/en-screenshots/settings-profile.png\" style=\"border: 5px solid grey;\" loading=\"lazy\" alt=\"Image of a profile window\"></figure>"
+msgid "<figure><img src=\"{% include img/en-screenshots/settings-profile.inc %}\" style=\"border: 5px solid grey;\" loading=\"lazy\" alt=\"Image of a profile window\"></figure>"
 msgstr ""
 
 #. type: Plain text
@@ -344,7 +344,7 @@ msgstr ""
 
 #. type: Plain text
 #: ../wiki/en/Software-Manual.md:136
-msgid "<figure><img src=\"{{site.url}}/assets/img/en-screenshots/profile-tooltip.png\" style=\"width:30%;\" loading=\"lazy\" alt=\"Image of a tooltip showing profile information\"></figure>"
+msgid "<figure><img src=\"{% include img/en-screenshots/profile-tooltip.inc %}\" style=\"width:30%;\" loading=\"lazy\" alt=\"Image of a tooltip showing profile information\"></figure>"
 msgstr ""
 
 #. type: Plain text
@@ -374,7 +374,7 @@ msgstr ""
 
 #. type: Plain text
 #: ../wiki/en/Software-Manual.md:148
-msgid "<figure><img src=\"{{site.url}}/assets/img/en-screenshots/settings-network.png\" style=\"border: 5px solid grey;\" loading=\"lazy\" alt=\"Image of audio/network settings window\"></figure>"
+msgid "<figure><img src=\"{% include img/en-screenshots/settings-network.inc %}\" style=\"border: 5px solid grey;\" loading=\"lazy\" alt=\"Image of audio/network settings window\"></figure>"
 msgstr ""
 
 #. type: Plain text
@@ -394,7 +394,7 @@ msgstr ""
 
 #. type: Plain text
 #: ../wiki/en/Software-Manual.md:157
-msgid "<figure><img src=\"{{site.url}}/assets/img/en-screenshots/channel-mapping.png\" style=\"float:left; margin-right:10px; margin-bottom:20px;\" loading=\"lazy\" alt=\"Image of Input and output channel mapping\"></figure>"
+msgid "<figure><img src=\"{% include img/en-screenshots/channel-mapping.inc %}\" style=\"float:left; margin-right:10px; margin-bottom:20px;\" loading=\"lazy\" alt=\"Image of Input and output channel mapping\"></figure>"
 msgstr ""
 
 #. type: Plain text
@@ -557,7 +557,7 @@ msgstr ""
 
 #. type: Plain text
 #: ../wiki/en/Software-Manual.md:234
-msgid "<figure><img src=\"{{site.url}}/assets/img/en-screenshots/settings-advanced.png\" style=\"border: 5px solid grey;\" loading=\"lazy\" alt=\"Image of advanced settings window\"></figure>"
+msgid "<figure><img src=\"{% include img/en-screenshots/settings-advanced.inc %}\" style=\"border: 5px solid grey;\" loading=\"lazy\" alt=\"Image of advanced settings window\"></figure>"
 msgstr ""
 
 #. type: Plain text

_translator-files/po/es/FAQ.po

@@ -6,14 +6,14 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: \n"
-"PO-Revision-Date: 2021-12-21 10:41+0100\n"
+"PO-Revision-Date: 2022-01-03 16:12+0000\n"
 "Last-Translator: \n"
 "Language-Team: \n"
 "Language: es\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"X-Generator: Poedit 2.3\n"
+"X-Generator: Poedit 3.0\n"
 
 #. type: YAML Front Matter: lang
 #: ../wiki/en/FAQ.md:1
@@ -167,8 +167,8 @@ msgstr "¿Cómo funciona Jamulus (en general)?"
 
 #. type: Plain text
 #: ../wiki/en/FAQ.md:58
-msgid "<img src=\"{{site.url}}/assets/img/en-screenshots/diagram-overview.png\" loading=\"lazy\" alt=\"Diagram showing how Jamulus works\">"
-msgstr "<img src=\"{{site.url}}/assets/img/es-screenshots/diagram-overview.png\" loading=\"lazy\" alt=\"Diagrama mostrando cómo funciona Jamulus\">"
+msgid "<img src=\"{% include img/en-screenshots/diagram-overview.inc %}\" loading=\"lazy\" alt=\"Diagram showing how Jamulus works\">"
+msgstr "<img src=\"{% include img/es-screenshots/diagram-overview.inc %}\" loading=\"lazy\" alt=\"Diagrama mostrando cómo funciona Jamulus\">"
 
 #. type: Plain text
 #: ../wiki/en/FAQ.md:61