Skip to content

Markup Language

Torbjörn Klatt edited this page Feb 18, 2016 · 7 revisions

Beside the Liquid tags documented in Liquid's Manual for Designers, there are some added by Jekyll and some added by us. Here, we only describe those added by us. For all other, please see the above linked external documentations.

Cite and List Publications

(this is provided through the jekyll-scholar plugin. For a more detailed documentation, please see jekyll-scholar's README.)

Any publications listed in the main BibTeX file in _bibliography/jlesc.bib can be used for citation on all pages and posts.

{% cite <IDENTIFIER> %}

e.g. {% cite DorierEtAl2014a %}. The BibTeX identifier is also shown on the rendered HTML page in the grey box right of an entry.

To list all cited publications at the end of the page, add

{% bibliography --cited %}

There is a speciality on project pages, as projects have the option to introduce a separate BibTeX file for referencing external non-JLESC-produced publications. To cite these, you will need the additional --file parameter of the cite tag:

{% cite ChienEtAl2015 --file external/activestorage_project %}

Images

Images should be placed in the _assets/images folder to be processed by the jekyll-assets plugin.

To include an image at a specific position on a post or page, use the jekyll-assets's liquid tags:

{% image 'kittens.png' %}

For better looks and layout you might want to add specific CSS classes to the images as they are defined by Twitter Bootstrap:

{% image 'kittens.png' class:"img-fluid img-circle" %}

For really large pictures, such as a workshop's group photo or a high-resolution diagram, it is highly recommended to use our own extension to the image tag, the lightbox_image tag:

{% lightbox_image '4th-workshop-bonn-group.jpg' class:"img-fluid" alt:"Group photo of the 4th JLESC workshop in Bonn" %}

This will resize the image on-the-fly to a much smaller one (down to a width of 1000px; the height is scaled proportionally) to be displayed on the website. It will also create a link around the image, which will, when clicked, display a "lightbox" with the full-sized image.
That way, the full-sized image is only loaded by the web browser when the user actually clicks the image.

Note, you can always use this lightbox_image tag, when you want the lightbox effect. The image will only be resized when its width exceeds 1000px.

People

To display a person defined in the people database (_data/people.yml), use one of the following Liquid tags matching your needs:

Rendered Output Code
Given Names Sur Names (Affiliation) {% person PERSON_ID %}
Given Names Sur Names {% person_noaffi PERSON_ID %}
Sur Names, Given Names (Affiliation) {% person_inverse PERSON_ID %}
Sur Names, Given Names {% person_noaffi_inverse PERSON_ID %}