Dokumentation für Optimierung und Bildausrichtung

This commit is contained in:
Christian 2020-01-14 21:35:28 +01:00
parent b7e56d3bee
commit a1d639b1fe

View File

@ -1,15 +1,15 @@
# site # site
Die Chaospott Seite / Der Blog Die Chaospott Seite / Der Blog
Zu finden auf [chaospott.de](https://chaospott.de) Zu finden auf [chaospott.de](https://chaospott.de)
jekyll + bootstrap jekyll + bootstrap
### Blogeinträge ## Blogeinträge
#### Text
### Text
Blogeinträge werden in dem Verzeichnis „web/\_posts“ abgelegt. Um einen Blogeintrag zu verfassen legt man eine Datei mit dem Schema „Jahr-MM-TT-Titel.markdown“ an. Der Blogeintrag beginnt mit folgenden Metadaten: Blogeinträge werden in dem Verzeichnis „web/\_posts“ abgelegt. Um einen Blogeintrag zu verfassen legt man eine Datei mit dem Schema „Jahr-MM-TT-Titel.markdown“ an. Der Blogeintrag beginnt mit folgenden Metadaten:
<pre><code>--- <pre><code>---
layout: post layout: post
@ -19,7 +19,8 @@ categories: docpatch
---</code></pre> ---</code></pre>
Damit wird der Titel des Blogeintrags, das Datum der Veröffentlichung und die Kategorie (optional) festgelegt. Damit wird der Titel des Blogeintrags, das Datum der Veröffentlichung und die Kategorie (optional) festgelegt.
#### Bilder ### Bilder
Bilder für Blogeinträge werden unterhalb von Media in einem eigenen Verzeichnis (Jahr-MM-TT) abgelegt. Bilder für Blogeinträge werden unterhalb von Media in einem eigenen Verzeichnis (Jahr-MM-TT) abgelegt.
<pre><code>~/site/media/jahr-mm-tt <pre><code>~/site/media/jahr-mm-tt
@ -30,11 +31,15 @@ Als erstes sollte man die Exif-Daten (z.B. Geoinformation) der Bilder entfernen.
</code></pre> </code></pre>
Ggf. muss das Bild gedreht werden, wenn es ohne die Metatags auf dem Kopf steht oder auf der Seite liegt. Ggf. muss das Bild gedreht werden, wenn es ohne die Metatags auf dem Kopf steht oder auf der Seite liegt.
```convert -rotate 90 $Bild $Bild_out.jpg```
Der letzte Schritt setzt die Bilder auf eine einheitliche Breite. Der vorletzte Schritt setzt die Bilder auf eine einheitliche Breite.
<pre><code>mogrify -resize "1140>" $Bild <pre><code>mogrify -resize "1140>" $Bild
</code></pre> </code></pre>
Viele Bilder können noch optimiert werden, damit der benötige Speicherplatz und die zu übertragende Datenmenge reduziert wird.
```jpegoptim -m 80 %Bild.jpg```
Wenn das Bild in der korrekten Größe und Ausrichtung vorliegt, kann es wie Folgt eingebunden werden. Wenn das Bild in der korrekten Größe und Ausrichtung vorliegt, kann es wie Folgt eingebunden werden.
<pre><code>![Quelle: Chaospott]({{ site.url }}/media/Jahr-MM-TT/$Bild.jpg) <pre><code>![Quelle: Chaospott]({{ site.url }}/media/Jahr-MM-TT/$Bild.jpg)
</code></pre> </code></pre>