responsive/ adaptive ImageTable?

Bitte alle templatebezogenen Beiträge in diesem Forum veröffentlichen.
Post Reply
User avatar
kukki
Posts: 1707
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

responsive/ adaptive ImageTable?

Post 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" :?:
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: responsive/ adaptive ImageTable?

Post 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...
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: responsive/ adaptive ImageTable?

Post 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.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: responsive/ adaptive ImageTable?

Post 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... ;)
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
kukki
Posts: 1707
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: responsive/ adaptive ImageTable?

Post 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ß!
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: responsive/ adaptive ImageTable?

Post by Oliver Georgi »

Die Bilder würden sich auch bei Tabellen verkleinern, wenn die Tabelle responsive ist.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
kukki
Posts: 1707
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: responsive/ adaptive ImageTable?

Post 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.
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
User avatar
kukki
Posts: 1707
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: responsive/ adaptive ImageTable?

Post 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 :?:
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: responsive/ adaptive ImageTable?

Post by Oliver Georgi »

hat halt nichts mit dem phpwcms zu tun. Ist reine CSS-Arbeit
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: responsive/ adaptive ImageTable?

Post 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...
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: responsive/ adaptive ImageTable?

Post 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;
}
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: responsive/ adaptive ImageTable?

Post by update »

:)
Aber wenn der image-wrapper 100% hat, gibt's nie die 2 Spalten
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: responsive/ adaptive ImageTable?

Post by Oliver Georgi »

selbst dann muss man block nehmen, weil man die Mehrspaltigkeit nur sauber mit float hinbekommt.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
kukki
Posts: 1707
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: responsive/ adaptive ImageTable?

Post 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:
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
Post Reply