Fatchip GmbH Wiki

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== 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: \\
<code yaml>
"repositories": [{
  "type": "composer",
  "url": "https://packages.fatchip.de/packages"
}]
</code>

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 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: \\ <code javascript>
  "autoload": {
    "psr-4": {
         "FATCHIP\\fcwebp\\": "./source/modules/fc/fcwebp"
    }
  },
</code> 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:\\
<code>vendor/bin/oe-console oe:module:install-configuration source/modules/fc/fcwebp
vendor/bin/oe-console oe:module:apply-configuration </code>
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** 
<code>RewriteCond %{REQUEST_URI} (\/out\/pictures\/generated\/)</code>
das Nachfolgende ein:
<code>
## 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 ##  
</code>
Ersetzen Sie die Platzhalter mit Ihrer Domain.
Sollten Sie ein **Enterprise Edition** einsetzen, trennen Sie die URLs Ihrer Shops mit einer Pipe
<code>
RewriteCond %{HTTP_HOST} ^[REPLACE WITH YOUR DOMAIN IN FORM www\.fatchip\.de|REPLACE WITH YOUR SECOND DOMAIN IN FORM www\.fatchip\.de]
</code>

Fügen Sie am Ende der ".htaccess" folgendes ein:
<code>
## FATCHIP WEBP MODULE START 2 ##
<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp
## FATCHIP WEBP MODULE END 2 ##
</code>

=== 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.

<code>/mein_bild.jpg?nowebp=true</code>
Fatchip GmbH Wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Seiten-Werkzeuge
