Page 2 of 6

Re: Foldergallery_XH

Posted: Sat Apr 15, 2017 3:37 pm
by frase
Nochwas.
Übersichtsseite:
Hat ein Bild einen sehr langen Titel, z.B. "After_the_Thrill_is_Gone_by_Jack_Vettriano_266_big", dann gibt es Probleme bei MouseOver.
screen-foldergalerie.png

Re: Foldergallery_XH

Posted: Sat Apr 15, 2017 3:58 pm
by cmb
cmb wrote:
lck wrote:Aber, ein Problem gibt es bei kleineren Bildern (Beispiel 300px Breite), da überlagert der Text "Bild 1 von 3" den Bildernamen.
Da könnte man die Position ändern, das erfordert natürlich auch, dass die Title-Box mehr Platz braucht, hmm. Eventuell ist auch eine Konfigurationsoption anzeigen/ausblenden möglich?
Ja, stimmt, kleine Bilder machen Ärger. Wenn ich's recht in Erinnerung habe, dann kann man bei Colorbox Mindest-Breite und Höhe vorgeben; das könnte passen. Muss ich mir anschauen.
Nein, Mindestbreite und -Höhe gibt es leider nicht. Ich habe aber inzwischen Maximalbreite und -höhe eingeführt; statt dessen wäre es möglich auch einfach`width` und `height` zu verwenden, so dass die Lightbox immer gleich groß ist (die Bilder aber nicht vergrößert werden). Statt 100% sind vielleicht auch etwas kleinere Werte denkbar – vielleicht auch frei konfigurierbar. Feste `width` und `height` sieht bei kleinen Bildern etwas blöd aus, bietet aber den Vorteil, dass bei unterschiedlichen Bildgrößen die Lightbox immer gleich bleibt, so dass leichter navigiert werden kann, und im Fall einer Slideshow sieht es vermutlich besser aus.

Jedenfalls kann das Problem von langen Bildunterschriften so nicht vollständig gelöst werden. Ist die Bildunterschrift sehr lang, oder der Viewport schmal, dann überlappen die Texte dennoch. Das ist ein bekanntes Problem, das wohl auch nicht gelöst werden wird (liegt ja immerhin schon ein paar Jahre vor). Es gibt diverse Workarounds (einfach mal nach "colorbox caption too long" suchen), aber allzu glücklich bin ich damit nicht, da ich im Zweifel keinen Einfluss auf die Weiterentwicklung von Colorbox habe, und dann unter Umständen immer wieder nachgebessert werden muss. Ich tendiere dazu, das letztlich als Limitation zu dokumentieren, denn auch in der Vorschau sind lange Bildunterschriften ein Problem. Denkbar wäre vielleicht auch die Länge der Überschriften (per Konfiguration) zu beschränken, und diese dann bei Bedarf abzuschneiden.

Was meint Ihr?

Re: Foldergallery_XH

Posted: Sat Apr 15, 2017 4:09 pm
by cmb
frase wrote:Bild x von x in eine Zeile.
Bu in eine neue, mit Zeilenumbruch bei Überlauf?
An colorbox.css würde ich nicht so gerne rangehen, siehe weiter oben.
frase wrote:Ach so:
Die ersten Speicherfehler kamen bei ca. 150 Bildern mit jeweils 5 bis 10 MB!
Die waren also extrem viele und extrem groß.
Extrem viele Bilder sollten kein Speicher-Problem verursachen; extrem große aber unter Umständen schon. Dabei spielt die Größe des JPEGs aber keine wirkliche Rolle, sondern es kommt auf die Auflösung an (GD erlaubt leider kein direktes Downscaling, so dass das Ursprungsbild komplett in ein zweidimensionales Array geladen wird, das pro Pixel 4 Byte benötigt). (10MB sind aber fürs Web sowieso eine ganze Menge.)
frase wrote:Übersichtsseite:
Hat ein Bild einen sehr langen Titel, z.B. "After_the_Thrill_is_Gone_by_Jack_Vettriano_266_big", dann gibt es Probleme bei MouseOver.
Hm, word-wrap:break-word oder overflow-x:hidden, das ist die Frage! Oder halt wirklich die Längenbeschränkung (siehe oben), also dann vielleicht bei max. 25 Zeichen: "After_the_Thrill_is_Gone…"

Re: Foldergallery_XH

Posted: Sat Apr 15, 2017 4:20 pm
by frase
cmb wrote:Ich habe aber inzwischen Maximalbreite und -höhe eingeführt;
Funktioniert perfekt.
cmb wrote:Hm, word-wrap:break-word oder overflow-x:hidden, das ist die Frage! Oder halt wirklich die Längenbeschränkung (siehe oben), also dann vielleicht bei max. 25 Zeichen: "After_the_Thrill_is_Gone…"
Es ist auf der Übersichtsseite gar nicht so das Problem der Länge, sondern, dass die Beschreibung unter dem nächsten Bild liegt.

Ich kann schon verstehen, dass du an der Colorbox nicht rumschrauben willst.
Eine Kürzung wäre nicht schön, aber wahrscheinlich die naheliegende Lösung.

