VirtueMart 2.x. Wie ändert man Dimensionen des Produktbildes

Dieses Tutorial zeigt Ihnen, wie man Dimensionen des Produktbildes im VirtueMart Template verändert.

Wenn Produktbilder in Ihrem Template Querformat (Hochformat) haben, ändern Sie ein neues Bild in Hochformat (Querformat):

1. Loggen Sie sich im Admin-Backend der Joomla Seite ein.
2. Im Hauptmenü wählen Sie Components/Komponenten ->Virtuemart.

3. Links drücken Sie auf Products/ Produkten .

4. Suchen den gewünschten Produkt und klicken Sie auf ihn. .
5. Drücken Sie auf Product Images/ Produktbilder, damit Sie ein neues Bild hochladen.

6. Scrollen Sie bis Upload File/ Datei Hochladen runter und drücken Sie auf den Button Browse/Durschsuchen.

7. Im Computer finden das passendes Bild, das andere Seitenorientierung ( Hoch- bzw. Querformat ) hat, klicken Sie auf es und dann auf den Button Open/Öffnen.

8. Oben rechts auf der Seite drücken Sie auf Save/Speichern.
9. Es erscheint die Meldung “Product successfully saved” (“Produkt erfolgreich gespeichert”). Jetzt lassen wir uns ein Thumbnail hochladen (das braucht man, wenn der Enable Dynamic Thumbnail ResizingTab im Untermenü VirtueMart -> Site aktiviert ist). Unten Upload File/Datei Hochladen wählen Sie Replace thumb/ Vorschaubild ersetzen, drücken Sie auf Browse/Durchsuchen, damit Sie das Bild finden und hochladen. Danach drücken Sie auf Save/ Speichern.
10. Im Firefox Browser, der Firebug hat, öffnen Sie die Info-Seite des Produkts vom Frontend Ihrer Seite. Via Firebug ermitteln Sie, welche Höhe das neue Bild haben soll und welche Zeile in .ccs bearbeitet werden muss.

11. Öffnen Sie das Firebug-Fester mit dem Drück auf sein Icon in der rechten oberen Ecke Ihres Firefox-Browsers.
12. Wählen Sie Click an element in the page to inspect (Drücken Sie ein Element auf der Seite, um zu untersuchen).
13. Klicken auf den Bildrahmen und verändern Sie manuell seine Höhe in Firebug.

14. Mit der rechten Maustaste drücken Sie auf den Name der .css Dateien in Firebug und wählen Sie „Copy location“. Auf Ihrer FTP sollte ein virtuemart.css stehen, der sich im templates/theme_###/css/ Ordner befindet. Manchmal unterscheidet sich aber eine Datei/ ein Standort je nach Template-Design.
15. Öffnen eine leere Datei und fügen Sie den Standort mit dem rechten Maustaste ein. In Ihrer FTP Datei finden die gleiche .css und öffnen Sie die, um zu verändern.
16. Im Firebug kopieren Sie die ganze Zeile, wo Sie die Höhe verändert haben, und ersetzen Sie die gleiche Zeile in der .css durch diese.
17. Speichern Sie die Änderungen in der .css Datei.

18. Aktualisieren Sie noch mal die Produktseite. Der Rahmen für das Bild soll jetzt richtig aussehen.

Sehen Sie jetzt das ausführliche Video-Tutorial an: