Caroufredsel und thumbnails (contao3)

[jenda]

Danke. Nach deiner Empfehlung blieb ich bei deiner Version. Allerdings werden sie nicht zentriert. Für mich ist es schleierhaft, wie ich es hinkriegen soll. Ich benutzte deine Einstellungen, aber die lassen die Vorschaubilder immer links stehen. Ich habe es auch in den Einstellung für die Galerie bestimmt, dass die Vorschaubilder zentriert sein sollten. Sind sie aber anscheinend nicht. Ich wäre dir für jeden Ratschlag sehr dankbar. Danke. Liebe Grüße,

Jan

[Dirch]

hmm ich weiß nicht was du da für CSS benutzt oder gebaut hast, aber eigentlich geht das zentrieren recht einfach. Da du den responsive mode benutzt solltest du eine "flüssige" Breite einstellen, z.B. 100% . Die gleiche Breite dann noch für die Thumbnails. Dann die Thumbnails zentriert ausrichten (default) und das war es. Der Slider stellt dann so viele Thumbs dar, wie Platz haben. Sind mehr vorhanden kann man sobald weniger Platz da ist, scrollen. Die Thumbnails selbst werden in ihrem umgebenden Container dann zentriert. Wenn du mir nen Zugang machst, kann ich das dir auch einstellen...

[Juletomate]

Hallo Dirk und alle anderen,

ich komme mit meinem Caroufredsel leider nicht weiter und bevor ich noch ewig suche einfach mal meine Fragen dazu.
Dirk, was Du unten geschrieben hast, wie man die Thumbs vertikal anordnen kann, habe ich leider nicht verstanden, aber vielleicht kannst Du es bitte nochmal etwas detaillierter erklären.

Mir ist zum Thema vertikale Caroufredsel Thumbs noch was eingefallen und ich wollte wissen ob mein Gedankengang überhaupt Sinn macht, bzw. ob ich nicht schon 10Ecken zu weit gedacht habe und das alles viel einfacher geht.

Also, ich habe einen CFS (ich kürze das jetzt mal ab) angelegt und die Thumbs erscheinen natürlich darunter. Diese sollen aber links und vertikal auftauchen und das möglichst z. B. 3 x 6. Ist das überhaupt möglich? Vertikal soll ja irgendwie gehen. Aber was ist mit Vertikal nebeneinander? Und ich würde das ganze gerne in meinem Seitenlayout nach links verschieben. Dann geht das nur als Modul oder?

Wäre es nicht möglich das ganze einfacher zu machen, in dem ich die entsprechenden Templates des CFS kopiere und einfach dort die Befehle für die Anzeige des großen Bildes rausschmeiße? Aus dem 1. CFS nehme ich dann die Anzeige für die Thumbs raus und dann diese beiden CFS via "carouFredSel-Karussells synchronisieren". Macht das Sinn? Und wenn ja, wie geht das? Ich habe leider fast keine Ahnung von JS und was ich anpassen muß.

Eine grundsätzliche Frage, die sich mit beim Bau in Contao 3 gerade stellt ist, welche Dateien in den Templates muß ich überhaupt "anfassen". In meinem Seitenlayout war unter Ausgabeformat XHTML Strict gewählt. Bedeutet es damit, daß ich für Änderungen in den Templates immer nur die .xhtml Templates nehmen muß/soll? (Änderung auf HTML im Ausgabeformat führen zu einer Fehlermeldung im System. Dann geht gar nichts mehr)

Vielleicht kann mir jemand weiter helfen. Ich habe leider noch einige Wissenlücken. Bisher ging viel über "einfach ausprobieren" einzustellen. Aber jetzt gucke ich schon fleißig Little Boxes und lese ganz viel über Contao und Co. um diese Lücken endlich zu füllen. Ach so, wenn sich jemand das "Schlamassel" auf meiner Bauseite angucken möchte: http://www.mangagirl-tv.de/index.php/baby.html (Kann in einigen Browsern sein, das der CFS erst nach hin und herklicken zwischen zwei Menupunkten korrekt angezeigt wird, das Problem habe ich auch noch nicht gelößt.)

Freue mich über Antwort

