Home arrow Blog arrow Mit Bildern arbeiten
Thursday, 20. November 2008
Menu Firmen-Webseiten
Home Startseite
Webseiten-Ziele
Webseiten-Inhalt
Webseiten Design
Unser Service
Preisliste
Menu Branchen
Empfehlungen
Branchenwissen
Verkaufsshop
Für Kunden + Anna





Passwort vergessen?
Mit Bildern arbeiten PDF Drucken
Joomla-Doku - Tipps zu Joomla 1.0
Geschrieben von Administrator   

Inhaltsverzeichnis

- Bildgröße und Format

- Bildnamen

- Ganz Große Bilder zeigen

- Bilder speichern mit Media Manager

- Bilder einem Text zuordnen

Bildgröße und Format

  • Nur Bilder im Format jpg oder gif
  • Bilder als Teaser max 150 Pixel breit
  • Bilder im Seiten-Text 200 oder 250 Pixel
  • Bilder für Galerien 500 bis 700 Pixel breit
  • Definition: Porträt=hochkant, landscape=waagerecht
  • Maxbreite für einen Bildschirm ca. 1.500 Pixel
  • Jedes Bild sollte vor Übernahme in Joomla optimiert sein (wegen der Größe in KB)

Bildnamen

Im Media-Manager sieht man (auf den ersten Blick) nur einen kleinen linken Teil des Bildnamens
Ich bin nach langem Probieren zu folgendem Ergebnis gekommen:

  • Das Originalbild bearbeite ich, indem ich den richtigen Ausschnitt nehme und auf die maximal von mir verwendbare Größe reduziere, z.B. 800 Pixel breit. Das Original überschreibe ich dann.
  • Bei Verkleinerungen hänge ich die Pixelbreite hinten an, z.B. DCSN01220-250.jpg
  • Bei langen Bildnamen stelle ich die Größe evtl. nach vorn, z.B: 250L-Haus mit Garten.jpg
     250=Pixel-Breite
     L=Landscape P=Portrait (wichtig bei Galerien)
  • Namensgruppierungen mache ich durch Verzeichnisse auf meiner Platte und im Media-Manager

Ganz große Bilder zeigen

für ganz große Bilder (z.B. bei Sonder-Angeboten/Plakaten) richte ich mit FTP ein download-Verzeichnis ein und mache einen Link auf das Bild. Zum Beispiel:

    htdocs/download/sonst/irgendwas.doc
    htdocs/download/Bilder/plakat-juni-2008A-1200.jpg

Im Seiten-Text kann man ein ganz kleines Bild mit 150 Pixel normal einbinden und dieses Bild dann mit dem großen Bild im download-Bereich verlinken (unbedingt neues Fenster, da es sonst das Template zerreissen würde)

Bilder speichern mit Media Manager

Für viele Bilder eignet sich FTP besser als der Media-Manager.
Wenn man in Joomla Bilder den Texten zuordnen will, müssen die Bilder vorher in den Media-Manager abgelegt werden - das ist sozusagen das zentrale Bildverzeichnis für eine Anwendung. Der Media-Manager hat eine bestimmte Verzeichnis-Gliederung, die fest vorgegeben ist:

    /htdocs/images/stories

    htdocs entspricht dem Root der Webseite, z.B. http://www.elstermann.com/.
    IMAGES ist das Hauptverzeichnis des Media-Managers
    IMAGES/STORIES/ ist unser Verzeichnis. Darunter können wir beliebig arbeiten.

Die meisten Bilder werden abgelegt unter /images/stories/.
Ganz wenige Bilder werden abgelegt unter /IMAGES/. Dazu gehören Bilder für contact, Category, Section, Menus.  Denn bei diesen Funktionen hat man keine Möglichkeit, einen langen Pfad einzugeben.

Am besten legt man für jede CATEGORY ein Verzeichnis unter /images/stories/ an, also zum Beispiel

    /images/stories/impressum
    /images/stories/ueber_uns
    /images/stories/anreise
    /images/stories/galeries/columbia
    /images/stories/galeries/mexico
    usw.

  • Kurze Namen wählen. Beim Media-Manager nur mit_underscore, mit FTP geht auch-Bindestrich.
  • Mit dem Media-Manager sucht man sich zuerst ein bestehendes Verzeichnis bzw. legt ein neues an und geht in dieses Verzeichnis.
  • Dann mit "durchsuchen" auf der Platte des Rechners ein Bild suchen und übernehmen ins Verzeichnis des Media-Managers. (Nur Bild für Bild möglich.)
  • Bilder löschen durch Klick auf icon Mülltonne.
  • Überschreiben geht nicht, also erst löschen, dann neu laden.
  • Für Galerien kann man maximal 3 MB in einem Verzeichnis unterbringen.
  • Man kann auch die Datei labels.txt mit dem Media-Manager laden.

