responsive/ adaptive ImageTable?

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

responsive/ adaptive ImageTable?

Post by kukki » Tue 21. Apr 2015, 13:51

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.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
update
Moderator
Posts: 6394
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: responsive/ adaptive ImageTable?

Post by update » Tue 21. Apr 2015, 14:07

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 webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

User avatar
Oliver Georgi
Site Admin
Posts: 9560
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: responsive/ adaptive ImageTable?

Post by Oliver Georgi » Tue 21. Apr 2015, 14:08

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: 6394
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: responsive/ adaptive ImageTable?

Post by update » Tue 21. Apr 2015, 14:22

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 webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: responsive/ adaptive ImageTable?

Post by kukki » Tue 21. Apr 2015, 14:35

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.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
Oliver Georgi
Site Admin
Posts: 9560
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: responsive/ adaptive ImageTable?

Post by Oliver Georgi » Tue 21. Apr 2015, 15:44

Die Bilder würden sich auch bei Tabellen verkleinern, wenn die Tabelle responsive ist.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: responsive/ adaptive ImageTable?

Post by kukki » Wed 22. Apr 2015, 08:23

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.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: responsive/ adaptive ImageTable?

Post by kukki » Fri 24. Apr 2015, 11:48

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.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
Oliver Georgi
Site Admin
Posts: 9560
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: responsive/ adaptive ImageTable?

Post by Oliver Georgi » Fri 24. Apr 2015, 12:27

hat halt nichts mit dem phpwcms zu tun. Ist reine CSS-Arbeit
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

User avatar
update
Moderator
Posts: 6394
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: responsive/ adaptive ImageTable?

Post by update » Sat 25. Apr 2015, 10:49

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 webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

User avatar
Oliver Georgi
Site Admin
Posts: 9560
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: responsive/ adaptive ImageTable?

Post by Oliver Georgi » Sat 25. Apr 2015, 11:00

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: 6394
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: responsive/ adaptive ImageTable?

Post by update » Sat 25. Apr 2015, 11:16

:)
Aber wenn der image-wrapper 100% hat, gibt's nie die 2 Spalten
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

User avatar
Oliver Georgi
Site Admin
Posts: 9560
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: responsive/ adaptive ImageTable?

Post by Oliver Georgi » Sat 25. Apr 2015, 12:42

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: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: responsive/ adaptive ImageTable?

Post by kukki » Sun 26. Apr 2015, 13:08

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.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

Post Reply