Viele Grüße
Julia

Vertikale Thumbs hab ich so noch nicht vorgesehen. Du kannst die dir aber auch selbst einstellen. Dazu mußt du das js-Template anpassen. Die Thumbs sind ein 2. Slider (ziemlich weit unten in der Datei) und du mußt dann hier die Parameter händisch setzen. Bei vertikal ist es analog zu horizontal nur, daß du eben höhen- statt breitenbasiert die Einstellungen vornimmst.

Die Parameter findest du hier: http://caroufredsel.dev7studios.com/configuration.php

Leichter ist es sicher, wenn du dir einen vertikalen Slider konfigurierst und dann die Einstellungen aus dem FireBug für den Thumbsnail-Slider übernimmst. Den kannst du dann mit absoluter Positionierung hinschieben wo du magst, denn das ist dann nur noch CSS.

Viele Grüße...
...Dirk

[Dirch]

Guten Abend Julia,

verwendest du noch Version 1.1 der Erweiterung? Denn In der aktuellen Version 1.2 habe ich die Funktion mit den vertikalen Thumbs erst eingebaut. Die Benutzung ist nämlich recht einfach und kann im Bereich der Thumbnails ganz einfach ausgewählt werden. Unter der Größenangabe gibt's jetzt das Feld "Position der Vorschaubilder" und wenn du dort die Position einstellst, dann erscheinen sie an dieser Position. Worauf du bei den vertikalen Thumbs allerdings achten mußt ist, daß du eine Karussel-Höhe angibst. Auf deiner Seite sehe ich aber auch, daß du "responsive" eingeschaltet hast.

Ich weiß nicht, ob das in Kombination mit vertikalen Thumbs funktionieren wird. Ich hatte das versucht bei mir umzusetzen und es fast geschafft, aber bin letztlich daran gescheitert und habe es irgendwann frustriert aufgegeben. Nach meiner Einschätzung geht responsive zusammen mit vertikalen Thumbs nicht. Aber ich bin kein CSS-Profi und es mag da andere geben, die das womöglich hinbekommen. Was aber auf alle Fälle geht, sind vertikale Thumbs mit fester Höhe. Die Schwierigkeit ist beim caroufredsel, daß er eigentlich ein Inhalts-Slider ist und daher keine Thumbs eingebaut hat. Diese Möglichkeit baue ich hinzu, in dem ich einen 2 Slider hinzufüge, der die Thumbs beinhaltet. Da haben es reine Bild-Slider leichter, wobei jeder dieser "responsive"-Slider nur horizontale Thumbs anbietet.

Also, ich habe einen CFS (ich kürze das jetzt mal ab) angelegt und die Thumbs erscheinen natürlich darunter. Diese sollen aber links und vertikal auftauchen und das möglichst z. B. 3 x 6. Ist das überhaupt möglich? Vertikal soll ja irgendwie gehen. Aber was ist mit Vertikal nebeneinander? Und ich würde das ganze gerne in meinem Seitenlayout nach links verschieben. Dann geht das nur als Modul oder?

Technisch möglich ist fast alles, aber es müßte programmiert werden. Der caroufredsel selbst unterstützt keine 2 oder mehrzeiligen Slider. So etwas geht dann nur über mehrere Slider, die man miteinander verknüpft. Man könnte sich das manuell in den Templates zusammenbauen, aber das ist recht aufwendig. Wie meinst du das in deinem Seitenlayout nach links verschieben? Du meinst es in die Linke Spalte zu setzen? Ja das ginge dann auf direktem Weg nur mit dem Modul. Das ist aber nicht weiter schlimm, da das Modul identisch ist mit dem Inhalts-Element.

Wäre es nicht möglich das ganze einfacher zu machen, in dem ich die entsprechenden Templates des CFS kopiere und einfach dort die Befehle für die Anzeige des großen Bildes rausschmeiße? Aus dem 1. CFS nehme ich dann die Anzeige für die Thumbs raus und dann diese beiden CFS via "carouFredSel-Karussells synchronisieren". Macht das Sinn? Und wenn ja, wie geht das? Ich habe leider fast keine Ahnung von JS und was ich anpassen muß.

