Danke, werde ich mir mal ansehen.
Danke, werde ich mir mal ansehen.
Mein Blog -> brothers-project.de
Hallo,
wäre schön nervt nähmlich ein bischen das ich im Moment Deine Tolle Erweiterung deswegen nicht nutzen kann.
Nun denn. Ein paar Anregungen:
- Der momentane Stand wird nicht mehr weiterentwickelt
- Es wird eine komplette Überarbeitung geben, da die Momentane Lösung nicht richtig funktioniert
- Das liegt am Cookie -> iOS blockiert das Cookie beim ersten Aufruf mit default Sicherheitseinstellungen (selbes Problem hat auch adaptive Images)
- Durch das vorladen eines Snippets um das Cookie zu setzen kommt es zu mehr Problemen als man lösen kann...
- Habe zwei Ideen in Aussicht:
- Picture Polyfill -> http://scottjehl.github.io/picturefill/
- Srcset Polyfill -> https://github.com/borismus/srcset-polyfill
Ich stelle diese Beide Ideen mal hier zur Diskussion. Das aus dem Grund da beide jeweils einen enormen Nachteil haben.
Bei Picture Polyfill bin ich mir nicht sicher was das für SEO Auswirkunegen hat. Evtl. hat hier jemand mal einen Erfahrungsbericht?
Bei Srcset Polyfill kommt es zu dem Problem, dass ein Bild 2x heruntergeladen wird, sollte eine andere Auflösung angefordert werden. -> https://github.com/borismus/srcset-polyfill/issues/11
Evtl. hat hier jemand mal einen Erfahrungsbericht?
Ich zerbreche mir hier schon länger den Kopf und habe außer diesen beiden Lösungen noch nichts weiterführendes.
Weiterführende Links:
- http://html5doctor.com/html5-adaptiv...-of-round-one/
- http://html5doctor.com/responsive-im...f-year-report/
Jetzt bin ich gespannt auf eure Ideen. So wie die Erweiterung momentan ist, kann und wird sie nicht bleiben.
Mein Blog -> brothers-project.de
Hallo,
ich wollte fragen ob es schon eine Lösung gibt.
Leider funktioniert die Erweiterung unter Contao 3.23 nicht und ich wollte sie, nachdem sie so toll im Buch von Thomas Weitzel beschrieben ist, gern einsetzen.
Vielen Dank
Stefan
Hallo MarisaSperling
wie Du kannst das Fenster nicht verkleinern, du musst doch nur an der ecke ziehen
Mit Strg+F5 rufst Du dann die Seite noch auf.
Verstehe ich jetzt nicht.
gruße
Space
Erstmal: Entschuldgung für die lange Funkstille.
Ja bin gerade dabei sie umzusetzen. Werde die PictureFill Lösung umsetzen. Siehe -> https://github.com/scottjehl/picturefill/tree/v1.2.0
Diese wird für die Contao Version 3.2.x verfügbar sein. Ältere Versionen werden nur nach Rücksprache unterstützt.
Änderungen / Feature:
- Komplette Neuerstellung der Erweiterung
- Weiterhin kein htaccess erforderlich
- Es kann für jedes Bild die Größen für die Breakpoints hinterlegt werden mit Zuschneide Modus
z.B. ( breite | höhe | modus , ... ) z.B. ( 200|300|center_center, 300|0|proportional )- Breakpoints werden weiterhin global konfiguriert
- Einklinken von Erweiterungen über Konfig Variable oder ähnliches
- Keine Cookies mehr um die Auflösung einzulesen!
Wiedereinmal zur Disussion:
- Ersetzung von Bildern im TinyMCE Editor (diesmal noch aufwändiger...)
- Ersetzung von Bildern im HTML Editor
Werde demnächst eine Beta im Repo Veröffentlichen. Es ist schwierig ein Datum zu nennen, da ich sehr unregelmäßig gerade dazu komme.
Wenn aber alles glatt läuft, sollte das noch bis zum Wochenende drin sein. Halte euch aber auf dem laufenden
Geändert von Zero (23.03.2014 um 18:37 Uhr) Grund: Link korrigiert
Mein Blog -> brothers-project.de
Hi Zero
ich denke Du musst Dich nicht entschuldigen.
Ich freue mich aber schon auf die neue Erweiterung. Bin schon sehr gespannt.
Hört sich alles Super an.
Gruß
space
So. Nun mal ein paar Neuigkeiten. Habe soweit fast alles implementiert, was ich mir vorgenommen habe
Das Modul Integriert sich im Theme direkt.
1 Theme integration.png
Somit kann man für jedes Modul und auch Element ein Responsive Image Set erstellen.
Gerade werden noch keine Multi SRCs unterstützt. Das kommt noch.
In einem Responsive Image Set kann man alle Felder angeben, welche für das bild verwendet werden sollen. Das hat den vorteil, dass man eigene Module einfach integrieren kann.
3 set form.png
Die Breakpoints können komfortabel über einen MCW Fieldset verwaltet werden. Hier ein herzliches Danke and die MCW Entwickler .
4 breakpoint settings.png
Das Modul arbeitet folgendermaßen
- Es liefert die Image sets für die Inhaltselemente Text, Akkordion (Einzel element) und Bild mit. Das bedeutet die Feldzuordnungen sind fix Programmiert.
- Als Breakpoints werden die Globalen verwendet.
5 global breakpoint settings.png- Die default image sets können durch anlegen eines Image sets im Theme überschrieben werden und erlauben dann mehrere Einstellmöglichkeiten.
- Aus diesen angaben wird dann das PictureFill erstellt.
Die Konfiguration
- Das Modul liefert die entsprechenden Core Templates mit ce_accordion, ce_image und ce_text
Es wird um das image Tag das entsprechende Markup ergänzt:
PHP-Code:
<?if ($this->pictureFillSingleSRC): ?>
<span data-picture data-alt="<?=$this->pictureFillSingleSRC[0]->alt; ?>"<?if ($this->title): ?> data-title="<?=$this->pictureFillSingleSRC[0]->title; ?>"<?endif; ?>>
<?foreach ($this->pictureFillSingleSRC as $key=>$picture): ?>
<span data-src="<?=$picture->src; ?>"<?if ($picture->breakPoint && $key > 0): ?> data-media="(min-width: <?=$picture->breakPoint; ?>)"<?endif; ?>></span>
<?endforeach; ?>
<noscript>
<?endif; ?>
<img src="<?=$this->src; ?>"<?=$this->imgSize; ?> alt="<?=$this->alt; ?>"<?if ($this->title): ?> title="<?=$this->title; ?>"<?endif; ?>>
<?if ($this->pictureFillSingleSRC): ?>
</noscript>
</span>
<?endif; ?>
- Es muss also geprüft werden, ob diese Templates angepasst wurden und gegebenenfalls muss der fehlende Code ergänzt werden.
- Aus Entwicklertechnischen Gründen und diversen eigenanpassung habe ich mich dafür entschieden, den Feldnamen des Bildes in die Variable einfließen zu lassen. Für das Feld singleSRC wird folgende Variable befüllt '$this->pictureFillSingleSRC'
Ich hoffe ich habe nichts vergessen
Das Modul landet hoffentlich die nächsten Tage als beta im Repo.
Testen kann man es schon jetzt wenn man den master Zweig auscheckt und installiert.
Zur Info: man kann die Breakpoints auch bei den Bildern direkt konfigurieren. Allerdings ist das noch nicht implementiert... das kommt dann mit der beta Ist als Hinweis für die alpha Tester gedacht...
Ich garantiere nicht für einwandfreies verhalten und für Schäden muss jeder selber haften
Geändert von Zero (24.03.2014 um 00:05 Uhr) Grund: Korrektur
Mein Blog -> brothers-project.de
Endlich eine Beta
https://contao.org/de/extension-list...ve_images.html
Fehler am besten gleich hier posten:
https://github.com/Zeromax/responsive_images/issues
Oder hier im Forum
Viel Spaß beim testen.
Mein Blog -> brothers-project.de
Hallo,
Super... kann das evtl. auch unter 3.1.5 noch laufen?
Geändert von Zero (25.03.2014 um 20:40 Uhr)
Mein Blog -> brothers-project.de
Hallo Zero,
und wenn man diese Super-Erweiterung auch noch über den Composer installieren könnte ?!
Hast Du da schon was in Planung?
Sabine
Hi
Wird bei dieser Erweiterung in irgendeiner Form berücksichtigt, ob es sich um ein hochauflösendes display (retina) handelt?
In der Beschreibung habe ich diesbezüglich keine Angaben gefunden.
Danke für die Angabe.
Mein Blog -> brothers-project.de
Sicher . Es wird folgendes HTML generiert:
Dass nun ein Bild dargestellt wird, muss immer eine bestimmte Mindesbreite im Browser vorhanden sein. Die Mindestbreite sind die Breakpoints, welche man definieren kann.HTML-Code:<figure class="image_container"> <span data-alt="" data-picture=""> <span data-src="assets/images/b/Screenshot-e8ed56db.png"></span> <span data-media="(min-width: 1000px)" data-src="assets/images/f/Screenshot-24f8290f.png"></span> <span data-media="(min-width: 1200px)" data-src="assets/images/1/Screenshot-349ea301.png"> <img alt="" src="assets/images/1/Screenshot-349ea301.png"> </span> <noscript> <img src="files/bilder/Screenshot.png" width="1920" height="1200" alt=""> </noscript> </span> </figure>
Für das obige Beispiel habe ich folgende Konfiguration vorgenommen:
Screenshot (12).png
Das bedeutet in dem obigen HTML Code: Bei einer Browser Fenster mindestbreite von 1200px wird ein Bild mit einer Auflösung von 300px × 300px geladen.
Du kannst nahezu konfigurieren was du willst. Und es wird Abhängig von der Browserbreite das Passende Bild per Javascript geladen.
Ergänzung:
Eben nochmal nachgelesen und es gibt die Möglichkeit die Eigenschaft Pixel-Ratio hinzuzufügen. https://github.com/scottjehl/picture...-media-queries
Das ist allerding nicht implementiert.
Geändert von Zero (28.03.2014 um 21:14 Uhr)
Mein Blog -> brothers-project.de
Mein Blog -> brothers-project.de
Ich habe folgende Fehlermeldung bei aufruf der Startseite.
Auf dem Webserver läuft PHP 5.5 und MySQL 5.x
Contao Version 3.2.3
-- Hier die Fehlermeldung --
Hat jemand ein Hinweis?HTML-Code:PHP Warning: preg_match_all(): Compilation failed: unrecognized character after (?< at offset 13 in /home/www/html/system/modules/responsive_images/classes/ResponsiveImages.php on line 195 #0 [internal function]: __error(2, 'preg_match_all(...', '/home/www/html...', 195, Array) #1 /home/www/html/system/modules/responsive_images/classes/ResponsiveImages.php(195): preg_match_all('/(src=("|')(?<f...', '<img src="asset...', '') #2 /home/www/html/system/modules/responsive_images/classes/ResponsiveImages.php(103): Contao\ResponsiveImages->getFileToReplace('/<img([^>]|(?<=...', '/(src=("|')(?<f...', '<!DOCTYPE html>...', 'img') #3 /home/www/html/system/modules/core/classes/FrontendTemplate.php(164): Contao\ResponsiveImages->replaceImages('<!DOCTYPE html>...', 'fe_page') #4 /home/www/html/system/modules/core/pages/PageRegular.php(183): Contao\FrontendTemplate->output(true) #5 /home/www/html/index.php(249): Contao\PageRegular->generate(Object(Contao\PageModel), true) #6 /home/www/html/index.php(432): Index->run() #7 {main}
Viele Grüße
aadursun
Hey,
funktioniert die Erweiterung eigentlich auch mit Hintergrundbildern, die über CSS eingebunden sind?
Webentwickler bei Paus Design & Medien in Bocholt / NRW: www.paus-medien.de
Meine Website: www.grotstabel.com (Sorry seit Jahren keine Zeit für ein Redesign...)
Xing-Account: www.xing.com
Hallo Ali,
ich tippe mal auf die PHP Version.
Setze die einmal auf 5.3 oder 5.4.
In meiner Beispielseite läuft das mit PHP 5.3.
---------------------------------
Beste Grüße planepix
Contao für Webdesigner (Website), Twitter: @contaowebdesign
weitzeldesign
Contao-Sprechstunde
Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
Contao Jahrbuch: www.contao-jahrbuch.de
Contao Agenturtag: www.contao-agenturtag.de
Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki
Schon wieder ein Update?
Glücklich sind die, die den Wert erkennen – und wertschätzen.
„Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”
Ich habe alle PHP Version von 5.2 - 5.3 - 5.4 & 5.5 getestet; das gleiche Verhalten.
Ja Bilder werden angezeigt und beim verkleinern des Browsers responsive dargestellt.
Der Fehler kommt nur auf dem Iphone; nicht in dem PC / NB Browser.
VG
aadursun
Ok. Dann brauchts jemand der solche ein Endgerät zum Testen hat.
---------------------------------
Beste Grüße planepix
Contao für Webdesigner (Website), Twitter: @contaowebdesign
weitzeldesign
Contao-Sprechstunde
Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
Contao Jahrbuch: www.contao-jahrbuch.de
Contao Agenturtag: www.contao-agenturtag.de
Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki
Schon wieder ein Update?
Glücklich sind die, die den Wert erkennen – und wertschätzen.
„Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”
Gut dann werde ich gleich eine Amazon-Wunschliste mit einem Ipad, Iphone anlegen.
Es kann ja vielleicht an der Bildergröße liegen; mal schauen!
Viele Grüße
aadursun
Mein Blog -> brothers-project.de
Mein Blog -> brothers-project.de
Hey, ja das hast Du eigentlich Recht.
Ich habe einen Slider mit Hintergrundbildern gebaut, diese sind aber immer mindestens 2000 Pixel groß, damit die auf jedem rechner vernünftig aussehen. Der Slider ist responsive, wächst also mit der Bildschirmgröße mit. Die Hintergrundbilder werden aber nicht direkt über eine externe CSS Datei geladen sondern werden über das Template in das Inline-CSS eingebunden.
Es gibt also im Backend eine Eingabemaske für das Bild und die Ausgabe funktioniert über ein modifiziertes Template. Daher wäre es halt praktisch, wenn auch BG Bilder funktionieren würden.
Puuh, kompliziert zu erklären die Baustelle :-)
Webentwickler bei Paus Design & Medien in Bocholt / NRW: www.paus-medien.de
Meine Website: www.grotstabel.com (Sorry seit Jahren keine Zeit für ein Redesign...)
Xing-Account: www.xing.com
Ja, ich verwende die aktuelle Version, siehe
responsive_images 1.0.0 stable 2
Das Update / die Reparatur brachte keinen Erfolg.
Grüße
aadursun
Theoretisch lässt es sich mit der aktuellen Beta umsetzen.
Siehe auch diesen Scrren shot: https://community.contao.org/de/atta...6&d=1395601650
Wenn du das für deinen Slider konfigurierst musst du dir nur noch die Template Variablen ansehen und damit kannst du dann in einem Style tag die entsprechenden media querries ausgeben. Das sollte gehen. Ist aber ungetestet.
Mein Blog -> brothers-project.de
Mein Blog -> brothers-project.de
Webentwickler bei Paus Design & Medien in Bocholt / NRW: www.paus-medien.de
Meine Website: www.grotstabel.com (Sorry seit Jahren keine Zeit für ein Redesign...)
Xing-Account: www.xing.com
@Zero
nein ich verwende entweder kleinzeichen oder nur ziffern für die bildnamen; sonst keinerlei zeichen.
Grüße
aadursun
Ich versuche das gerade mit der page_images-Extension zum Laufen zu bekommen, habe aber keine Ahnung was ich im Image Set eintragen soll. Ist da pageimages im ersten Feld richtig, muss ich die ID des Moduls eintragen oder was kommt da rein?
Bildschirmfoto 2014-04-16 um 15.54.53.png
Template (pageimagesimage.html5) habe ich soweit ich das verstanden habe angepasst bzw. an deine anderen mitgelieferten angepasst, da kommt dann aber nur das einzelnde <img>, $this->pictureFillSingleSRC ist also gar nicht da.
PHP-Code:
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>
<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
<?php if (!$this->addBefore): ?>
<?php echo $this->text; ?>
<?php endif; ?>
<?php if ($this->addImage): ?>
<figure class="image_container<?php echo $this->floatClass; ?>"<?php if ($this->margin || $this->float): ?> style="<?php echo trim($this->margin . $this->float); ?>"<?php endif; ?>>
<?php if ($this->href): ?>
<a href="<?php echo $this->href; ?>"<?php if ($this->linkTitle): ?> title="<?php echo $this->linkTitle; ?>"<?php endif; ?><?php echo $this->attributes; ?>>
<?php endif; ?>
<?php if ($this->pictureFillSingleSRC): ?>
<span data-picture data-alt="<?php echo $this->pictureFillSingleSRC[0]->alt; ?>"<?php if ($this->title): ?> data-title="<?php echo $this->pictureFillSingleSRC[0]->title; ?>"<?php endif; ?>>
<?php foreach ($this->pictureFillSingleSRC as $key=>$picture): ?>
<span data-src="<?php echo $picture->src; ?>"<?php if ($picture->breakPoint && $key > 0): ?> data-media="(min-width: <?php echo $picture->breakPoint; ?>)"<?php endif; ?>></span>
<?php endforeach; ?>
<noscript>
<?php endif; ?>
<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>"<?php if ($this->title): ?> title="<?php echo $this->title; ?>"<?php endif; ?>>
<?php if ($this->pictureFillSingleSRC): ?>
</noscript>
</span>
<?php endif; ?>
<?php if ($this->href): ?>
</a>
<?php endif; ?>
<?php if ($this->caption): ?>
<figcaption class="caption" style="width:<?php echo $this->arrSize[0]; ?>px"><?php echo $this->caption; ?></figcaption>
<?php endif; ?>
</figure>
<?php endif; ?>
<?php if ($this->addBefore): ?>
<?php echo $this->text; ?>
<?php endif; ?>
</div>
Also bei Modul/Element musst du angeben das in der Template Variable "type" steht. Anhand von dieser Variable wird dann dein Imageset geladen.
Mein Blog -> brothers-project.de
Mein Blog -> brothers-project.de
Hi,
wie funktioniert den die Erweitererung? Muss ich im Theme ein Set anlegen? bei mir tut sich noch nix im Frontend Hoffe es läuft ab 3.3.3
Also mit 3.3.3 läufts gut. Einfach in Einstellungen die breakpoints rein, und fertig :P
Wenn man den img tag noch width 100% mitgibt, ist es auch in grids (bootstrap) machbar!
Danke
Geändert von xkoy (12.08.2014 um 13:45 Uhr)
Mein Blog -> brothers-project.de
Mein Blog -> brothers-project.de
Ja, der im core enthaltene slider ist gemeint. Wenn ich aber ein Set für das inhaltselement images anlege, beeinflusst das nicht nur diejenigen, die im slider verwendet werden, sondern sämtliche Bilder der Website.
Einen Weg, dies spezifisch festzulegen, finde ich leider nicht. Ich befürchte, dass dies noch nicht integriert ist.
Aktive Benutzer in diesem Thema: 2 (Registrierte Benutzer: 0, Gäste: 2)
Lesezeichen