Noch ein Hinweis: Das Plugin heißt "Foldergallery_XH".
In der Hilfe heißt es "Fotogallery_XH – Handbuch".

Und ganz allgemein (weltweit gesehen):
Mich wundert es, dass es mit nahezu allen Bildergalerien irgendwelche Probleme oder -chen gibt.
:cry:

Re: Foldergallery_XH

Posted: Sat Apr 15, 2017 4:57 pm
by cmb
frase wrote:Es ist auf der Übersichtsseite gar nicht so das Problem der Länge, sondern, dass die Beschreibung unter dem nächsten Bild liegt.
Hast Du mal das probiert:

Code: Select all

.foldergallery figcaption {word-wrap:break-word}
frase wrote:Noch ein Hinweis: Das Plugin heißt "Foldergallery_XH".
In der Hilfe heißt es "Fotogallery_XH – Handbuch".
Oh! Danke für den Hinweis. (Es gab halt mal eine Fotogalerie_XH; das ist ein bisschen verwirrend.)
frase wrote:Und ganz allgemein (weltweit gesehen):
Mich wundert es, dass es mit nahezu allen Bildergalerien irgendwelche Probleme oder -chen gibt.
Mich nicht wirklich. Ich sehe zumindest drei besondere Problempunkte:
  1. Gerade bei einer Bildergalerie gibt es sehr unterschiedliche Vorstellungen bezüglich der Präsentation, und alles soll wirklich gut aussehen.
  2. Die Bildergrößen explodieren (vor 20 Jahren waren Bilder mit einem halben Megapixel schon riesig; heute sind 5 Megapixel normal), und zumindest GD kommt da nicht wirklich hinterher, aber andere PHP Extensions sind nur relativ wenig verbreitet. php-vips macht zum Beispiel einen sehr interessanten Eindruck, aber ich kam noch nicht dazu es mir mal anzuschauen.
  3. Smartphones & 4K Bildschirme, und dann auch noch hochauflösende Displays, machen es nicht einfacher.

Re: Foldergallery_XH

Posted: Sat Apr 15, 2017 5:39 pm
by frase
cmb wrote:
frase wrote:Es ist auf der Übersichtsseite gar nicht so das Problem der Länge, sondern, dass die Beschreibung unter dem nächsten Bild liegt.
Hast Du mal das probiert:

Code: Select all

.foldergallery figcaption {word-wrap:break-word}
Ein Umbruch hilft nicht, wenn es darunter liegt.

Was hülfte ist:

Code: Select all

.foldergallery_image:hover figcaption {
    display: block;
    z-index: 100;
}
Wobei man da auch nicht weiß, ob "100" reicht, templateabhängig.

Re: Foldergallery_XH

Posted: Sat Apr 15, 2017 9:25 pm
by cmb
frase wrote:Ein Umbruch hilft nicht, wenn es darunter liegt.
Ja, aber das muss es ja nicht. Meine Idee war eigentlich, dass die Caption auf den Container beschränkt bleibt, was mit folgendem so halbwegs funktioniert:

Code: Select all

.foldergallery figcaption {
    width: 100%; // hatte ich vorher vergessen
    word-wrap: break-word;
}
PS: statt `width` wohl besser `max-width`.

Re: Foldergallery_XH

Posted: Sun Apr 16, 2017 7:30 am
by frase
cmb wrote:Meine Idee war eigentlich, dass die Caption auf den Container beschränkt bleibt,
Ja, das ist gut und funktioniert.
Und vielleicht ist width:100% sogar besser als max-width, denn dann ist die Caption immer gleich breit und zentriert. Geschmackssache.
Ganz kleiner Haken: margin von foldergallery_image wird mit einbezogen. Ist aber nicht schlimm.

Re: Foldergallery_XH

Posted: Sun Apr 16, 2017 9:56 am
by cmb
frase wrote:Ganz kleiner Haken: margin von foldergallery_image wird mit einbezogen. Ist aber nicht schlimm.
Schön fand ich es nicht, aber für mich relevanter: warum ist das so? Ich fürchte, es ist zumindest keine saubere Lösung – scheint mir eventuell nur "zufällig" zu funktionieren.

Andererseits vielleicht auch egal. Eigentlich ist mir es so wie es jetzt ist schon etwas überstylt für ein Plugin-Default, und die Bildunterschrift ist ja auch schon als title da. Und bezüglich der Ordner gefällt mir die Idee einer Vorschau. Na ja, mal schauen.

Re: Foldergallery_XH

Posted: Sun Apr 16, 2017 10:25 am
by frase
cmb wrote:aber für mich relevanter: warum ist das so?
Das ist mal wieder das Box-Modell.
So geht es:

Code: Select all

.foldergallery figcaption {
    background: black none repeat scroll 0 0;
    border-radius: 0.5em;
    bottom: 4px;
    box-sizing: border-box; /* Das isses !!! */
    color: white;
    font-size: smaller;
    left: 0;
    opacity: 0.666;
    overflow-wrap: break-word;
    padding: 0.2em 0.5em;
    position: absolute;
    width: 100%;
}