Jein - wenn man sich damit auskennt kann man in den Templates die Erweiterungen vornehmen. Allerdings geht es so wie du dir überlegt hast nicht, da die Inhalte und Templates dynamisch von Contao erzeugt werden und darauf ausgerichtet sind. Man kann daher nicht bei dem einen Slider Teil A haben und bei dem anderen Slider Teil B. Man muß daher alles in einem Teil machen und dort dann im HTML- und JS-Template. Um eine Programmierung in jQuery kommt man nicht herum.

Eine grundsätzliche Frage, die sich mit beim Bau in Contao 3 gerade stellt ist, welche Dateien in den Templates muß ich überhaupt "anfassen". In meinem Seitenlayout war unter Ausgabeformat XHTML Strict gewählt. Bedeutet es damit, daß ich für Änderungen in den Templates immer nur die .xhtml Templates nehmen muß/soll? (Änderung auf HTML im Ausgabeformat führen zu einer Fehlermeldung im System. Dann geht gar nichts mehr)

Normalerweise faßt man die Templates nur dann an, wenn man etwas darin ändern möchte/muß. Das ist aber nicht generell so der Fall und im speziellem beim caroufredsel nur notwendig wenn man etwas machen will, das von der Erweiterung nicht von hause aus abgedeckt wird. Wenn man ein Template ändern möchte, dann muß man das nehmen was man im Seiten-Layout als Format ausgewählt hat. Contao schaut dort nach und zieht die Templates anhand der Einstellung. Eigentlich sollte kein Fehler auftreten, wenn deine Seite XHTML im Layout hat, aber du HTML-Templates geändert hast.

Vielleicht kann mir jemand weiter helfen. Ich habe leider noch einige Wissenlücken. Bisher ging viel über "einfach ausprobieren" einzustellen. Aber jetzt gucke ich schon fleißig Little Boxes und lese ganz viel über Contao und Co. um diese Lücken endlich zu füllen. Ach so, wenn sich jemand das "Schlamassel" auf meiner Bauseite angucken möchte: http://www.mangagirl-tv.de/index.php/baby.html (Kann in einigen Browsern sein, das der CFS erst nach hin und herklicken zwischen zwei Menupunkten korrekt angezeigt wird, das Problem habe ich auch noch nicht gelößt.)

Das mit dem korrekten Anzeigen kannst du ganz leicht korrigieren. (liegt an den Webkit-Browsern und einem Fehler in diesen) Gehe in die Contao-Einstellungen und änder dort bei caroufredsel-Startmethode den Wert auf "readyLoad". Dann ist alles gut (was das betrifft). =)

Viele Grüße...
...Dirk

[Juletomate]

Vielen Dank Dirk,

Das mit dem korrekten Anzeigen kannst du ganz leicht korrigieren. (liegt an den Webkit-Browsern und einem Fehler in diesen) Gehe in die Contao-Einstellungen und änder dort bei caroufredsel-Startmethode den Wert auf "readyLoad". Dann ist alles gut (was das betrifft). =)

das mit dem Webkit-Browser-Fehler hat schonmal toll funktioniert.

verwendest du noch Version 1.1 der Erweiterung? Denn In der aktuellen Version 1.2 habe ich die Funktion mit den vertikalen Thumbs erst eingebaut.

Jetzt ist es aktuell. Ich dachte das hätte ich in der Erweiterungsverwaltung aktualisiert, aber das hat leider nur direkt über die Detailanzeige des CFS funktioniert.

Die Benutzung ist nämlich recht einfach und kann im Bereich der Thumbnails ganz einfach ausgewählt werden. Unter der Größenangabe gibt's jetzt das Feld "Position der Vorschaubilder" und wenn du dort die Position einstellst, dann erscheinen sie an dieser Position. Worauf du bei den vertikalen Thumbs allerdings achten mußt ist, daß du eine Karussel-Höhe angibst. Auf deiner Seite sehe ich aber auch, daß du "responsive" eingeschaltet hast.

