Hat von euch schon mal jemand versucht das Prinzip von Adaptive Images in Contao zu übernehmen?
Falls ja, wie sehen eure Erfahrungen damit aus? Probleme? Lösungsansätze?
Druckbare Version
Hat von euch schon mal jemand versucht das Prinzip von Adaptive Images in Contao zu übernehmen?
Falls ja, wie sehen eure Erfahrungen damit aus? Probleme? Lösungsansätze?
Hmm,
selbst auseinander gesetzt hab ich mich mit dem Thema noch nicht.
Allerdings wurde hier im Forum der o.g. Link vor nicht allzu langer Zeit schon mal gepostet.
Bin nur am Überlegen in welchem Zusammenhang.
Gehe nochmal in mich.
Grüße, Cliff
Guten Morgen zusammen,
ich bin gerade am tüfteln in Sachen Responsive Design. Um in kleineren Devices auch entsprechend kleiner Bilder auszuliefern, habe ich versucht mit dem Tool Adaptive Images zu arbeiten (https://github.com/MattWilcox/Adaptive-Images).
Leider erzeugt das Script zusammen mit den htaccess-Einstellung von CONTAO einen Internal Server Error. Hat jemand von Euch das Tool schon im Einsatz oder vielleicht eine Alternative wie man das Thema in CONTAO erschlagen kann?
Danke schon mal für eure Hilfe...
Hallo Nina, hast Du diesbezüglich mittlerweile Erfahrungen? Habe eben einen neuen Thread zum Thema aufgemacht, hätte mal vorher gescheit das Forum durchsuchen müssen :oZitat:
Zitat von Nina
Kennst du die Erweiterung lazyResize von tristan?
Hallo Schman,
herzlichen Dank fürs Verschieben :cool:
Ich hab die Erweiterung mal kurz gesehen, es aber ehrlich gesagt nicht so ganz verstanden. Wie funktioniert denn die Erweiterung? Binde ich ganz normal ein Bild über CONTAO ein und je nach Device-Auflösung passt sich die Bildgröße an? Oder muss ich an dem Templates etwas ändern?
Danke schon mal im Voraus für die Hilfestellungen :)
Hallo zusammen,
ich klinke mich hier auch mal ein.
ich habe heute versucht adaptive images einzusetzen.
habe auf einer subdomain contao 2.11.4 laufen.
sobald ich in die htaccess den angegebenen Code unter <IfModule mod_rewrite.c> einsetze gibt es einen Internal Server Error 500
wie creativx das auch beschrieben hat.
weiss jemand Rat woran das liegen kann?
herzl.Gruß DoroCode:# Adaptive-Images -----------------------------------------------------------------------------------
# Add any directories you wish to omit from the Adaptive-Images process on a new
line, as follows:
# RewriteCond %{REQUEST_URI} !some-directory
# RewriteCond %{REQUEST_URI} !another-directory
RewriteCond %{REQUEST_URI} !assets
# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above
directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
# END Adaptive-Images -------------------------------------------------------------------------------
Hallo Doro,
die originale .htaccess von Contao schaltet die RewriteEngine für Bilder ab:
Vielleicht klappt es nicht, die dann sofort wieder einzuschalten?Code:##
# Do not rewrite requests for static files or folders such as style sheets,
# images, movies or text documents. Do not add the URL suffix here!
##
<FilesMatch "\.(htm|php|js|css|htc|png|gif|jpe?g|ico|xml|csv|txt|swf|flv|eot|woff|svg|ttf|pdf|gz)$">
RewriteEngine Off
</FilesMatch>
Versuch mal, png|gif|jpe?g aus obiger Liste zu entfernen, da sich AI ja offensichtlich darum kümmern soll.
Also:
Gruß,Code:##
# Do not rewrite requests for static files or folders such as style sheets,
# images, movies or text documents. Do not add the URL suffix here!
##
<FilesMatch "\.(htm|php|js|css|htc|ico|xml|csv|txt|swf|flv|eot|woff|svg|ttf|pdf|gz)$">
RewriteEngine Off
</FilesMatch>
folkfreund
Hallo folksfreund,
hab ich getestet, leider ohne Erfolg, wiederum ein Internal Servererror:(
ich suche/teste weiter, hat das denn sonst noch niemand aus der Contaogemeinde getestet?
wundert mich. Doro
Hallo Doro,
also bei mir funzt es jetzt. Ich denke es lag daran, dass ich die kopierten Fragmente für die htaccess mit Zeilenumbruch eingebaut hatte. Da waren quasi Texte aus den Kommentarzeilen so umgebrochen dass die nicht mehr auskommentiert waren. Das hab ich bereinigt und jetzt funktioniert es. Auch das Cachen der Bilder funktiniert :)
Hier mal den Part den ich in die htaccess eingebaut habe:
Dabei habe ich dann das Verzeichnis tl_files/layout ausgeklammert, dort liegen die Dateien fürs Design drin. Ich teste mal weiter, aber scheint wiegesagt zu funktionieren .Code:# Adaptive-Images
# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
# RewriteCond %{REQUEST_URI} !tl_files/layout
# RewriteCond %{REQUEST_URI} !another-directory
RewriteCond %{REQUEST_URI} !tl_files/layout
# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
# END Adaptive-Images
hey cool, scheint auch bei mir so zu klappen,
zumindest kein Sever Error mehr, ich dachte ich hätte auf mögliche "Kopierfehler" geachtet, aber offenbar nicht genug, super vielen vielen Dank.
Hallo,Zitat:
Zitat von schman
Kann diese Erweiterung nicht im Katalog finden - ist es denn eine 'eigenstaendige' Erweiterung, oder wird dabei das Script von adaptive-images.com eingebunden? Das ist mir gerade nicht ganz klar.
MfG,
Stephan
Du kannst die Erweiterung hier herunterladen und anschließend manuell installieren. Achte dabei aber auf die korrekte Verzeichnisstruktur!
Hallo!
Auch ich bin gerade daran, "Adaptive Images" zu implementieren...
Frage mich dabei folgendes:
1.
Wertet das Script die Breite des Browser-Fensters oder die des Gerätes/Bildschirms aus? Wünschenswert wären ja eigentlich vor allem auch jene des Browser-Fensters!
2.
Wenn ich z.B. folgendes festgelegt habe:
$resolutions = array (1280, 960, 640);
entsprechend/sinngemäß meiner CSS-Media-Queries für's Layout:
@media screen and (min-width: 640px) and (max-width: 959px) {...}
@media screen and (min-width: 960px) and (max-width: 1279px) {...}
@media screen and (min-width: 1280px) {...}
...bedeutet das dann, dass das Script bei folgenden festgestellten Breiten (seien es nun die vom Browser-Fenster oder die vom Device..) alle Bilder in folgenden Breiten ausliefert?
festgestellt ausgelieferte Bildbreite 640 640 800 960 1000 1280 usw. usf.
Es werden also die Bilder immer in der passenden, nächst größeren Breite generiert/ausgeliefert!? Richtig?
Dabei wird wohl also immer davon ausgegangen, dass die Bilder den gesamten sichtbaren Bereich ausfüllen sollen... was ja z.B. bei der Verwendung von Hintergrundbildern in voller Größe Sinn machen mag. Doch was ist mit "normalen" Content-Bildern, welche ja i.d.R. nur einen Bruchteil der vollen verfügbaren Browser-Fenster-Breite im Layout ausmachen..!?
Wenn also z.B. das Browser-Fenster 1000px, das entsprechende Layout für den Container 900px, und jenes für den Haupt-Content meinetwegen 600px breit ist, dann müssen die Content-Bilder ja auch nicht größer als z.B. 600px ausgegeben werden!
Hallo Zusammen,
habe auch gerade Adaptive Images mit Contao3 genutzt, allerdings funktioniert es nur, wenn ich folgende Zeile in der .htaccess auskommentiere:
Die Zeile hat ja aber bestimmt einen Sinn, der mir allerdings nicht ganz klar ist.Code:<FilesMatch "\.(htm|php|js|css|htc|png|gif|jpe?g|ico|xml|csv|txt|swf|flv|eot|woff|svg|ttf|pdf|gz)$">
RewriteEngine Off
</FilesMatch>
Kann ich die Zeile einfach auskommentieren? Jemand Erfahrung oder Ideen?
Hallo Leute
Hat das jemand zwischenzeitlich zum laufen gebracht?
gs Zoidberg
hallo zoidberg,
nee adaptive images habe ich leider auch nicht zum Laufen gebracht,
aber vielleicht ist das bereits erwähnte Lazy Resize eine Alternative für Dich
https://github.com/bit3/contao-lazyResize#readme
Gruß Doro
Habe adaptive images zum laufen bekommen. Man muss eigentlich nur die Anleitung von der Seite durchführen ;)
Hier eine kurze Erklärung:
Das muss in den HTML Header rein. Im Template oder übers Layout. Wie man will.HTML-Code:<script>document.cookie='resolution='+Math.max(screen.width, screen.height)+'; path=/';</script>
Dann die .htaccess Datei anpassen.
Hierzu musst du die Rewrite Rules suchen. Ich habe es oberhalb der Contao Rules eingefügt:
Bei dieser config muss die adaptive-image Datei im Root liegen. Wenn du einen Pfad angibst, kannst du es auch woanders ablegen.Code:RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
Dann noch die Zeile Files Match anpassen:Code:RewriteRule \.(?:jpe?g|gif|png)$ anderer/ordner/adaptive-images.php
Hier muss png|gif|jpe?g entfernt werden. Sieht dann so aus:Code:<FilesMatch "\.(htm|php|js|css|htc|png|gif|jpe?g|ico|xml|csv|txt|swf|flv|eot|woff|svg|ttf|pdf|gz)$">
Viel Spaß damit ;).Code:<FilesMatch "\.(htm|php|js|css|htc|ico|xml|csv|txt|swf|flv|eot|woff|svg|ttf|pdf|gz)$">
Ist zwar schon etwas Älter, aber trotzdem noch schnell eine Antwort. Das liegt am Javascript:Zitat:
Zitat von Hendriks
HTML-Code:<script>document.cookie='resolution='+Math.max(screen.width, screen.height)+'; path=/';</script>
Das holt sie die "Screen Width" also Bildschirmbreite. Wenn du also die Browserbreite haben willst musst du anstelle von "screen.width" logischerweise "window.innerWidth" einsetzen. Dann nimmt er die Browser Breite. Klar soweit? ;)
Davon rate ich allerdings ab, es sei denn, es macht dir Spaß jede Menge Ajax Requests einzubauen. Wenn die Seite auf einem 24" geladen wird mit 1920 breite und du den Browser auf 600px breite beim laden hast. Sieht dein Bild nicht wirklich schön aus, beim vergrößern des Browser Fensters. Es sei denn du lädst es bei einem enstrechenden Breakpoint neu von Server...
Hallo Zero
Danke für deine Erklärungen. Genau so wie du es erklärt hast, habe ich es durchgespielt. Doch ich brings einfach nicht auf die Reihe. Habs auch mit und ohne Contao URL Rewrites probiert. Mit MAMP auf Mac.
Nun Grundsatz Frage (Eventuell hackt's ja hier....):
Ich habe ein Responsive Grid Design (960.gs / adapt.js). von 0-980px wird die mobil css geladen. ab 981-2540px die desktop css.
Das Bild welches ich zum testen eingebaut habe ist genau 980px gross. im adapt-images.php habe ich nun 980 als breakpoint definiert. also wenn die seite kleiner als 980 ist sollte er das bild doch skalieren! oder verstehe ich das falsch?
Reicht das als Erklärung? Bildschirm Breite ist nicht gleich Browser Breite oder Viewport Breite des Browsers.Zitat:
Zitat von Zero
Dein CSS holt sich den Viewport des Browsers.
Adaptive Images holt sich wie oben von mir beschrieben die Bildschirmbreite.
Das heißt: Egal wie Breit dein Browser Fenster ist: Der Breakpoint bei Adaptive Images ändert sich nicht -> Der Bildschirm wird seine Breite nicht ändern...
Erst wenn du eine andere Bildschirmauflösung hast, wird adaptive Images einen anderen Breakpoint wählen.
Wie du es testen kannst:
Öffne deine Seite auf irgendeinem Smartphone und speichere ein Bild ab, von dem du weißt, dass es größer sein müsste als die Bildschirmpreite des Gerätes. Dann schau dir die Auflösung an und siehe da: Sie wird kleiner sein ;).
// Edit:
Adaptive-Images skaliert nicht automatisch -> Beim laden der Seite werden alle Bilder, die Größer sind als die eingestellten adaptive Breakpoints im Bezug auf die Bilschirmbreite entsprechend in ihrer Auflösung auf die Fixe Breakpoint breite verkleinert. -> In deinem Fall wohl auf 980px.
Hallo Zero
Danke für deine Erklärung. Egal wo ich es teste, ios-Simulator oder mit veränderter Desktop Display Auflösung. Nix tut sich.
Darum hab ich ein test gemacht um festzustellen ob mein adaptive-images.php file überhaupt geladen wird, wenn sich auf der Seite was tut...
Habe im adaptive-images.php file eine logger geschrieben der ein file schreibt, sobald die datei aufgerufen wird. Wenn ich adaptive-images.php im Browser direkt aufrufe wird das log file auf dem Server erstellt. Jedoch niemals wenn ich index.php bzw. das Template mit
... aufrufe.Code:<script>document.cookie='resolution='+Math.max(window.innerWidth, window.innerHeight)+'; path=/'; </script>
Für mich bedeutet dies dass mein .php file erst gar nicht angekickt wird. mit path=/ im script sollte er ja auf den DOCUMENT ROOT zugreifen wo das .php file liegt. Ich denke das meine .htaccess datei ein Fehler drin hat, oder mein MAMP Server diese Aktion verbietet.....
ich bleibe drann...
gs Zoidberg
Anhang 10034
cookie wird meines erachtens auch korrekt erstellt. er will es einfach nicht korrekt an die .php datei senden...
Komisch...
Hast du in irgendeinem Ordner vorher eine .htaccess Datei liegen?
Falls diese mod_rewrite benutzen, kann es sein, dass sich diese gegenseiteig aufheben. Enferne die mal oder benenne sie um zum testen. Es muss gehen ;).
Lieber Zero
Habe das Problem gefunden, hoffe du hast noch ein tipp...
Ich verwende bei meinen Projekten grundsätzlich URL's ohne suffix. Daher schalte ich immer im Contao Backend die suffix aus und kommentiere im .htaccess folgende Zeile aus:
Code:# If you do not want to use an URL suffix at all, you have to add a second
# line to prevent URLs that point to folders from being rewritten (see #4031).
#
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .* index.php [L]
Somit bekomme ich URL's wie folgt. www.meineseite/produkte/schueh (ohne .php / .html etc.)
Nun. Adaptive-Images funktioniert nun endlich, jedoch nur wenn ich die Seite MIT suffix einstelle. Wenn ich die Suffix ausschalte wie oben, findet contao die bilder nicht mehr. weder im frontend noch im backend. das problem muss irgendwo hier liegen....
Verwendest du die suffix bei deiner seite?Code:<FilesMatch "\.(htm|php|js|css|htc|ico|xml|csv|txt|swf|flv|eot|woff|svg|ttf|pdf|gz)$">
RewriteEngine Off
</FilesMatch>
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
Jetzt wirds kompliziert ;) Ich verstehe diese regex Teile noch nicht so ganz. Habe mich da bisher immer darum gedrückt...
Schau dir mal das hier an:
https://community.contao.org/de/show...l=1#post225964
Ich verwende die *.html suffixe auf dieser Seite. Deshalb ging es wahrscheinlich auf Anhieb...
Hallo Zero
Habe das Problem mit der .htaccess gelöst. Hier meine Lösung: Adaptive-Images + NO Url's suffix in Contao. Funktioniert !
grüsse ZoidbergCode:###-----------------------------------------------------------------------###
###-------------------------- ADAPTIVE-IMAGES ----------------------------###
###-----------------------------------------------------------------------###
## PUSH SELECTED IMAGES TO THE SCRIPT ADAPTIVE-IMAGES.PHP
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
<FilesMatch "\.(htm|php|js|css|htc|ico|xml|csv|txt|swf|flv|eot|woff|svg|ttf|pdf|gz)$">
RewriteEngine Off
</FilesMatch>
## OMIT FOLDERS
RewriteCond %{REQUEST_URI} !assets
RewriteCond %{REQUEST_URI} !contao
RewriteCond %{REQUEST_URI} !share
RewriteCond %{REQUEST_URI} !system
RewriteCond %{REQUEST_URI} !templates
## URL REWRITE - NO SUFFIX OPTION FOR ADAPIVE IMAGES
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule (.*) index.php [L]
###-----------------------------------------------------------------------###
###-------------------------- ADAPTIVE-IMAGES ----------------------------###
###-----------------------------------------------------------------------###
Funktioniert super, danke!Zitat:
Zitat von Zero
Wie gehe ich jetzt vor wenn ich einen Unterordner ignorieren möchte?
RewriteCond %{REQUEST_URI} !files/unterordner
funktioniert nämlich nicht…
Vielleicht weiß jemand Rat?!
Ist schon eine Weile her. Aber hiermit geht's ;). Der oben beschriebene Weg hat das Problem mit dem Schrägstrich am Anfang. Und deshalb macht es Probleme...Zitat:
Zitat von Mecintosch
Code:RewriteCond %{REQUEST_URI} !^/?(contao|system|files/unterordner)/