lesson-example icon indicating copy to clipboard operation
lesson-example copied to clipboard

Icon Option for non swc/dc/lc workshops

Open sstevens2 opened this issue 6 years ago • 4 comments

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

sstevens2 avatar Oct 17 '19 20:10 sstevens2

@fmichonneau implemented this for Incubator and Lab lessons recently. Tagging him in here to provide advice.

ErinBecker avatar Oct 17 '19 21:10 ErinBecker

@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.

maxim-belkin avatar Oct 17 '19 21:10 maxim-belkin

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

maxim-belkin avatar Oct 17 '19 21:10 maxim-belkin

@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

ChristinaLK avatar Oct 18 '19 01:10 ChristinaLK