Hab ich gesehen und probiert. Nun hab ich aber ne Fehlermeldung: Parse error: syntax error, unexpected T_ENDIF in /usr/www/users/jkyfot/jk_bau/system/modules/dk_caroufredsel/templates/themes/css_caroufredsel.xhtml on line 40
Hab die Anweisung für Anzeige links dann auch erstmal wieder rausgenommen. Leider ohne Erfolg. Egal was ich jetzt einstelle. Der Fehler bleibt. Was kann ich tun?
Wollte dann ein Update auf Contoa 3.1.1. machen, in der Hoffnung, daß das hilft, aber auch da bekomme ich leider eine Fehlermeldung.
Fatal error: Uncaught exception 'PharException' with message 'phar "/usr/www/users/jkyfot/jk_bau/contao/update.phar.php" SHA1 signature could not be verified: broken signature' in /usr/www/users/jkyfot/jk_bau/contao/update.phar.php:34 Stack trace: #0 /usr/www/users/jkyfot/jk_bau/contao/update.phar.php(34): Phar::webPhar('update.phar.php', 'index.php', '', Array, 'phar_rewrite') #1 {main} thrown in /usr/www/users/jkyfot/jk_bau/contao/update.phar.php on line 34

Oh weh.... Was nun?

[Dirch]

ahh fein - ich habe die Version ab 3.1 freigeben müssen, weil ich eine Template-Sache geändert hatte wo das 3.0.x die Templates nicht mehr beim Kopieren gefunden hat und ich dann den Kram nicht mehr zurückbauen wollte.

Also der Parse-Error bei dem css-Template sollte so nicht sein. Da hab ich wohl nen Bug drin. Ich benutze schon ewig kein XHTML mehr, daher teste ich die nicht so (ausreichend mehr). Ich schau mal rein und mach dann ein Update bzw. schau wie ich dir die korrigierte Datei zukommen lasse.

Du machst das Update über Live-Update ja?

[Dirch]

ok hab den Fehler im Template gefunden. Schreibe mir am besten eine PM wohin ich dir die Datei schicken kann. Werde aber auch im Laufe des Tages morgen eine neue Versions ins ER versuchen einzustellen.

PS: Elfin oder Vulkanierin?

[Juletomate]

Ja, ich mache das über Live-Update.

O.k. Prima, dann warte ich mal bis morgen bzw. schick Dir dann ne PM. Die Elfe fliegt jetzt erstmal ins Bett.....

Danke erstmal soweit und gute Nachtruhe

[Juletomate]

