Bilder variabel im Text einbinden und sichern für Blog, Pagewizz, Webseite

1. Schritt:
Pagewizz Artikel Textbaustein öffnen mit bearbeiten.

2. Schritt:
Bild aus Quelle kopieren,
meine Quelle: Google-Alben

Warum Alben: meine Wanderartikel bieten über den Verweis zum entsprechenden Album die Anzeige im Vollformat und Diaschau anstelle Pagewizz-Miniformat.

Im Album Bild klicken für Anzeige, dann Menü rechte Maustaste wählen kopieren.

3. Schritt:
im Pagewizz Artikel im Textbaustein
Taste strg mit V drücken (Einfügen)

4. Schritt:

1. Bild mit Maus leicht schieben bis Eckpunkt links oder mehrere angezeigt werden.
2. Bild an Eckpunkten zum Verkleinern bzw. Vergrößern auf gewünschtes Format wählen.
   Während des Schiebens wird die Bildgröße laufend angezeigt.
3. Bei Bedarf: Für etwas größere Darstellung (schmälerer Zwischensteg) Bild klicken und Format Bild links bzw. rechts wählen.
4. Für zwei Bilder nebeneinander Bildbreite je Bild bis 295 Pixel bei links rechts Ausrichtung (Gesamtbreite maximal 630 Pixel).

Hinweis:
Einfacher geht es über Quelltext "<>" im Menü bei Bilder aus Google-Alben:

Die original Bildbreite und Höhe ist im Quelltext wie folgt dargestellt:
=w1374-h915-no. w steht für Weite (Breite) h für Höhe.

Mit f3 -no suchen und breite (w) beispielsweise auf 295 verkleinern:
=w1374-h915-no wird =w295-no.
Bei ungleichen Höhen der Bilder auf Höhe ausrichten:
=w1374-h915-no wird =h198-no.

Höhe oder Breite allein reicht für die Bildgröße.

Beste Bildqualität bei allen Bildgrößen ergeben unveränderte Werte =w und =h! 

Anstelle des Werteänderns werden die Instruktionen width="nnn" oder height="nnn" in beliebiger Größe in die IMG-Instruktion verwendet. 

Beispielsweise vor dem Abschluss />.

Wenn die Bilder ungleiche Seitenbreiten haben oder Hoch- und Querformat nebeneinander stehen sollen, dann die Bilder nach Bildhöhe ausrichten.

5. Schritt:
nächstes Bild aus Quelle wie 2. bis 4. Schritt.

6. Schritt:
bei drei (190 pixel) oder mehr Bilder neben einander zum 2. Schritt.

Hinweis:
1
Über den Quelltext kann neben dem Bild oder den Bildern Text angezeigt werden.
Im Menü Quelltext "<>" wählen und nach dem letzten "</p>" den Text einfügen.
2
Wer das Bild mit am oberen Rand mit dem Text anzeigen will, ändert das erste
"<p>" auf "<div>" und das letzte "</p>" auf "</div>".

Sichern in photos.google.com/albums 

Wer Google Foto aufruft, erhält gut beschrieben die erforderlichen Möglichkeiten seine Alben zu erstellen. Es hat sich bewährt, die Bilder vorher auf eine maximale Größe von 2.048 Pixeln Seitenbreite zu bringen. Denn bis zu dieser Größe ist das Speichern der Bilder kostenfrei.

Darüber hinaus wird, abhängig von weiteren benutzten Google-Diensten, kostenfreier Speicherplatz zur Verfügung gestellt. Wer beispielsweise auch bei Google+ registriert ist, hat 15 Gigabytes Speicher frei. So verwende ich bei detailreichen Bildern (Landkarten) auch schon mal 4.000 Pixel Seitenlänge.

Google bietet beim Hochladen die Möglichkeit die Bildgröße auf maximal 2048 Pixel zu reduzieren. Ich verwende zum Ändern der Größe auf 2048 Pixel das freie Programm Irfan.

Zur Sicherheit sollten die verkleinerten Bilder in einen neuen Ordner ausgegeben werden.

Dann wird photos.google.com/albums im Internet aufgerufen und "hochladen" gewählt. Werden die Fenster des Ordners mit den Bildern und photos.google.com/albums halbiert (siehe Bild ), können die Bilder direkt auf das Verzeichnis photos.google.com/albums gezogen werden. Das Hochladen erlaubt bei langsamen Internet eine Kaffeepause. Das zweite Bild wurde mit 400 pixel eingebunden. Im Editor kann das Bild angeklickt und in der Leiste rechtsbündig verschoben werden. in Die Erklärung folgt im nächsten Kapitel.

Variables Textgestalten zweier Bilder gleicher Größe, Beispiel Pagewizz

Hier werden zwei Bilder nebeneinander im Textbaustein eingebunden. Der Vorteil: Jedes Bild kann geklickt bis zur voller Bildschirmgröße betrachtet werden. Zusätzlich kann der Betrachter Bildausschnitte für Detailansichten wählen. Als Bildgröße wurde für das Einbinden - aus der Auswahl 144, 288, 400, 640, und 800 Pixel - 288 Pixel für die Textgröße (für größte Seite) gewählt.

Klicke die linke Abbildung zur besseren Anzeige. Die wichtigen Einträge habe ich rot hinterlegt:

• Bildgröße zwischen 144 und 800 pixel wählen (meist 288)
• Häkchen in Albumlink ausblenden
• Kode unter Bild einbinden und kopieren (klick und strg c).
• Textbaustein wählen und klicken im pagewizz Editor oben links HTML
• Kode mit strg v übertragen.

Der Kode zum Einbinden in HTML für das erste Bild so aus:

