Womo-Abenteuer

Nordamerika im Wohnmobil erleben!

Wie verändert man das Bilder Layout und wie erstellt man eine Bildershow?

Kategorie: 
Zu dieser Webseite

Bei Bildern und Fotos kann man die Konturen und Größen auf einfache Weise in den Bildeigenschaften verändern.

Bilder, wie in der Info Wie lädt man Bilder in einen Beitrag hoch? beschrieben, einfügen.

Ein Klick auf das bereits im Kommentarfeld eingefügte Bild und ein weiterer Klick auf das Symbol "Bild markieren" (s. Bild unten) öffnet das Fenster "Bildeigenschaften". 
Alternativ erreicht ihr dasselbe durch einen Rechtsklick auf das entsprechende Bild und einen Klick auf "Bildeigenschaften".

Folgende Einstellungen sind hier möglich:

1. Bildgröße verändern:

  • Angabe der Bildgröße entweder in px (hier reicht die bloße Zahl, ideal nutzt ihr die Breite bei 1000 aus) oder besser in % möglich --> bei Prozentangabe wird auch bei kleineren Endgeräten z.B. Smartphones das Layout korrekt angezeigt und verschiebt sich nicht.
  • Prozentangabe: bei 2 Bildern nebeneinander je Bild 48% eintragen, mit 2 Leerzeichen Abstand. Ist ein größerer Abstand gewünscht, muss die Prozentangabe bei den Bildern entsprechend verringert werden, sodass sie nach wie vor nebeneinander dargestellt werden.
  • Eine Eingabe bei Breite reicht aus, das Feld Höhe kann leer bleiben, s. Bild unten.


2. Rahmen hinzufügen:

  • im Feld "Rahmen" die Ziffer 1, 2, 3 oder 4 (Breite des Rahmens, ganz nach eurem Belieben) eintragen.

3. Bearbeitung über Formatvorlagenklassen:

Über den Reiter "Erweitert" gelangt ihr zum Feld "Formatvorlagenklassen". 
Hier sind folgende Einstellungen möglich:

  • img-thumbnail = Bild mit Rahmen
  • img-rounded = Bild mit abgerundeten Ecken
  • img-circle = Bild als Kreis/Ellipse

Darüber hinaus könnt ihr hier auch die exakte Position des Bildes in der Mitte durch die Eingabe von "center-block" festlegen. Wichtig bei der Eingabe ist ein Leerzeichen zwischen beiden Befehlen:

  • center-block img-thumbnail = Bild mit Rahmen, genau in der Mitte
  • center-block img-rounded = Bild mit abgerundeten Ecken, genau in der Mitte
  • center-block img-circle = Bild als Kreis/Ellipse, genau in der Mitte

***Diese Einstellungen unter "Formatvorlagenklassen" werden erst nach dem Abspeichern sichtbar!***

Beispiel


Hier die Auswirkungen der Einstellungen:

Beispielbild im Orginal


Beispielbild mit Formatvorlagenklasse img-thumbnail


Beispielbild mit Formatvorlagenklasse img-rounded


Beispielbilder mit je 48% Breite und Formatvorlagenklasse img-thumbnail

   


Beispielbild mit 50% Breite und Formatvorlagenklassen center-block img-circle


Erstellung einer Bildershow

Ihr könnt den Lesern die Bilder eures Reiseberichts innerhalb eines Reiseabschnitts auch im Rahmen einer Bildershow präsentieren.
Dies bietet sich vor allem dann an, wenn ihr die Bilder zwar in großem Format hochgeladen, jedoch im Layout verkleinert habt (z.B. zwei Bilder nebeneinander mit jeweils 48%).

Kopiert dafür im Fenster "Bildeigenschaften" (dieses Fenster erreicht ihr auch nachträglich im "Bearbeiten-Modus" durch Rechtsklick auf das entsprechende Bild) die Bild-URL nach dem Hochladen zusätzlich noch unter den Reiter "Link" ein.

Als Ergebnis seht ihr nach dem Abspeichern beim "Mouse over" eine Hand auf eurem Bild. Nach dem Klick auf ein beliebiges Bild läuft die Bildershow automatisch ab und zeigt die Bilder in der hochgeladenen Originalgröße.


10/19 - elli