...nachdem ich nun die aktuelle Version erfolgreich installiert habe,
(Wer Probleme damit hat, lese hier: https://community.contao.org/de/show...ur-Verf%FCgung)

gehts nun aber mit den Thumbs weiter.

Wenn ich die Thumbs auf links einstelle, dann passiert das leider nicht. Die bleiben oben kleben. (Nach unten bekomme ich die auch. Aber nicht nach links.) Eine Höhe für das Karussell hatte ich angegeben, aber auch das hat nicht zum Erfolg geführt. Hab dann alles mögliche ausprobiert, mit den Größen des Karussells usw.

Was mache ich falsch?

VG
Julia

[Dirch]

Hallo elfische Juletomate

wie hast du die Höhe für das Thumbnail-Karussell eingestellt? Bei den vertikalen Thumbs mußt du bei diesen die Höhe angeben - also wenn dein Bild z.B. 500px dann sollte die Höhe für das Thumbs-Karussell ebenfalls 500px betragen. Evtl. ist auch noch die Angabe der Breite sinnvoll.

Zu einem Update im ER kam ich heute noch nicht. Irgendwas spukt da noch herum und ich versuche es die Tage zu reparieren.

Liebe Grüße...
...Dirk

[Juletomate]

Hallo Dirk,

oh weh oh weh.....
(Schlimm, das ich mich nicht damit anfreunden kann, denn CFS einfach so zu benutzten wie er toll funktioniert und dann auch seine Größe hübsch anpasst. Es läßt mich einfach nicht los.)

Also, das mit der Vertikalen Navi hab ich hinbekommen.
Dann wird aber das Hauptbild unter die Navi gedrückt. http://www.mangagirl-tv.de/index.php/people.html

Das Problem mit dem Nicht-Schrumpfen der Thumbs hab ich dann natürlich auch. Die Lösung dazu ist erstmal in weite Ferne gerückt, denn ich hab mir nun was ganz Schlaues überlegt, was aber so wohl nicht ganz funktioniert:

Meine Idee, um eine vertikale Navi in die linke Spalte zu bekommen war, einen neuen CFS in einem neuen Artikel in die Linke Spalte zu stellen. Damit das Hauptbild nicht (fast nicht) angezeigt wird hab ich ihm eine Breite von 1px verpasst. Das da unten jetzt so ein Mini-Fleck ist sieht man eh kaum. (Den könnte ich ja per CSS auch noch woanders hin verschieben).

Beim CFS in der Hauptspalte hab ich nun die Ansicht der Thumbs ausgestellt.

http://www.mangagirl-tv.de/index.php/baby.html

Soweit so gut. Jetzt wollte ich die beiden synchronisieren, aber, oh graus, ich sehe das klappt nur, wenn ich zwei Galerien in einem Artikel habe. Die zu trennen führt dann leider dazu das ich sie nicht mehr vereinen kann.
Kann ich das irgendwie umgehen. Sicherlich nicht oder?
Das wäre dann DIE Lösung damit mir vertikal im Left-Bereich die korrekten Vorschaubilder für den Hauptbereich gezeigt werden. Dann hab ich zwar immer noch das Problem, daß die Thumbs nicht mitschrumpfen, aber dazu fällt mir evt. noch was ein.

Für Profis, ist das, was ich da gerade mache sicherlich Flickwerk und soll so nicht sein, aber mit meinen ganzen (noch) Wissenslücken komme ich sonst nicht zum Ziel...

Vielleicht fällt Dir noch was ein. Wenn nicht dann baue ich wahrscheinlich auf horizontale Thumbs oben um und mit dem Left-Bereich lasse ich mir dann auch noch irgendwas einfallen.....

Mein Hirn grübelt weiter, während ich mich um die anderen Seiten meiner Page kümmere.

Tomatige Elfengrüße
Julia

[Dirch]

Hallo Julia,

ich bin wirklich beeindruckt von deiner Kreativität. Du sprichst von Dir als "Amateurin" kommst aber auf echt tolle Ideen. Da könnten sich ein paar der echten Amateure eine Scheibe abschneiden. ;D

Allerdings - und das tut mir echt leid es so zu sagen - geht es auf diesem Weg leider nicht. Aber es gibt natürlich einen Weg, allerdings ist der für dich mit etwas höherem Aufwand verbunden. Dynamisch skalierende responsive Bilder in Kombination mit Thumbnails der gleichen Art und Weise habe ich wie gesagt noch nicht hinbekommen. Das überfordert dann selbst mich als "Profi".

Was du machen kannst ist folgendes:

Bei deinem Thumbnail-Slider deaktivierst du die Thumbnails und läßt stattdessen die "großen" Bilder kleiner skalieren auf deine Thumbnail-Größe. Du legst für diesen Slider eine eigene Konfiguration an wo du die Laufrichtung auf "runter" änderst und die Größen des Sliders dort festlegst. Dann hast du einen Slider, der viele kleine Bilder darstellt, die vertikal angeordnet sind - genaus so wie der Thumbnail-Slider jetzt ist.

(Der kleine zuschaltbare Thumbnail-Slider ist nichts anderes als das)

Und jetzt kommt der etwas kompliziertere Part. Die beiden Slider müssen verknüpft werden. Das geht in dem Fall nicht über die Synchronisation, denn das große Bild soll ja nicht geändert werden nur weil man in den kleinen Bildern die Scroll-Pfeile benutzt hat. Du mußt also die beiden Slider über jQuery-Klick-Events verbinden. Also genau das machen, was ich intern mache, wenn man die Thumbnails hinzu schaltet.

Richtung kleine Bilder -> große Bilder:

    $('#caroufredsel_IDkleinerSlider > div').click(function() {
var id = $(this).attr('id');
$('#caroufredsel_IDgroßerSlider').trigger('slideTo', [$('#' + id)]);
}).css('cursor', 'pointer'); 

Das fügst du ganz unten im Template vor

    });
})(jQuery); 