Probleme mit den Bildern:

  • Man sieht Bilder nicht
  • Man kann kein neues Bild laden
  • Man kann ein Bild nicht löschen.

Das alles hat etwas mit Benutzer-Rechten auf dem Server zu tun. Jede Datei auf dem Server hat mehrere Eigenschaften:

  • Eigenschaft: darf gelesen werden JA/NEIN
  • Eigenschaft: darf verändert/gelöscht werden JA/NEIN
  • Eigenschaft: darf ausgeführt werden JA/NEIN (Wenn eine Datei ein Programm ist)

Zusätzlich gibt es Privilegierte und weniger Privilegierte Menschen. Ein Chef hat z.B. mehr Rechte als ein Knecht.

Wenn dieses Verhältnis von Eigenschaften und Privilegien nicht stimmt, treten diese Fehler auf. Lösung: Fachmann fragen.


Bilder einem Text zuordnen

Wenn man einen (static) content-item bearbeitet, sieht man rechts einen Reiter "Images". Anklicken!
oben sieht man 2 Blöcke, links beschriftet mit Gallery Images  und rechts mit Content Images.

Block "Gallery Images" zeigt Bilder aus dem Media-Manager. Man muß etwas weiter unter im Sub-folder sich das gewünschte Verzeichnis aus dem Media-Manager auswählen. Die Bilder dieses Verzeichnisses sieht man dann hier. Aus diesen Bildern suchen wir also aus, was wir brauchen. Wenn man einen Bildnamen mit der Maus anklickt, sieht man etwas tiefer das Bild.

Block "Content-Images" ist anfangs leer. In diesen Block müssen die Bilder reingestellt werden, die wir auf der Content-Seite zeigen wollen.

  • Nun klickt man links ein Bild an, klick auf den Doppelpfeil-rechts, und schon landet das Bild im rechten Block.
  • Klickt man im rechten Block ein Bild an und dann auf den Doppelpfeil-Links, wird dieses Bild wieder aus der Auswahl entfernt.
  • Die Reihenfolge der Bilder im Block content-images ist wichtig.
  • Änderung der Bild-Reihenfolge mit den Tasten up/down

Bisher haben wir nur definiert, welche Bilder auf der Textseite zu sehen sein sollen. Wir müssen die Bilder den Textpassagen noch zuordnen. Für die Text-Bild-Anorndung gibt es 3 Varianten:

  • Image Align - LEFT: Das Bild ist links, der Text geht rechts um das Bild herum
  • Image Align - Right: Das Bild ist rechts, der Text geht links um das Bild herum
  • Image Align - Middle: Das Bild ist in der Mitte allein, Text ist nicht neben dem Bild.

Man geht jetzt den Text der Seite von oben nach unten durch und positioniert da den Cursor, wo ein Bild hin soll. Dann unten links auf "mosimage" klicken. An der Cursor-Position wird eingefügt. 

Parallel dazu gibt man auf rechts auf dem Bild-Teil wie folgt ein

  • Image align: left, right oder middle
  • Alt Text: Ein Text, der dann angezeigt wird, falls das Bild fehlen sollte und wenn manmit der Maus über das Bild fährt
  • Border: 0 (Wenn mit Rand, dann 1 oder 2)
  • Caption: hier kann man eine Bild-Unterschrift einstellen, z.B. über das copyright
  • Rest: nichts eintragen
  • APPLY - das ist wichtig. Wenn man das vergißt, können die soeben genannten Dinge dem Bild nicht zugeordnet werden.

Erst wenn alle Bilder auf diese Weise zugewiesen sind, dann kann man die Seite speichern.

Wenn die fertige Seite am Bildschirm später aufgebaut wird, wird im Prinzip zeilenweise von oben nach unten und von links nach rechts jede Zeile abgescannt, ob ein "mosimage" vorhanden ist. Dem ersten MOSIMAGE wird das erste Bild zugewiesen, dem zweiten MOSIMAGE das zweite Bild, dem dritten MOSIMAGE das dritte Bild usw. Sind mehr Bilder vorhanden als MOSIMAGE, werden die letzten Bilder einfach ignoriert. Sind mehr MOSIMAGE da als Bilder, werden den verbleibenden MOSIMAGE keine Bilder mehr zugewiesen.

Letzte Aktualisierung ( Friday, 18. July 2008 )