<a href="https://picasaweb.google.com/lh/photo/xIzOC1P9nyI1W_ Vm-umbaNMTjNZETYmyPJy0liipFm0?feat=embedwebsite" target="_blank"> <img alt="Bildqualität verbessern und einbinden in Artikeln und Webseiten primapage" height="180" src="https://lh4.googleusercontent.com/-gManiEFNIdo/Uh82v_ VRzQI/AAAAAAAAUU4/aOjGb3OZ1UM/s288/P119-schrecksee-130823_172B.JPG" width="288" />

Keine Bange! Soll die Größe des Bildes dem Text angepasst werden oder die Anzeigequalität geändert werden, sind nur die hier fettgedruckten Zahlen zu ändern. Im Beispiel dieses Kapitels braucht es keine Änderung: Zwei Bilder haben mit 288 Pixel nebeneinander Platz. Die bessere Anzeigequalität des Bildes (höhere Auflösung) wird durch das Ändern der picasa-Bildart - beispielsweise von s288 (klein) auf s640 erhöht, falls nicht schon bei der picasa-Bildauswahl das höher auflösende Bild (mittel) gewählt wurde.

Hilfreicher Hinweis

Wenn zwei oder mehrer Bilder nebeneinander stehen sollen, beachte jeden Code für jedes weitere Bild vor dem Abschnittsende </p> zu setzen. Der Editor liebt es, für jedes neue eingefügte Bild <p> und </p> zu generieren. Das bringt unschöne Leerzeilen, die stören können.

Schema: (wahlweise Text) <p><a>_bild 1_</a> <a>_bild 2_</a>text </p> (text = wahlweiseText )

Zwei Bilder ungleicher Größe nebeneinander

Typisches Beispiel ist das Setzen eines Bildes in Hoch- und eines in Querformat. Es sieht besser aus, wenn dabei keine leere Fläche beim quer formatigen Bild entsteht. Die Beispielbilder wurden mit Größe 400 Pixel ausgewählt: Je höher die Pixelzahl, desto schärfer ist die Abbildung des Bildes im Artikel. Die Breite oder Höhe ist unabhängig der Bildqualität (zwischen s144 bis s800) änderbar.

Jetzt wird, um die Bildformate anzugleichen, für jedes Bild die gleiche Höhe verwendet. Deshalb wird die Breite width="300" und width="400" der Bilder aus dem Kode entfernt. Damit errechnet sich die Bildbreite - da nicht mehr vorhanden - von selbst über die Pixelgröße s400. Werden die Breiten nicht gelöscht, würde das Bild nicht mehr proportional angezeigt, es wäre verzerrt.

1. Schritt berechnen der Durchschnittshöhe der Bilder (Beispiel)

• Ein Bild hat die Höhe 400, das andere die Höhe 250. Ergibt zusammen 650.
• Also ist die mittlere Bildhöhe 325 (650 / 2).

2. Schritt berechnen Größe je Bild für die vorhandene Breite Textbaustein oder Webseite.

Zwei Bilder erfordern bei der Bildgröße s400 (400 Pixel) 800 Pixel Breite. Bei Pagewizz stehen etwa 600 Pixel Breite zur Verfügung. Da die Bilder nebeneinander gleich hoch sein sollen (schaut besser aus), wird die mittlere Bildhöhe berechnet: Dividiert durch die Gesamtbildbreite (hier 800 Pixel) und multipliziert mit der Seitenbreite (hier 600 Pixel). Das ergibt die an die Seite angepasste Bildgröße in diesem Beispiel von 244 gerundet.

Die Bausteinbreite beim Pagewizz Textbaustein ist etwa 620 Pixel. Bei zwei Bildern sind es etwa 580 Pixel (da Bild-Zwischenräume generiert werden). Somit werden die Bilder der gewählten Größe S288 auf 576 Pixel im ersten Beispiel gut nebeneinander untergebracht.

<a href=...<img ... height="400" src="https://lh4.googleusercontent.com/...167B.JPG" width="300" /></a>

<a href=...<img ... height="250" src="https://lh3.googleusercontent.com/...175B.JPG" width="400" /></a>

Bildqualität 640 Pixel (s640) mit Berechnung

Qualität Bildgröße 288 Pixel (s288) ohne Berechnung

Hier wurde die Durchschnittshöhe von 234 geändert auf die 256 Pixel der s400 Bilder: Gleiche Größe für den Qualitätsvergleich.

Sobald der Betrachter auf das Bild klickt, gibt es naturgemäß keinen Unterschied der Qualität. Wer weiß, dass viele nicht den Komfort der Vollbildansicht aufrufen, erhält mit s400 bis s640 Auswahl der Albenbilder eine gute Bildqualität im Artikel.

Wird ein Bild über die ganze Breite des Textbausteines eingebunden, dann sollte die Pixelgröße der Breite von 640 auf 600 bis 615 reduziert werden, um ein Abschneiden des Bildes zu verhindern. Auch bei Breiten über 400 Pixel lohnt der Qualität wegen s640 auszuwählen und die Breite entsprechend zu verringern.

Das Entfernen der nicht veränderten Größenangabe "height" oder "width" nicht vergessen. Dann bleibt das ursprüngliche Proportion erhalten!

Hinweis: Ändern der Bildgröße im Text

Jederzeit kann die vorgewählte Bildgröße bei Picasa, Pagewizz und anderen Bildquellen von s144, s288, s400, s640 und s800 auf eine der hier aufgeführten Bezeichner nachträglich im Textbaustein via HTML geändert werden. Das erspart das neuerliche Einbinden. Die Praxis zeigt, dass die vorgewählte Größe s400 (mittel) für beinahe alle Bilder bis zu einer Breite von 300 Pixel vorteilhaft ist. Die beste Qualität für alle Größen bringt jedoch s640!