ein.

Richtung große Bilder -> kleine Bilder:

da habe ich gerade keine Muse, das ergänze ich dir noch.

Aber leg mir doch mal bitte einen Backend-User auf deiner Seite an, dann kann ich dir dabei helfen. Das Aufschreiben dauert 3 Mal so lange, als das machen...

Viele Grüße...
...Dirk

[Juletomate]

Hallo Julia,

ich bin wirklich beeindruckt von deiner Kreativität. Du sprichst von Dir als "Amateurin" kommst aber auf echt tolle Ideen. Da könnten sich ein paar der echten Amateure eine Scheibe abschneiden. ;D

DANKE! ...aus der Not heraus hab ich die wildesten Einfälle.

Habe es geschafft das wie beschrieben umzubauen. Den komplizierten Part hab ich noch nicht gestartet.
Ein Problem gibts aber bei dem Abspielverhalten hoch oder runter. Die Galerie wird nur angezeigt, wenn ich das Fenster einmal kurz verkleinere und wieder vergrößere. Hab den Fehler leider nicht gefunden, diverse Einstellungen probiert und nur durch Zufall gesehen, das es so o. ä. geht, weil ich den Firebug mal zu und wieder aufgemacht habe. Komisch....

Würde mich echt freuen, wenn Du das machst. Schonmal Danke dafür vorab. (Schick Dir gleich ne PM mit den Daten)

Die alten Templates kann ich dann aber wie bisher noch verwenden oder? Denn sollte ich mich dann für eine andere Ansicht des CFS entscheiden dann schalte ich einfach wieder auf die zurück, oder?
Ich schwanke gerade noch immer auf Grund der nicht dynamisch skalierenden Thumbs, entweder ein komplett anderes Layout für mobile Seiten einzufügen oder doch auf CFS horizontal umzustellen.
Mein Plan war ja eigentlich mit Umstellung auf 3.0 alles in einem zu schaffen. ....Pläne...zt zt zt....
(Nach vier Tagen hier vor dem Rechner ist mein Hirn leider total übervoll und sagt mir es hat Grenzen. )

Ich esse mal. Vielleicht kann ich dabei ne Entscheidung treffen.
Merci und Gruß
Julia

[Dirch]

ja es gibt neue Templates und du kannst das alte dann einfach wieder aktivieren. Ich warte dann aber noch bis ich etwas mache und du vom Essen erkenntnisreicher wurdest. Sonst mache ich mir nachher die Arbeit umsonst, weil du dann alles gaaaaanz anders machen willst. Also warte ich auf dein Konzept. =)

http://coolcarousels.frebsite.nl/

Hier kannst du sehen was Fred (der Slider-Entwickler) alles mit dem Slider bastelt. Allerdings sind 90% der Beispiele dort individuell und so leider in der Erweiterung nicht allgemein abbildbar. Da muß man dann je nachdem mehr oder weniger manuell nacharbeiten in den Templates...

[Juletomate]

Hallo Dirk,

ja, die Fred-Seite kenne ich und finde die Layouts fast alle total super. Aber genau das, was Du sagst ist der Punkt: Die meisten muß man selber umbauen und das verstehe ich nur zu kleinen Teilen.

Essen und mal den PC verlassen hat leider noch keine Entscheidung gebracht. Nur teilweise und dadurch kommen grad leider mehr Fragen als Antworten.

Ich denke es wäre sinnvoll wieder "zurück zu rudern". Mein Wissen reicht einfach nicht aus und auf Dauer mag ich das dann alles trotz Funktionalität auch praktisch.

Trotzdem DANKE für Deine super Hilfe. Ich hab wieder einiges gelernt.

Zwei Fragen hab ich noch. (Ich weiß die gehört sicherlich woanders hin ins Forum - aber ich hab schon soviel gesucht und nur teilweise Antworten gefunden)

1. Wenn ich ein mobiles Layout einrichte, was passiert dann intern? Also anders beschrieben. Ab wann wird ein Endgerät als mobil eingestuft? I-Pads auch schon oder?
Denn das ist für meine Planung der Layouts wichtig.

