...auf dem Weg nach bootstrap city

[Oliver Georgi]

https://github.com/CWSpear/bootstrap-hover-dropdown

[update]

Und wie bekomme ich dann (damit) den Link hinter dem dropdown-toggle weg? Bin gerade etwas verwirrt

[update]

Ok, den Hinweis gebe ich weiter: Bei der Weiterleitung ein # einfügen reicht...
Hätte ich auch selber drauf kommen können!

[Uwe367]

Manchmal sieht ml den Wald vor Bäumen nicht

[Jensensen]

Durch diese Änderung vom 18. November 2014 https://github.com/slackero/phpwcms/com ... 936b01803a ist die Integration von bootstrap vermutlich noch einmal entscheidend verbessert worden. Das betrifft die Bildgröße bei einem responsive web design.
Wenn ich das richtig verstehe, können Bilder nun in einer Größe, größer als eine fixe Spaltenbreite angelegt werden. Denn je nach Endgerät variiert die Bildgröße und wird durch das CSS framework definiert. Bootstrap kann nun auf eine ausreichend große Bilddatei zugreifen, die auch nach einer Skalierung auf dem jeweiligen Endgerät immer noch optimal dargestellt wird.

Beispiel: Drückt man die F11-Taste, erscheint die Webseite im Web Browser im Vollbildmodus. Hierdurch erweitern sich in der Regel die Spaltenbreiten. Diese Darstellung wird von bootstrap erkannt und alle Inhalte werden angepasst, neu gerendert. Für Textinhalte ist das unproblematisch. Bilder müssten aber nun größer, vor allem breiter sein. Im Backend von phpwcms ist die maximale Größe jedoch einmalig definiert. Für die gerforderte Darstellung im Endgerät ist das Bild nun eventuell zu klein. In der Folge entsteht, bezogen auf die Bildposition bzw. auf die Spaltenbreite, eine Lücke um das Bild herum. Das Bild (klassisch) wurde ursprünglich mit der Breite der durch das Layout bestimmten Spalte hochgeladen und zudem durch die Maximalwerte fixiert.

Nach der oben genannten Änderung kann das Bild von vorn hinein deutlich größer hochgeladen und im System bereit gestellt werden. Eine letztliche Skalierung (viewport) erfolgt im Browser, mit bootstrap durch CSS. Bootstrap kann hierbei jetzt aber auf physikalisch größere Bilddaten zugreifen. Dadurch entstehen nun keine Lücken und die Bildqualität ist, beziehungsweise bleibt, optimal.

[Oliver Georgi]

genau wird in Kürze noch erweitert, sodass jeder CP nach Bedarf mit Gridinfo versehen werden kann und der Option eines definierten Wrappers, um beim Beispiel Bootstrap zu bleiben — Panel oder Well etc.

[update]

Heißt das, dass dann auch jeweils physikalisch unterschiedlich große Bilder geladen werden (können)? In so ein Schmaatfon ein riesiges Desktopbild zu laden ist ja nicht zielführend (na gut, ich könnte das ja jetzt schon mit "if mobile"-Anweisungen im CP-Template eventuell teilweise abfangen, aber ...).

[nameless1]

Heißt das, dass dann auch jeweils physikalisch unterschiedlich große Bilder geladen werden (können)? In so ein Schmaatfon ein riesiges Desktopbild zu laden ist ja nicht zielführend (na gut, ich könnte das ja jetzt schon mit "if mobile"-Anweisungen im CP-Template eventuell teilweise abfangen, aber ...).

dafür hat doch og hier und dir vor kurzem n js gepostet mit dem du basierend auf die bildschirmweite die bilde auslieferst.

[Oliver Georgi]

das geht nur zuverlässig mit JavaScript und z.B. Lazyload. Serverseitig ist das alles ziemlich gurkig, da es keinen zuverlässig definierten Zustand gibt. Es gäbe sicher Möglichkeiten entsprechend Regeln einzuführen und einen Cookie mitzuschleifen oder Sessionvariable nach erstmaligen Seitenaufruf mit den über JavaScript gewonnenen Clientinfos. Aber das alles ist natürlich irre aufwendig — sprich das letzte Problem, dass mich gerade umtreibt.

Wie gesagt, meine erste Wahl dafür ist Lazyload-Technik, sprich es werden nur die Bilder geladen, die im Viewport sichtbar sind. Das lässt sich gut handhaben und ohne Anpassungen am CMS.

Ansonsten lässt sich vieles bereits über angepasste Templates regeln und das zukunftssichere <picture> Element

Muster als Idee?

Code: Select all

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="img/cmsimage.php/650x0/{IMAGE_HASH}.{IMAGE_EXT},
            img/cmsimage.php/975x0/{IMAGE_HASH}.{IMAGE_EXT} 1.5x,  
            img/cmsimage.php/1300x0/{IMAGE_HASH}.{IMAGE_EXT} 2x"
  >
  <source 
    media="(min-width: 465px)" 
    srcset="img/cmsimage.php/465x0/{IMAGE_HASH}.{IMAGE_EXT},
            img/cmsimage.php/498x0/{IMAGE_HASH}.{IMAGE_EXT} 1.5x,  
            img/cmsimage.php/930x0/{IMAGE_HASH}.{IMAGE_EXT} 2x"
  >
  <img 
    src="img/cmsimage.php/650x0/{IMAGE_HASH}.{IMAGE_EXT}" 
    srcset="img/cmsimage.php/975x0/{IMAGE_HASH}.{IMAGE_EXT} 1.5x,  
            img/cmsimage.php/1300x0/{IMAGE_HASH}.{IMAGE_EXT} 2x"
    alt="Just a sample"
  >
</picture>

[nameless1]

Durch diese Änderung vom 18. November 2014 https://github.com/slackero/phpwcms/com ... 936b01803a ist die Integration von bootstrap vermutlich noch einmal entscheidend verbessert worden. Das betrifft die Bildgröße bei einem responsive web design.

ABER wenn man bis dato die bilder eh dynamisch via js und phpwcms Link-Methode (img/cmsimage.php/1006x400/2697831ffade9e98b37f865811a3938b.jpg) generieren lässt ändert sich nichts, richtig?

[Oliver Georgi]

genau, dafür ändert sich nichts. Das war schon immer frei von den Beschränkungen in Bezug auf die Contentbreite.

[update]

Feine Sache, das mit dem <picture> Element. Hoffen wir mal, dass der Browsersupport da schleunigst nachzieht...

[nameless1]

feinere sache das mit dem bootstrap-row. gestern noch intern diskutiert wie zu lösen, aber so genial hat keiner gedacht.

[update]

feinere sache das mit dem bootstrap-row

Wie meinst Du das genau?
Edit: Ok, hab ein update verpasst

[update]

Nach einem Thread hier: http://forum.phpwcms.org/viewtopic.php? ... 5&start=15

übertrage ich die weitere (bootstrap)Diskussion mal nach hier und poste das letzte Beispiel von Oliver

Code: Select all

[LEFT]
    <div class="col-md-3">
        {LEFT}
    </div>
[/LEFT ]
    <div class="col-md-[LEFT]9[/LEFT][LEFT_ELSE]12[/LEFT_ELSE]">
        {CONTENT}
    </div>

3-9 Spalten, wenn {LEFT} befüllt ist, ansonsten 12