====== OXID Plugin - WebP Picture Converter ======
Das Plugin bei FATCHIP: https://www.fatchip.de/Plugins/OXID-eShop/OXID-Plugin-WebP-Bildkonverter.html \\
Das Plugin auf Github: https://github.com/FATCHIP-GmbH/plugin-oxid6-fcwebp (private)
===== Voraussetzungen =====
* OXID CE/PE/EE ab Version 6.0.x bis 6.3.x\\
* SSH-Zugang zum Shoproot
* Kein Eintrag unter "sAltImageUrl" in der config.inc.php
----
===== Installation =====
==== Composer ====
Öffnen Sie die Datei **composer.json** im Stammverzeichnis Ihres Shops und fügen Sie das Repository hinzu oder vervollständigen Sie die vorhandene Konfiguration: \\
"repositories": [{
"type": "composer",
"url": "https://packages.fatchip.de/packages"
}]
Nach erfolgter Ergänzung der Datei //composer.json// können Sie da Plugin installieren.\\ Melden Sie sich dazu per SSH an dem Server an, auf dem sich die Shop-Installation befindet, und navigieren Sie zu dem Verzeichnis, in dem sich der Source- und Vendorornder befinden.\\
Führen Sie folgenden Befehl aus, um das Plugin zu installieren
composer require fatchip-gmbh/plugin-oxid6-fcwebp
Beachten Sie, dass der genaue Aufruf des Composers für Ihre konkrete OXID-Installation abweichen kann. \\
Sie werden nun nach einem Benutzer und einem Passwort gefragt. Geben Sie die Zugangsdaten ein, welche Ihnen per E-Mail übersandt wurden.\\
Bitte speichern Sie diese Zugangsdaten **nicht** auf Ihrem Server, da es sonst zu Problemen kommt, sollten Sie mehrere unserer Plugins einsetzen oder einsetzen wollen.
Nach korrekter Eingabe der Zugangsdaten wird das Plugin installiert.
==== Manuell ====
Erstellen Sie im Verzeichnis //{shoproot}/source/modules// einen Unterordner **fc**, sollte dieser noch nicht existieren.
In dem Pluginpaket befindet sich der Ordner //fcwebp//.\\
Kopieren Sie diesen Ordner in das eben erstellte oder schon vorhandene Verzeichnis //fc// (bei FTP - binären Übertragungsmodus nutzen).
{{public:faq:webp:210118_webp_ftp_upload.png?nolink&800|}}
=== composer.json aktualisieren ===
Öffnen Sie die Datei **composer.json** im Stammverzeichnis Ihres Shops und fügen Sie diese Autoload-Konfiguration hinzu oder vervollständigen Sie die vorhandene Konfiguration: \\
"autoload": {
"psr-4": {
"FATCHIP\\fcwebp\\": "./source/modules/fc/fcwebp"
}
},
Nach erfolgter Ergänzung der Datei //composer.json// müssen die Änderungen dem OXID-System mitgeteilt werden.\\ Melden Sie sich dazu per SSH an dem Server an, auf dem sich die Shop-Installation befindet, und navigieren Sie zu dem Verzeichnis, in dem sich der Source- und Vendorornder befinden.\\
Führen Sie folgenden Befehl aus, um die Autoloader-Dateien neu zu generieren
vendor/bin/composer dump-autoload
Beachten Sie, dass der genaue Aufruf des Composers für Ihre konkrete OXID-Installation abweichen kann. \\ \\ Nach erfolgreicher Aktion wird folgende Meldung angezeigt:\\ //Generating autoload files//\\ //Generated autoload files//
**In OXID-Versionen ab 6.2 (ältere Versionen können den Schritt überspringen)** muss die Modulkonfiguration eingelesen werden.\\
Melden Sie sich dazu per SSH an dem Server an, auf dem sich die Shop-Installation befindet, und navigieren Sie zu dem Verzeichnis, in dem sich der Source- und Vendorornder befinden. Führen Sie die folgenden Befehle aus:\\
vendor/bin/oe-console oe:module:install-configuration source/modules/fc/fcwebp
vendor/bin/oe-console oe:module:apply-configuration
Bei erfolgreichem Einlesen/Import erscheint die Nachricht\\
**Module configuration has been installed**
===== Anpassung der .htaccess =====
Melden Sie sich per SSH an dem Server an, auf dem sich die Shop-Installation befindet, und navigieren Sie in den "source"-Ordner. Stellen Sie sicher, dass Sie Schreibrechte für die ".htaccess" besitzen.\\
Öffnen Sie sie .htaccess und fügen Sie **über**
RewriteCond %{REQUEST_URI} (\/out\/pictures\/generated\/)
das Nachfolgende ein:
## FATCHIP WEBP MODULE START 1 ##
# if already generated - show webp image
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_URI} (?i)(.*)(\.jpe?g|\.png|\.gif)$
RewriteCond %{QUERY_STRING} !.*nowebp=true.*
RewriteCond %{DOCUMENT_ROOT}%1.webp -f
RewriteRule (?i)(.*)(\.jpe?g|\.png|\.gif)$ %1\.webp [L,T=image/webp]
# for products generate and show webp and - if needed - jgp/png/gif
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{HTTP_HOST} ^[REPLACE WITH YOUR DOMAIN IN FORM www\.fatchip\.de]
RewriteCond %{REQUEST_URI} (\/out\/pictures\/generated\/)
RewriteCond %{QUERY_STRING} !.*nowebp=true.*
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (\.jpe?g|\.gif|\.png)$ modules/fc/fcwebp/getwebp.php [NC]
# for other images generate and show webp if original exists
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{HTTP_HOST} ^[REPLACE WITH YOUR DOMAIN IN FORM www\.fatchip\.de]
RewriteCond %{REQUEST_URI} (\.jpe?g|\.png|\.gif)
RewriteCond %{QUERY_STRING} !.*nowebp=true.*
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule (\.jpe?g|\.gif|\.png)$ modules/fc/fcwebp/getwebp.php [NC]
## FATCHIP WEBP MODULE END 1 ##
Ersetzen Sie die Platzhalter mit Ihrer Domain.
Sollten Sie ein **Enterprise Edition** einsetzen, trennen Sie die URLs Ihrer Shops mit einer Pipe
RewriteCond %{HTTP_HOST} ^[REPLACE WITH YOUR DOMAIN IN FORM www\.fatchip\.de|REPLACE WITH YOUR SECOND DOMAIN IN FORM www\.fatchip\.de]
Fügen Sie am Ende der ".htaccess" folgendes ein:
## FATCHIP WEBP MODULE START 2 ##
Header append Vary Accept env=REDIRECT_accept
AddType image/webp .webp
## FATCHIP WEBP MODULE END 2 ##
=== Anpassung Dateiberechtigung ===
Stellen Sie sicher, dass Dateien in fc/fcwebp/libwebp Ausführungsrechte haben (755)
=== Temp Verzeichnis leeren ===
Leeren Sie das Temp Verzeichnis (tmp) in Ihrem OXID eShop Hauptverzeichnis. Die enthaltene **.htaccess-Datei darf** dabei aber **NICHT** gelöscht werden!
{{public:faq:webp:210118_webp_tmp_leeren.png?nolink&800|}}
=== WebP Picture Converter Plugin aktivieren ===
Aktivieren Sie das WebP Picture Converter Plugin im OXID Administrationsbereich unter //Erweiterungen -> Module -> FATCHIP Module OXID WebP Picture Converter//.
{{public:faq:webp:210118_webp_aktivierung.png?nolink&800|}}
----
===== Konfiguration =====
Die WebP Picture Converter Grundeinstellungen können Sie unter //Erweiterungen -> Module -> FATCHIP Module OXID WebP Picture Converter -> Einstellungen -> Grundeinstellungen// vornehmen.
{{public:faq:webp:210118_webp_grundeinstellungen.png?nolink&800|}}
^ Konfiguration ^ Beschreibung ^
|Supportkey|Den Supportkey finden Sie in der E-Mail mit Ihrem Plugin. Ohne Nennung dieses Keys kann Ihnen die FATCHIP GmbH keinen Support leisten.|
|Webp Qualität|Hier können Sie die gewünschte Qualität für die Webp-Bilder einstellen.\\ Der Standardwert ist 75\\ **Bitte beachten:**\\ Bei der Verwendung einer Enterprise Edition mit Subshops, muss die Qualität in allen Subshops gleich eingestellt sein.|
----
===== Support =====
Sollten Sie Hilfe von FATCHIP benötigen, schicken Sie bitte eine detaillierte Fehlerbeschreibung inkl. Plugin- und Shopversion an //support@fatchip.de//.
----
===== Weitere Informationen =====
Sollte das OXID Plugin Betreiber-Statistiken nach der Installation nicht wie erwartet funktionieren, prüfen Sie ob alle Installationsschritte richtig durchgeführt worden sind.\\
Weitere Informationen finden Sie in unserem Online Shop unter: https://www.fatchip.de/Plugins/OXID-eShop/OXID-Plugin-WebP-Bildkonverter.html
Außerdem bietet FATCHIP einen Plugin-Installationsservice an. Weitere Informationen hierzu finden Sie unter:\\
https://www.fatchip.de/Servicepakete/Plugin-Installationsservice-OXID-eShop-PE.html\\
https://www.fatchip.de/Servicepakete/Plugin-Installationsservice-OXID-eShop-EE.html
----
===== FAQs =====
- [[#Welche OXID eShop Versionen sind mit dem WebP Bilder Konverter Plugin von FATCHIP kompatibel?]]
- [[#Wie funktioniert die Auslieferung der WebP-Bilder an den Browser?]]
- [[#Wie kann ich das im Shop hinterlegte Bild (z.B. jpg) anstatt das WebP-Bild an den Browser ausliefern?]]
=== 1. Welche OXID eShop Versionen sind mit dem Betreiber-Statistiken Plugin von FATCHIP kompatibel? ===
Die aktuellsten Informationen hierzu erhalten Sie in der [[https://www.fatchip.de/Plugins/OXID-eShop/OXID-Plugin-WebP-Bildkonverter.html#matrix|Kompatibilitätsmatrix]] in unserem Shop.
=== 2. Wie funktioniert die Auslieferung der WebP-Bilder an den Browser? ===
* Im Quelltext wird immer der ursprüngliche Bildname ausgegeben (z.B. produktbild.jpg).
* Per htaccess Regel wird nun geprüft, ob der Browser des Users das Formt WebP unterstützt.
* Unterstützt der Browser WebP, redirected die htaccess den Browser per Rewrite Rule im Hintergrund auf das WebP Bild und sendet einen entsprechenden Dateiheader.
* Unterstützt der Browser das Format nicht, wird einfach das alte Bild ausgegeben. \\ So ist sichergestellt, dass jeder Browser ein Bild anzeigt.
=== 3. Wie kann ich das im Shop hinterlegte Bild (z.B. jpg) anstatt das WebP-Bild an den Browser ausliefern? ===
Über den Parameter //**nowebp=true**// kann das hinterlegte Bild anstatt das webP-Bild ausgeliefert werden.
/mein_bild.jpg?nowebp=true