2. Wenn ich ein Bild innerhalb eines Artikels (und da innerhalb einer Tabelle) einfüge. Wie hier http://www.mangagirl-tv.de/index.php/about.html,
dann schrumpft das leider nicht mit. Ich hatte das mal irgendwie hinbekommen, mit nem anderen Bild, aber weiß nicht mehr wie. In einigen Browsern z. B. Chrome, wird das Bild eh schon verkleinert angezeigt, was so auch nicht ideal ist. Das soll ja seine volle Größe haben, solange es genug Platz hat.

Herzlichen Dank und Gruß
Julia

[Dirch]

Schönen guten Abend Julia,

ja manchmal tut es gut den PC zu verlassen. Ich war bis vorhin noch im Wald.

Also mit zurückrollen meinst du dann, daß du dann doch keine kleinen Bilder vertikal links mehr haben möchtest? Ich also nichts mehr machen soll?

zu 1. es gibt da zwei Ansätze. Zum Einen bekommen Mobile-Geräte im body-Tag die Klasse "mobile" zugewiesen. Wenn du in der Seitenstruktur ein spezielles Layout für mobile Seiten einträgst würde dies dann verwendet werden. Da kannst du z.B. eine andere Navi verwenden oder best. Module weglassen. Zum anderen ist es so, daß ein Media-Query bei 768px Breite gesetzt ist wo dann bei kleinerer Größe durch den Holy-Grail die Spalten #main, #left und #right untereinander gesetzt werden.

zu 2. nun wenn nicht genug Platz da ist und die Bilder eine % Größe haben, dann werden sie eigentlich dynamisch angepaßt. Wenn ein Bild nicht unter eine best. Größe kommen soll, kann du noch ne min-width setzen, dann wird es nicht kleiner als diese Größe. Gerade im dynamischen Umfeld sollte/muß man mit min-/max-width Angaben arbeiten.

Grundsätzlich solltest du dir aber ein Layout gestalterisch aufzeichnen und dann anhand dessen das Layout umsetzen. Mein Ding ist das nicht deshalb bin ich auch Entwickler und kein Designer. =)

Hier http://www.contao-fuer-webdesigner.de/ kannst du ein ganz schönes Beispiel sehen - auch mit einem alternativen Menü für den kleinen Viewport bzw. für die mobile Navigation...

Liebe Grüße...
...Dirk

PS: du hast beim Hochspringen deine Schuhe verloren.

[Juletomate]

Also mit zurückrollen meinst du dann, daß du dann doch keine kleinen Bilder vertikal links mehr haben möchtest? Ich also nichts mehr machen soll?

Genau! Ich werde mir nen hübschen CFS mit horizontalen Thumbs bauen. Den Leftbereich schmeiße ich wahrscheinlich eh komplett raus, denn dank HolyGrail wandert mein Logo im Left immer nach unten bei verkleinern. Das HolyGrail bleibt so wie es ist. Davon mal abgesehen wüßte ich gar nicht wie ich das ändern kann und ist auch völlig sinnfrei das überhaupt zu machen. Also komme ich um einen Umbau nicht herum. Aber das schaff ich....

Zum anderen ist es so, daß ein Media-Query bei 768px Breite gesetzt ist wo dann bei kleinerer Größe durch den Holy-Grail die Spalten #main, #left und #right untereinander gesetzt werden.

Das verstehe ich zum Teil alles schon ganz gut und die Wissenlücken versuche ich grad mit Contao Konferenz 2013 - Workshop "Responsive Contao" zu füllen.

Aber eigentlich wollte ich wissen, ob ein i-pad oder anderes Tablet auch immer automatisch als Mobiles Gerät eingestuft wird? Also dann das mobile Layout erscheint?! Ich möchte nämlich eigentlich erreichen, das nur bei wirklich kleinen Ansichten, also Handys dieses angezeigt wird.

zu 2. nun wenn nicht genug Platz da ist und die Bilder eine % Größe haben, dann werden sie eigentlich dynamisch angepaßt. Wenn ein Bild nicht unter eine best. Größe kommen soll, kann du noch ne min-width setzen, dann wird es nicht kleiner als diese Größe. Gerade im dynamischen Umfeld sollte/muß man mit min-/max-width Angaben arbeiten.

