Adaptive Images für Contao

[Nina]

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?

[cliffparnitzky]

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

[creativx]

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

[creativx]

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?

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

[schman]

Kennst du die Erweiterung lazyResize von tristan?

[creativx]

Hallo Schman,

herzlichen Dank fürs Verschieben

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

[Doro]

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?

# 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 -------------------------------------------------------------------------------

herzl.Gruß Doro

[folkfreund]

Hallo Doro,

die originale .htaccess von Contao schaltet die RewriteEngine für Bilder ab:

  ##
  # 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>

Vielleicht klappt es nicht, die dann sofort wieder einzuschalten?
Versuch mal, png|gif|jpe?g aus obiger Liste zu entfernen, da sich AI ja offensichtlich darum kümmern soll.
Also:

  ##
  # 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>

Gruß,
folkfreund

[Doro]

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

[creativx]

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:

  # 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

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 .

[Doro]

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.

[StephanP]

Kennst du die Erweiterung lazyResize von tristan?

Hallo,

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

[xchs]

Du kannst die Erweiterung hier herunterladen und anschließend manuell installieren. Achte dabei aber auf die korrekte Verzeichnisstruktur!

[Hendriks]

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!

[plusx]

Hallo Zusammen,

habe auch gerade Adaptive Images mit Contao3 genutzt, allerdings funktioniert es nur, wenn ich folgende Zeile in der .htaccess auskommentiere:

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

Die Zeile hat ja aber bestimmt einen Sinn, der mir allerdings nicht ganz klar ist.
Kann ich die Zeile einfach auskommentieren? Jemand Erfahrung oder Ideen?

[drzoidbergb]

Hallo Leute
Hat das jemand zwischenzeitlich zum laufen gebracht?

gs Zoidberg

[Doro]

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

[Zero]

Habe adaptive images zum laufen bekommen. Man muss eigentlich nur die Anleitung von der Seite durchführen

Hier eine kurze Erklärung:

<script>document.cookie='resolution='+Math.max(screen.width, screen.height)+'; path=/';</script>

Das muss in den HTML Header rein. Im Template oder übers Layout. Wie man will.

Dann die .htaccess Datei anpassen.
Hierzu musst du die Rewrite Rules suchen. Ich habe es oberhalb der Contao Rules eingefügt:

RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

Bei dieser config muss die adaptive-image Datei im Root liegen. Wenn du einen Pfad angibst, kannst du es auch woanders ablegen.

RewriteRule \.(?:jpe?g|gif|png)$ anderer/ordner/adaptive-images.php

Dann noch die Zeile Files Match anpassen:

<FilesMatch "\.(htm|php|js|css|htc|png|gif|jpe?g|ico|xml|csv|txt|swf|flv|eot|woff|svg|ttf|pdf|gz)$">

Hier muss png|gif|jpe?g entfernt werden. Sieht dann so aus:

<FilesMatch "\.(htm|php|js|css|htc|ico|xml|csv|txt|swf|flv|eot|woff|svg|ttf|pdf|gz)$">

Viel Spaß damit .

[Zero]

Hallo!

Auch ich bin gerade daran, "Adaptive Images" zu implementieren...

Frage mich dabei folgendes:


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

Ist zwar schon etwas Älter, aber trotzdem noch schnell eine Antwort. Das liegt am Javascript:

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

[drzoidbergb]

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?

[Zero]

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?

Reicht das als Erklärung? Bildschirm Breite ist nicht gleich Browser Breite oder Viewport Breite des Browsers.

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.

[drzoidbergb]

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

<script>document.cookie='resolution='+Math.max(window.innerWidth, window.innerHeight)+'; path=/'; </script>

... aufrufe.

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

[drzoidbergb]

cookie.jpg


cookie wird meines erachtens auch korrekt erstellt. er will es einfach nicht korrekt an die .php datei senden...

[Zero]

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 .

[drzoidbergb]

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:

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

 <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

Verwendest du die suffix bei deiner seite?

[Zero]

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

[drzoidbergb]

Hallo Zero

Habe das Problem mit der .htaccess gelöst. Hier meine Lösung: Adaptive-Images + NO Url's suffix in Contao. Funktioniert !

 ###-----------------------------------------------------------------------###
 ###-------------------------- 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 ----------------------------###
 ###-----------------------------------------------------------------------###

grüsse Zoidberg

[Mecintosch]

Habe adaptive images zum laufen bekommen. Man muss eigentlich nur die Anleitung von der Seite durchführen

Hier eine kurze Erklärung:

<script>document.cookie='resolution='+Math.max(screen.width, screen.height)+'; path=/';</script>

Das muss in den HTML Header rein. Im Template oder übers Layout. Wie man will.

Dann die .htaccess Datei anpassen.
Hierzu musst du die Rewrite Rules suchen. Ich habe es oberhalb der Contao Rules eingefügt:

RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

Bei dieser config muss die adaptive-image Datei im Root liegen. Wenn du einen Pfad angibst, kannst du es auch woanders ablegen.

RewriteRule \.(?:jpe?g|gif|png)$ anderer/ordner/adaptive-images.php

Dann noch die Zeile Files Match anpassen:

<FilesMatch "\.(htm|php|js|css|htc|png|gif|jpe?g|ico|xml|csv|txt|swf|flv|eot|woff|svg|ttf|pdf|gz)$">

Hier muss png|gif|jpe?g entfernt werden. Sieht dann so aus:

<FilesMatch "\.(htm|php|js|css|htc|ico|xml|csv|txt|swf|flv|eot|woff|svg|ttf|pdf|gz)$">

Viel Spaß damit .

Funktioniert super, danke!

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?!

[Zero]

Funktioniert super, danke!

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

RewriteCond %{REQUEST_URI} !^/?(contao|system|files/unterordner)/