responsive/ adaptive ImageTable?

[kukki]

Ich habe wieder an meinem "flüssigen Raum" für Spezies "responsives/ adaptives Websitelayout" herumgebastelt. ImageTable scheint für diese Art des Layouts gar nicht geeignet zu sein, die wenigen Lösungsansätze im Netz zu Tabellen stellen mich nicht zufrieden, funktionieren nur, wenn dann sonst nicht ....

Hat schon mal jemand erfolgreich und auch simple dieses CP für eine responsive/ adaptive Website umgestrickt? Funktioniert das überhaupt oder ist ImageTable, wovon ich eher überzeugt bin eher ein Relikt der "only desktop site"

[update]

Der CP imagetable besteht zu genau 0% aus einem table-Konstrukt. Vielmehr sind da nur divs anzutreffen... es sei denn, man macht einen Haken in die Checkbox für "table"!
Also sollte damit was (responsives) gehen...

[Oliver Georgi]

Warum soll es nicht gehen? Natürlich geht das. Tabelle wird nur geliefert, wenn Du das auch erzwingst. Der Rest ist Klassenarbeit und das Verständnis, wie Responsive funktioniert.

[update]

Ohne Checkbox-Haken, q&d und als poc:

Code: Select all

div.image-wrapper{float:left;margin:10px;}
div.image-wrapper > img.image-thumb{width:100%;height:auto;display:block;}

Für den nächsten Test...

[kukki]

Bin gerade beim "Einräumen", sitze nun schon seit um 6:30 Uhr am PC.
Danke für die schnellen Rückantworten, an der Haken für Tablelayout habe ich gar nicht mehr gedacht .
Klar, Haken raus und schon verkleinern sich beim Zusammenschieben auch die Bilder dieses CPs

jetzt ist Schluß, mache aber morgen weiter Dann werden die Bilder noch im Layout des CPs zentriert!

... Danke Claus, schaue ich mir morgen dann genauer an. Meinen Test kann man sich hier ansehen. Funktioniert auch mit meinem Samsung-Phone. Habe noch nicht die Lightbox ausgetauscht, das kommt dann am Schluß!

[Oliver Georgi]

Die Bilder würden sich auch bei Tabellen verkleinern, wenn die Tabelle responsive ist.

[kukki]

Guten Morgen .... ... ich sitze schon wieder an meinem Testgerödel. Ich muss mal an dieser Stelle einen weiteren Frageteil öffnen - der Sache geschuldet, dass es mit einigen Ausgabegeräten mit älteren Adroid/ iOS-Systemen Probleme mit der device-width Media-Query zu geben scheint.

Auf einem meiner Testgeräte, einem Touchlet X5 (Android 4.0.3) habe ich u.a. den Firefox mobil (in neuster Version) online und den simplen Android-Webbroser. Letzterer hat anscheined Probleme mit der korrekten Darstellung.
Dagegen spielt der Firefox mobil absolut zufriedenstellend die Testseite ab, so wie auch auf meinem Desktop zu sehen.

Code: Select all

<meta name="viewport" content="width=device-width,initial-scale=1.0">

wird ignoriert ( ), erst mit einem Doppel-Touch auf dem Bildschirm erscheint die Seite im richtig "gezomten" Format, beim Drehen der Bildschirms geht das Spiel wieder von vorne los.
Laut Netzgemeinde ist dies aber nicht das einzige Gerät, das hier nicht mitspielt. Es soll dazu ein Javascript-Bugfix von Scott Jehl für die älteren Android-Betriebssysteme zur Verfügung stehen. Macht es Sinn, dieses Script im Footer unterzubringen oder hat Oliver bereits ein solches Bugfix untergebracht ... Nur hat es noch keiner gemerkt, wo/ wie dieses aktiviert werden müsste.

[kukki]

Habe heute mich wieder mit diesem Thema beschäfftigt.
Für die Einstellung [Bild über und unter dem Text] funktioniert es für eine Spalte wie gewollt.



Mehrspaltige Bilderreihen bekomme ich nicht hin, das DIV-Konstrukt wird u.U. bei ungeraden Bilderanzahl bei Einsatz von Float vor dem letzten Bild beendet



aktueller Stand CSS:

Code: Select all

.image-table {  border: 1px solid #c4c4c4;  margin: 0 auto; }
.imgtable-bottom-center, 
.imgtable-top-center { text-align: center; }

.image-wrapper.first {  }
.image-wrapper { display: block; height: auto;  max-width: 100%; }
.image-thumb { margin: 4px 0; }

Da ja noch die Klassen .first und .row-n rumschwirren, würde ich mal drauf tippen, dass hier (mit einem CSS-Zähler?) die Sache zu stemmen sei

[Oliver Georgi]

hat halt nichts mit dem phpwcms zu tun. Ist reine CSS-Arbeit

[update]

Auf die Schnelle: Probier mal

Code: Select all

.image-wrapper{display:inline-block;}
.image-wrapper img.image-thumb{width:100%;height:auto;}

Dann noch ein media query mit

Code: Select all

.image-wrapper{width:100%}

nur mal so dahingedacht...

[Oliver Georgi]

wenn man dem Wrapper 100% mitgibt, dann ist der display: block. Und img braucht auch eine display-Anweisung.

Code: Select all

.image-wrapper {
    display: block; /* width=100% */
}
.image-wrapper img.image-thumb,
.image-responsive {
    display: block;
    width: 100%;
    max-width: 100%; /* nie breiter als Elternelement */
    height: auto;
}

[update]

Aber wenn der image-wrapper 100% hat, gibt's nie die 2 Spalten

[Oliver Georgi]

selbst dann muss man block nehmen, weil man die Mehrspaltigkeit nur sauber mit float hinbekommt.

[kukki]

Anhand der Vorschläge von Claus nehme ich mal ganz stark an, dass noch niemand (außer OG?) eine solche responsive Template-Vorlage incl. CSS-Steuerung für phpWCMS mittels Boardmitteln gemacht hat. Andere Open Source Projekte degegen haben solche Templates bereits inclusive - man schaut ja gerne mal auch über den Tellerrand.

Eigentlich wollte ich das auch für andere machen, in der Hoffnung, dass man mal eine gemeinsame Vorlage erstellt, die alle (wer eigentlich?) mitnutzen, aber bis auf Claus und mir nicht bekannte Mitleser scheint es niemanden weiter zu interessieren, hier ein wenig voranzuspreschen. Ich habe auch bemerkt, dass viele vorgestellte Websites mit der Zeit entweder gar nicht mehr existieren , nicht mehr mit phpWCMS gehostet sind oder halt mit anderen Systemen auf responsiv/ addaptiv/ mobil umgerubelt wurden.

Tja. Tel A'Viv, so is mänschlicha Läben, hart aber herzlich!