Dokumentation für Optimierung und Bildausrichtung

This commit is contained in:
Christian 2020-01-14 21:35:28 +01:00
parent b7e56d3bee
commit a1d639b1fe
1 changed files with 13 additions and 8 deletions

View File

@ -1,15 +1,15 @@
# site
Die Chaospott Seite / Der Blog
Zu finden auf [chaospott.de](https://chaospott.de)
jekyll + bootstrap
### Blogeinträge
#### Text
## Blogeinträge
### 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:
<pre><code>---
layout: post
@ -17,10 +17,11 @@ title: "Neues Update für DocPatch"
date: 2015-05-23 13:37:00
categories: docpatch
---</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 für Blogeinträge werden unterhalb von Media in einem eigenen Verzeichnis (Jahr-MM-TT) abgelegt.
### Bilder
Bilder für Blogeinträge werden unterhalb von Media in einem eigenen Verzeichnis (Jahr-MM-TT) abgelegt.
<pre><code>~/site/media/jahr-mm-tt
</code></pre>
@ -30,11 +31,15 @@ Als erstes sollte man die Exif-Daten (z.B. Geoinformation) der Bilder entfernen.
</code></pre>
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
</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.
<pre><code>![Quelle: Chaospott]({{ site.url }}/media/Jahr-MM-TT/$Bild.jpg)
</code></pre>