Danke, das probiere ich mal aus, bzw. guck mir überhaupt erstmal an, was ich da für Einstellungen gewählt habe.

Grundsätzlich solltest du dir aber ein Layout gestalterisch aufzeichnen und dann anhand dessen das Layout umsetzen.

Mein Hirn qualmt nicht nur auf Grund der ganzen Programmierung es kann auch parallel noch geistige Layouts erstellen. Die Seite ist also gedanklich schon fast fertig umgebaut.

PS: du hast beim Hochspringen deine Schuhe verloren.

...Die fliegen irgendwo ganz rechts. Dazu ist der sichtbare Bildausschnitt zu schmal. Hahaha.....

VG

[planepix]

Hallo Julia,

wenn du gerade den 2013er Workshop studierst: Folie 43 hilft dir bei der Frage nach "Was wird als welches Gerät erkannt".

Du findest die von Contao definierten Zuweisungen in der Datei "system/config/agents.php".

Übrigens: ein seit langem wunderbarer, weil kreativ und konstruktiver Thread - dit macht Laune wa

[Dirch]

Aber eigentlich wollte ich wissen, ob ein i-pad oder anderes Tablet auch immer automatisch als Mobiles Gerät eingestuft wird? Also dann das mobile Layout erscheint?! Ich möchte nämlich eigentlich erreichen, das nur bei wirklich kleinen Ansichten, also Handys dieses angezeigt wird.

Für dich frisch aus dem Quellcode von Contao gefischt:

    'Macintosh'     => array('os'=>'mac',        'mobile'=>false),
    'Windows CE'    => array('os'=>'win-ce',     'mobile'=>true),
    'Windows Phone' => array('os'=>'win-ce',     'mobile'=>true),
    'Windows'       => array('os'=>'win',        'mobile'=>false),
    'iPad'          => array('os'=>'ios',        'mobile'=>false),
    'iPhone'        => array('os'=>'ios',        'mobile'=>true),
    'iPod'          => array('os'=>'ios',        'mobile'=>true),
    'Android'       => array('os'=>'android',    'mobile'=>true),
    'Blackberry'    => array('os'=>'blackberry', 'mobile'=>true),
    'Symbian'       => array('os'=>'symbian',    'mobile'=>true),
    'WebOS'         => array('os'=>'webos',      'mobile'=>true),
    'Linux'         => array('os'=>'unix',       'mobile'=>false),
    'FreeBSD'       => array('os'=>'unix',       'mobile'=>false),
    'OpenBSD'       => array('os'=>'unix',       'mobile'=>false),
    'NetBSD'        => array('os'=>'unix',       'mobile'=>false), 

Alles wo 'mobile' => true steht wird als mobiles Gerät gewertet. Das iPad demnach nicht. =)

[Juletomate]

VIELEN DANK! Jetzt bin ich schlauer und auch noch gut gelaunt. (War ich vorher schon, aber es geht noch besser)
Von den Geräten / Systemen kenn ich zwar nur die Hälfte aber das ist glaub ich wurscht. Die Lücken lass ich erstmal offen...

wenn du gerade den 2013er Workshop studierst: Folie 43 hilft dir bei der Frage nach "Was wird als welches Gerät erkannt".

Ich hänge bei Folie 30, weil ich beim Lesen immer wieder auf tolle Sachen stoße die ich sofort ausprobieren will. Ach, hätte ich doch 2 Bildschirme und 2 Köpfe...

...na dann mal los, auf ins fröhliche Doppel-Layouten!

Ein schönes WE Euch beiden!

[Dirch]

Dankesehr. Mach nicht zu viel auf einmal - ach das können ja nur männliche Wesen nicht. :P

Schlaf gut dann irgendwann mal und morgen gibt's dann gen Abend die neue korrigierte Version vom Slider. Halte mich mal auf dem Laufenden mit deiner Seite. Bin dann doch gespannt was du daraus basteln wirst.

*wink*

Dirk