Autorenbild bei Chirpy hinzufügen

Table of contents

Wofür ist das hier bitte gut?

Bei dieser Anleitung geht es darum, im Theme Chirpy ein Bild des Autors automatisch zu Posts/Beiträgen hinzuzufügen. Normalerweise werden nur der Name und das Datum angezeigt.

Ergebnis:

Wenn man ein Bild des Autors in einem Beitrag anzeigen lassen möchte, muss man beim Chirpy Theme die Dateien _layouts/post.html, _data/authors.yml und _scss/layout/post.scss anpassen.

Authors.yml bearbeiten

Die Werte die man auslesen will, müssen erst in der Datei _data/authors.yml hinterlegt werden. Als Beispiel wurde hier das Value, das ausgelesen werden soll, avatar genannt. Falls dies geändert wird, muss dies unten im HTML Code/Liquid auch entsprechend angepasst werden!

Hans:
  name: XXX XXX
  url: https://meinewebseite.de/about/#linkzumbeitrag
  avatar: /assets/img/avatar/avatarbild.jpg

Post.html bearbeiten

Die post.html muss editiert werden, damit wir den HTML Code integrieren können. Die HTML-Datei steuert den Inhalt des Posts und somit auch das Autorenbild.

Ob Ihr das Bild vor oder nach dem Autorennamen eingefügt haben wollt, ist euch überlassen. Bei Zeile 72 wird bei mir das Bild vor dem “von” eingefügt und der Link zeigt gleichzeitig auf den Autor bzw. auf das “über”. Hier kann aber jede URL eingefügt werden. Die Platzierung des Cods ist wichtig, wird diese zu früh eingefügt, ist z.B. der Autor noch nicht ausgelesen und der Link ist nicht funktional, hier sollte genau auf den Platzierung geachtet werden.

Der HTML Code sorgt dafür, dass aus der _data/authors.yml der Wert avatar ausgelesen wird. Gleichzeitig ist das Bild ein Link und verweist auf die URL des Autors, die in der _data/authors.yml angegeben ist. Der Code muss unter ”{% if page.author %}” eingefügt werden, da ansonsten der { author_link } nicht ausgelesen wurde.

<a href="{{ author_link }}"><img src="{{ site.data.authors[page.author].avatar | relative_url  }}" class="bio-avatar"></a>

    <span>
      {% capture author_name %}{{ site.data.authors[page.author].name | default: site.social.name }}{% endcapture %}
      {% assign author_link = nil %}

      {% if page.author %}
        {% assign author_link = site.data.authors[page.author].url %}
      {% elsif author_name == site.social.name %}
        {% assign author_link = site.social.links[0] %}
      {% endif %}
      <a href="{{ author_link }}"><img src="{{ site.data.authors[page.author].avatar | relative_url  }}" class="bio-avatar"></a>

      {{ site.data.locales[lang].post.written_by }}

      <em>
        {% if author_link %}
          <a href="{{ author_link }}">{{ author_name }}</a>
        {% else %}
        {{ author_name }}
        {% endif %}
      </em>
     </span>

Optional: Hyperlinkmarkierung entfernen, falls kein “img-link” verwendet wird

Bei Chirpy wird jedem Link (<a href=") ein Unterstrich als Markierung hinzugefügt. Dieser soll aber nicht bei unserem Autorenbild sichtbar sein. Wird das Auslesen ohne die img-src durchgeführt, erscheint eine Hyperlinkmarkierung. Dies ist der Fall, wenn nur Liquid verwendet wird.

{ site.data.authors[page.author].avatar | relative_url  }

Mit CSS und der class “bio-avatar” die Markierung entfernen

In _scss/addon/module.scss wird die “underline” als Variable definiert und von _scss/addon/commons.scss aufgerufen.

%link-underline {
 border-bottom: 1px solid var(--link-underline-color);
 }

In der _scss/addon/commons.scss wird eine Ausnahme für img-links gemacht und die Linie ausgeblendet. Wir fügen über die neue class eine weitere Ausnahme hinzu.

  a {
    &:not(.img-link) {
      @extend %link-underline;

      &:hover {
        @extend %link-hover;
      }
    }

    &.img-link {
      @extend %img-caption;
    }
  }

Hier wird im Beispiel ein weiterer CSS Block hinzugefügt, der die Linie ausblendet:

  a {
    &:not(.bio-avatar) {
      @extend %link-underline;
    }
  }

Beim eingefügten HTML Code handelt es sich aber um ein img-link. Daher muss der Hyperlink Unterstrich nicht extra entfernt werden. Dies dient nur als Beispiel.

CSS Magie

Durch das Hinzufügen des class=“bio-avatar” kann das Bild mit CSS angepasst werden. Die CSS-Datei _sass/layout/post.scss bietet sich dafür an.

.bio-avatar {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
}

Profit

Nun wird bei jedem Post/Beitrag das Bild des Autors angezeigt.