Page 1 of 1

responsive/ adaptive ImageTable?

Posted: Tue 21. Apr 2015, 13:51
by 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" :?:

Re: responsive/ adaptive ImageTable?

Posted: Tue 21. Apr 2015, 14:07
by 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...

Re: responsive/ adaptive ImageTable?

Posted: Tue 21. Apr 2015, 14:08
by 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.

Re: responsive/ adaptive ImageTable?

Posted: Tue 21. Apr 2015, 14:22
by 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... ;)

Re: responsive/ adaptive ImageTable?

Posted: Tue 21. Apr 2015, 14:35
by 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 :oops: .
Klar, Haken raus und schon verkleinern sich beim Zusammenschieben auch die Bilder dieses CPs :lol:

:arrow: jetzt ist Schluß, mache aber morgen weiter :roll: 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ß!

Re: responsive/ adaptive ImageTable?

Posted: Tue 21. Apr 2015, 15:44
by Oliver Georgi
Die Bilder würden sich auch bei Tabellen verkleinern, wenn die Tabelle responsive ist.

Re: responsive/ adaptive ImageTable?

Posted: Wed 22. Apr 2015, 08:23
by kukki
Guten Morgen .... :D ... 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.

Re: responsive/ adaptive ImageTable?

Posted: Fri 24. Apr 2015, 11:48
by 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.

Image

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

Image

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

Re: responsive/ adaptive ImageTable?

Posted: Fri 24. Apr 2015, 12:27
by Oliver Georgi
hat halt nichts mit dem phpwcms zu tun. Ist reine CSS-Arbeit

Re: responsive/ adaptive ImageTable?

Posted: Sat 25. Apr 2015, 10:49
by 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...

Re: responsive/ adaptive ImageTable?

Posted: Sat 25. Apr 2015, 11:00
by 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;
}

Re: responsive/ adaptive ImageTable?

Posted: Sat 25. Apr 2015, 11:16
by update
:)
Aber wenn der image-wrapper 100% hat, gibt's nie die 2 Spalten

Re: responsive/ adaptive ImageTable?

Posted: Sat 25. Apr 2015, 12:42
by Oliver Georgi
selbst dann muss man block nehmen, weil man die Mehrspaltigkeit nur sauber mit float hinbekommt.

Re: responsive/ adaptive ImageTable?

Posted: Sun 26. Apr 2015, 13:08
by 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! :mrgreen: :twisted: :lol: