python-novice-gapminder icon indicating copy to clipboard operation
python-novice-gapminder copied to clipboard

Links to images changed to absolute

Open dpshelio opened this issue 4 years ago • 10 comments

This is needed for the translations as otherwise the image links need to be also "translated" to a different location.

You can see that this also works on the first episode of the Translations fork

dpshelio avatar Jul 25 '20 20:07 dpshelio

I've also included changes to what points to /files/... as should be kept to the base of the lesson, and therefore will keep working for translations.

dpshelio avatar Aug 02 '20 18:08 dpshelio

Thanks! Should we be replacing all of our page.root references to site.baseurl?

❯ ag page.root                                                                                                                                                                                                             [12:55:30]
_extras/design.md
143:### [Running and Quitting Interactively]({{page.root}}/01-run-quit/) (9:00)
155:### [Variables and Assignment]({{page.root}}/02-variables/) (9:15)
167:### [Data Types and Type Conversion]({{page.root}}/03-types-conversion/) (09:35)
185:### [Built-in Functions and Help]({{page.root}}/04-built-in/) (09:55)
200:### [Coffee]({{page.root}}/05-coffee/): 15 min (10:20)
202:### [Libraries]({{page.root}}/06-libraries/) (10:35)
214:### [Reading Tabular Data]({{page.root}}/07-reading-tabular/) (10:55)
226:### [DataFrames]({{page.root}}/08-data-frames/) (11:15)
245:### [Plotting]({{page.root}}/09-plotting/) (11:45)
255:### [Lunch]({{page.root}}/10-lunch/) (12:15): 45 min
257:### [Lists]({{page.root}}/11-lists/) (13:00)
271:### [Loops]({{page.root}}/12-for-loops/) (13:20)
284:### [Looping Over Data Sets]({{page.root}}/13-looping-data-sets/) (13:45)
295:### [Writing Functions]({{page.root}}/14-writing-functions/) (14:00)
309:### [Variable Scope]({{page.root}}/15-scope/) (14:25)
319:### [Coffee]({{page.root}}/16-coffee/) (14:45): 15 min
321:### [Conditionals]({{page.root}}/17-conditionals/) (15:00)
333:### [Programming Style]({{page.root}}/18-style/) (15:25)
344:### [Wrap-Up]({{page.root}}/19-wrap/) (15:55)
351:### [Feedback]({{page.root}}/20-feedback/) (16:15)

index.md
16:> please check [the design notes]({{ page.root }}/design/)

