lesson-example
lesson-example copied to clipboard
Icon Option for non swc/dc/lc workshops
Generally: Is it possible for the _config.yaml option for carpentry: to have an option for lessons which are not-dc/lc/swc. This could be useful for incubator lessons or other lessons folks use the template with.
Specifically: How can I change the upper icon to not be swc/dc/lc for a lesson that is using this template?
cc: @cmilica
@fmichonneau implemented this for Incubator and Lab lessons recently. Tagging him in here to provide advice.
@sstevens2, in _config.yml change "carpentry" to preferred abbreviation, e.g. "me".
Then create a folder "me" under assets/favicons.
And now the difficult part: this folder has to have the following files:
android-icon-144x144.png
android-icon-192x192.png
android-icon-36x36.png
android-icon-48x48.png
android-icon-72x72.png
android-icon-96x96.png
apple-icon-114x114.png
apple-icon-120x120.png
apple-icon-144x144.png
apple-icon-152x152.png
apple-icon-180x180.png
apple-icon-57x57.png
apple-icon-60x60.png
apple-icon-72x72.png
apple-icon-76x76.png
apple-icon-precomposed.png
apple-icon.png
favicon-16x16.png
favicon-196x196.png
favicon-32x32.png
favicon-96x96.png
favicon.ico
ms-icon-144x144.png
ms-icon-150x150.png
ms-icon-310x310.png
ms-icon-70x70.png
each of which is, essentially, the same image but scaled up or down.
I've just realized that you might've been talking about navbar...
In this case you would have to edit _includes/navbar.html -- there you will see
{% comment %} Select what logo to display. {% endcomment %}
Add an elsif for "me" (from the example above):
{% comment %} Select what logo to display. {% endcomment %}
{% if site.carpentry == "swc" %}
<a href="{{ site.swc_site }}" class="pull-left">
<img class="navbar-logo" src="{{ relative_root_path }}{% link /assets/img/swc-icon-blue.svg %}" alt="Software Carpentry logo" />
</a>
{% elsif site.carpentry == "me" %}
<a href="{{ XXXXXXXX }}" class="pull-left">
<img class="navbar-logo" src="{{ relative_root_path }}{% link /assets/img/XXXXX.svg %}" alt="My logo" />
</a>
{% elsif site.carpentry == "dc" %}
[snip]
Note all the XXXX above.
You might want to define a variable in _config.yml for your site, e.g.
my_site : "https://www.myweb.site"
and then use <a href="{{ site.my_site }}" class="pull-left"> in the code above. Otherwise, you can hard-code the link to your website.
Also, you have to add an image you'd like to use to assets/img and use its proper name in {% link /assets/img/XXXXX.svg %} above
@sstevens2 I did this for an OSG workshop recently -- wasn't the lesson template but probably uses similar ideas: https://github.com/SWC-OSG-Workshop/OSG-UserTraining-Gateways-2019