Page 3 of 12

Re: ...auf dem Weg nach bootstrap city

Posted: Wed 27. Aug 2014, 19:44
by Oliver Georgi

Re: ...auf dem Weg nach bootstrap city

Posted: Sat 30. Aug 2014, 12:05
by update
Und wie bekomme ich dann (damit) den Link hinter dem dropdown-toggle weg? Bin gerade etwas verwirrt ;)

Re: ...auf dem Weg nach bootstrap city

Posted: Sun 12. Oct 2014, 12:57
by update
Ok, den Hinweis gebe ich weiter: Bei der Weiterleitung ein # einfügen reicht... ;)
Hätte ich auch selber drauf kommen können! :oops:

Re: ...auf dem Weg nach bootstrap city

Posted: Mon 13. Oct 2014, 08:20
by Uwe367
Manchmal sieht ml den Wald vor Bäumen nicht :wink:

Re: ...auf dem Weg nach bootstrap city

Posted: Thu 20. Nov 2014, 04:25
by 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.

Re: ...auf dem Weg nach bootstrap city

Posted: Thu 20. Nov 2014, 07:50
by 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.

Re: ...auf dem Weg nach bootstrap city

Posted: Thu 20. Nov 2014, 08:00
by 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 ...).

Re: ...auf dem Weg nach bootstrap city

Posted: Thu 20. Nov 2014, 09:24
by nameless1
claus wrote: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.

Re: ...auf dem Weg nach bootstrap city

Posted: Thu 20. Nov 2014, 09:27
by 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>

Re: ...auf dem Weg nach bootstrap city

Posted: Thu 20. Nov 2014, 09:36
by nameless1
Jensensen wrote: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?

Re: ...auf dem Weg nach bootstrap city

Posted: Thu 20. Nov 2014, 09:41
by Oliver Georgi
genau, dafür ändert sich nichts. Das war schon immer frei von den Beschränkungen in Bezug auf die Contentbreite.

Re: ...auf dem Weg nach bootstrap city

Posted: Thu 20. Nov 2014, 19:32
by update
Feine Sache, das mit dem <picture> Element. Hoffen wir mal, dass der Browsersupport da schleunigst nachzieht...

Re: ...auf dem Weg nach bootstrap city

Posted: Fri 21. Nov 2014, 09:42
by nameless1
feinere sache das mit dem bootstrap-row. gestern noch intern diskutiert wie zu lösen, aber so genial hat keiner gedacht.

Re: ...auf dem Weg nach bootstrap city

Posted: Fri 21. Nov 2014, 11:11
by update
nameless1 wrote:feinere sache das mit dem bootstrap-row
Wie meinst Du das genau?
Edit: Ok, hab ein update verpasst :lol:

Re: ...auf dem Weg nach bootstrap city

Posted: Tue 10. Feb 2015, 22:01
by 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