setup.md
77:server in the root directory (see [Starting JupyterLab]({{ page.root }}/01-run-quit/#starting-jupyterlab)).

reference.md
9:## [Running and Quitting]({{ page.root }}/01-run-quit/)
16:## [Variables and Assignment]({{ page.root }}/02-variables/)
32:## [Data Types and Type Conversion]({{ page.root }}/03-types-conversion/)
45:## [Built-in Functions and Help]({{ page.root }}/04-built-in/)
54:## [Libraries]({{ page.root }}/06-libraries/)
65:## [Reading Tabular Data into DataFrames]({{ page.root }}/07-reading-tabular/)
74:## [Pandas DataFrames]({{ page.root }}/08-data-frames/)
87:## [Plotting]({{ page.root }}/09-plotting/)
106:## [Lists]({{ page.root }}/11-lists/)
116:## [For Loops]({{ page.root }}/12-for-loops/)
129:## [Conditionals]({{ page.root }}/13-conditionals/)
154:## [Looping Over Data Sets]({{ page.root }}/14-looping-data-sets/)
169:## [Writing Functions]({{ page.root }}/16-writing-functions/)
183:## [Variable Scope]({{ page.root }}/17-scope/)
187:## [Programming Style]({{ page.root }}/18-style/)

_episodes/06-libraries.md
202:> > lists in [episode 11]({{ page.root }}/11-lists/).

_episodes/07-reading-tabular.md
65:> you will get a [runtime error]({{ page.root }}/04-built-in/#runtime-error)

_episodes/11-lists.md
141:        (which we will see in the [next episode]({{ page.root }}/12-for-loops/).
190:    *   This is a kind of [runtime error]({{ page.root }}/04-built-in/#runtime-error).

_episodes/16-writing-functions.md
132:*   Remember: [every function returns something]({{ page.root }}/04-built-in/).

_episodes/01-run-quit.md
37:installed the Anaconda Python distribution, see [the setup instructions]({{ page.root }}/setup/) 

_episodes/02-variables.md
83:*   We will look at error messages in detail [later]({{ page.root }}/15-scope/#reading-error-messages).
271:> > number. In the [next lesson on types and type conversion]({{ page.root }}/03-types-conversion/#convert-numbers-and-strings)

alee avatar Aug 02 '20 19:08 alee

I have gotten this wrong before, but I think it's best to use page.root instead of site.baseurl as the later will break the paths for local static rendering (i.e., in the files in the _site folder that get generated by the make site command).

fmichonneau avatar Aug 03 '20 07:08 fmichonneau

For the translations, it's better to keep page.root when referring to episodes as they are not in the same path in the translation. Eg. /01-blah vs es/_episodes/01-blah, fr/_episodes/01-blah, {lang}/_episodes/01-blah so I can set page.root to be different things on different languages, whereas site.baseurl is better for links that are common across the lessons: figures, images, data files, etc.

dpshelio avatar Aug 10 '20 21:08 dpshelio

I agree with you @dpshelio but with site.baseurl the paths in the static version of the site will start with / and will, therefore, be broken.

fmichonneau avatar Aug 11 '20 08:08 fmichonneau

@fmichonneau what do you mean they will be broken? It works on my fork. What's different here?

See the first episode of the Translations fork and how it's using site.baseurl: https://github.com/carpentries-i18n/python-novice-gapminder/blame/e52835afaa4726ee71ed5f95b937160df922d077/_episodes/01-run-quit.md#L91

site.basurl points to the / as you said, but in gh-pages it goes to the base of the repo, not the base of the user, so, in this case looks into: https://swcarpentry.github.io/python-novice-gapminder/ not to https://swcarpentry.github.io/

dpshelio avatar Aug 15 '20 18:08 dpshelio

You're correct. My concern is with the "offline" version of the site, the site that gets created with the make site command. Then these absolute paths mean that the images will be broken.

fmichonneau avatar Aug 17 '20 05:08 fmichonneau

I have no particular preference for either version, but I tried it out locally, (make site && make serve) and found no problem with the suggested change. The link is evaluated to http://127.0.0.1:4000/files/python-novice-gapminder-data.zip

Regards Olav

On Mon, Aug 17, 2020 at 7:51 AM François Michonneau < [email protected]> wrote:

You're correct. My concern is with the "offline" version of the site, the site that gets created with the make site command. Then these absolute paths mean that the images will be broken.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/swcarpentry/python-novice-gapminder/pull/488#issuecomment-674670975, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABLLJBO55TBJ6N42KEWWHITSBDAM7ANCNFSM4PHT26ZQ .

vahtras avatar Aug 19 '20 10:08 vahtras

Offline works too as @vahtras has shown (and all the tests I've done locally), but maybe we are not hitting an edge case. We've changed it for the translations meanwhile as otherwise, they wouldn't appear.

dpshelio avatar Aug 20 '20 17:08 dpshelio

Using the first episode,

<!-- using {% raw %}{{ site.baseurl }}{% endraw %} --->
<p align='center'>
  <img alt="JupyterLab landing page" src="{{ site.baseurl }}/fig/0_jupyterlab_landing_page.png" width="750"/>
</p>

<!-- using {% raw %}{{ page.root }}{% endraw %} -->
<p align='center'>
  <img alt="JupyterLab landing page" src="{{ page.root }}/fig/0_jupyterlab_landing_page.png" width="750"/>
</p>

running make site produces:

<!-- using {{ site.baseurl }} --->
<p align="center">
  <img alt="JupyterLab landing page" src="/fig/0_jupyterlab_landing_page.png" width="750" />
</p>

<!-- using {{ page.root }} -->
<p align="center">
  <img alt="JupyterLab landing page" src="../fig/0_jupyterlab_landing_page.png" width="750" />
</p>

with {{ site.baseurl }} the absolute path means that the image wouldn't display. With make site the intent is to have a portable/offline version of the site that doesn't require Jekyll running to browse it.

One solution (which would also work for translations), while not very elegant, is to use this format:

src="{{ relative_root_path }}{% link fig/fig/0_jupyterlab_landing_page.png %}"

  • the variable relative_root_path is unfortunately not available directly in the episodes, and therefore {% include base_path.html %} needs to be added towards the top of the episode.
  • while not necessary, using the link function allows maintainers/contributors to get errors if the image doesn't exist anymore/get renamed.

fmichonneau avatar Aug 21 '20 13:08 fmichonneau

will be merged in #629

alee avatar Apr 18 '23 19:04 alee