Bilder sichern und in variabler Größe in Texte einbinden

Die Möglichkeit "Wer mehr sehen will klickt auf die Bilder im Bericht" gibt es wegen des Einstellens der PICASA-Alben durch google nicht mehr .

Sichern in Google-Picasa

Wer Google Picasa 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. Ich bin beispielsweise auch bei Google+ registriert. Somit habe ich 15 Gigabytes Speicher frei. So verwende ich bei detailreiche Bilder (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. Das Bild oben (288 pixel) zeigt die Einstellungen für das Kopieren der Bilder im Original Ordner "...gut" sicherheits halber in einen neuen Ordner "...gut-2048". 

Dann wird das Picasa-Album-Verzeichnis im Internet aufgerufen und "hochladen" gewählt. Werden die Fenster Ordner "gut-2048" und picasa halbiert (siehe Bild zwei), können die Bilder direkt auf das picasa Verzeichnis 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="" 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 s400 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 )

1_ Ausrichten Bild links oder rechts

  • Im Pagewizz-Editor auf "bearbeiten" und auf das eingebundenes Bild klicken.
  • Im Menü "Formate" wählen und dann "Bild links" oder "Bild rechts" klicken. 

Das schiebt das Bild enger an den entsprechenden Rand und bringt so mehr Platz für den Text oder das Bild. Dies empfiehlt sich auch für das Ausrichten großer Bilder (s640 = Bildgröße 600-620).

Klick auf "Bild links" fügt die Instruktion style="float: left; margin: 5px 15px 5px 0px;" nach "img" ein. Bei "Bild rechts" wird entsprechend "...float: right..." generiert. Außerdem werden mit dem Ausrichten die fehlenden Größenangaben "height" und "width" wieder hergestellt. 

Beispiel: Gleiches Bild oben ohne Ausrichtung, unten mit Ausrichtung.

2_ Einfaches Anpassen der Bildgröße ohne HTML-Code

Beim Klicken im Editor auf das eingebundene Bild wird ein Rahmen mit acht Punkten angezeigt. Die Punkte (beispielsweise Eckpunkt) können mit der Maus verschoben werden: Nach innen schieben verkleinert, nach außen vergrößert das Bild.

Beim Verschieben eines Punktes wird die jeweilige Bildlänge (width) und Höhe (height) Beispiel Bild rechts "275x172" Bild oben "200x125" angezeigt.

So wird sehr bequem das Bild der Textlänge angepasst.

3_ Einfacher mehrere Bilder nebeneinander angleichen

In oben beschriebener Weise können auch Bilder jeder Größe nebeneinander angepasst werden. Damit entfällt das Berechnen der Durchschnittshöhe!

Hier nach dem groben Anpassen der Bildgröße ist die Feineinstellung im HTML-Code unter "height" oder "width" hilfreich. Dabei sollte aber nicht vergessen werden, die nicht veränderte Größenangabe zu löschen. Damit bleibt die ursprüngliche Proportion des Bildes erhalten.

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.

Hinweis: Dieser Schritt ist nur erforderlich, wenn
die Seitenbreite nicht gleich der Bildbreite ist.

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>

Einfaches Finden der Länge, Breite und Bildgröße

Wer mit HTML nicht vertraut ist, der tippt nach Aufruf des HTML via F3 (Funktionstaste suchen) den zu ändernden Begriff height, width, s144, s288, s400, s640 ein. So steht der Cursor zum Ändern der Werte an der richtigen Stelle. Anschließend mit aktualisieren HTML abschließen.

Bildqualität 400 Pixel (s400) mit Berechnung

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

Hier wurde die Durchschnittshöhe von 234 geändert auf die 244 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 Höhenangabe "height" oder "width" nicht vergessen. Dann bleibt das ursprüngliche Verhältnis der Bildhöhe zur Breite erhalten.

Hinweis: Ändern der picasa-Bildgröße im Text

Jederzeit kann die vorgewählte Picasa Bildgröße 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 400 Pixel vorteilhaft ist. 

Zusatznutzen Diaschau

Eine Diaschau gibt es praktisch als Zusatznutzen für den Besucher. Hier können die Bilder in voller Größe hintereinander betrachtet werden. Zur Diaschau Bilder via Picasa einbinden.

Viele praktische Beispiele variable Bilder einbinden in Texte

Die Bildgestaltung mit variabler Größe zeigt in diesen beiden Tabellen den Vorteil der freien Bildgröße. In der ersten Tabelle geht es über die "Liste Wandertouren Oberallgäu" zu den jüngeren Berichten. Diese zeigen anschaulich die beschriebene, freie Bildgröße.

In der zweiten Tabelle "Direktwahl Region" wird gezeigt, wie auch platzsparende, kleine Abbildungen über das Anklicken in voller Größe gezeigt werden können.

Liste der Alpentouren nach Regionen

Auswahl Region mit Klick auf Überschrift,

Ansicht Bilder im Album Alpentouren Liste nach Regionen mit blättern (Diashow).

  • Österreich: Tirol, Vorarlberg
  • Deutschland: Bayern, Allgäu
  • Schweiz: Berner Oberland
  • Frankreich: Savoyen.
Oberallgäu Liste Wandertouren- Sonthofen,
Bad Hindelang, Oberstdorf
Region Zugspitze, Lechtaler- und Allgäuer Alpen 

Vorarlberg Bregenzerwald, Montafon Tirol Nauders, Schweiz Samnaun

Bayerische Alpen und Tiroler Alpen
- längere Touren
Bayerische- und Tiroler Alpen 

kurze und mittlere Touren

Touren zwischen Mittenwald + Achensee lange Touren

Touren von Mittenwald bis zum Achensee

 - mittellangeTouren

Touren zwischen Mittenwald + Achensee 
 - Spaziergänge 
 - kurzes Wandern
Touren im Berner Oberland 
Savoyen, Frankreich Touren und Ausflüge vom La Clusaz, Megeve und Samoens aus

Bildband Wohlfühlorte im Allgäu

Mein Bildband stellt 28 Touren mit Plätzen zum Innehalten mit je einer Doppelseite vor. Wandern und Ausflüge sind in meinen Pagewizz-Artikeln beschrieben. 

Das Album Wandern im Allgäu enthält einige Aufnahmen der Orte zum Wohlfühlen. primawandern zeigt beispielhaft eine Doppelseite des Bandes. 

Zum Angebot führt der Klick auf das Bild.

#primapage #JohannSchubert 

primapage, am 29.08.2013
8 Kommentare Melde Dich an, um einen Kommentar zu schreiben.


Laden ...
Fehler!