Thumbs in Beitrag total unübersichtlich!

[luziusalbin]

hallo zusammen,

auf einem momentan stark genutzten Blog von einer Kollegin, die eine Weltreise macht, sind die
Bilder, welche man im vollstänigen Beitrag sieht, total 'unübersichtlich' Dargestellt.

Durch die verschiedenen Formate gibt es keine klare Linie in den Bildern. Gibt es da eine Lösung?
kann man irgendwo einen Raster festlegen?

Danke für Inputs!

Luzius

[yellowled]

Grundsätzlich wäre es deutlich leichter, zu helfen, wenn man eine URL zu dem Blog oder noch besser einem betroffenen Eintrag hätte.</zaunpfahl>

auf einem momentan stark genutzten Blog von einer Kollegin, die eine Weltreise macht, sind die Bilder, welche man im vollstänigen Beitrag sieht, total 'unübersichtlich' Dargestellt.

Durch die verschiedenen Formate gibt es keine klare Linie in den Bildern. Gibt es da eine Lösung?
kann man irgendwo einen Raster festlegen?

So weit man das anhand dieser etwas dürftigen Beschreibung und des Screenshots ersehen kann, nehme ich dann, dass Du den Umstand meinst, dass die in Gruppen eingebundenen Bilder sich nicht „schön“ in Reihe und Glied aufreihen, sondern ziemlich krumm und schief sitzen.

Tatsächlich gibt es für solche Anwendungsfälle keine „Galerie-Funktion“, die Bilder werden als einzelne Elemente in den Eintrag eingebunden und über das CSS des verwendeten Themes bzw. eventuell über Fallback-Styles von Serendipity ausgerichtet. Das bedeutet hier: Sie werden „links umflossen“ (float: left; in CSS; bedeutet: das auf ein Bild folgende Element – hier meistens ein Bild – wird rechts neben dem Element angeordnet, sofern dort genug Platz ist).

Die einfachste Lösung, um das Problem zu beheben, ist es, alle Bilder bzw. Bildvorschauen im exakt gleichen Format (Pixelbreite mal Pixelhöhe) einzubinden, was praktisch aufgrund der automatischen Generierung von Thumbnails in s9y bedeutet, dass alle eingebundenen Fotos exakt gleiche Dimensionen haben müssen. Ist mit Fotos von unterwegs vermutlich etwas unpraktisch, löst aber das Problem, dass sich die Bilder wie Kraut und Rüben anordnen. Dazu müsste man auch entweder ganz auf Bildunterschriften verzichten oder dafür sorgen, dass die Bildunterschriften bei allen Bildern die gleiche Zeilenanzahl haben – kurz gesagt sollen alle eingebundenen Bilder die gleiche Höhe und idealerweise auch Breite erhalten.

Darüber hinaus kann man mit etwas zusätzlichem HTML in den Einträgen und CSS nachhelfen, dafür müsste aber die Person, die die Einträge verfasst, den HTML-Quellcode des Eintrags bearbeiten können, ansonsten wirkt das nicht. Außerdem muss man dazu wissen, wie breit die Inhaltsspalte ist und wie breit die Thumbnails sind. Stand jetzt passen 4 Thumbnails in eine Reihe – wenn das alles so bleiben soll, dann müssen je 4 Thumbnails von einem div-Container umschlossen sein, also im Quelltext des Eintrags folgendes stehen:

Code: Select all

<div class="clear">
… [hier die 4 Bilder einfügen] …
</div>
<div class="clear">
… [hier die nächsten 4 Bilder] …
</div>
[usw. usf.]

Dazu wirft man in die style.css des Blogtemplates folgendes:

Code: Select all

.clear { clear: both; }

und dann sollte das korrekt sitzen.

YL

[luziusalbin]

salü,

entschuldige - natürlich habe ich den link vergessen: http://www.those.ch/celine/serendipity/

wie ihr sieht, lädt meine kollegin relativ viele fotos in den blog.
sie versteht nichts von html und will sich das auch nicht antun müssen...
aber so wie's aussieht ist das die einzige möglichkeit, wie von dir beschrieben.

ideal wäre, wenn man einen unterordner der "bildergallerie" anhängen könnte, denn in der gallerie
werden die bilder prefekt dargestellt (jedoch funktioniert da lightbox usw nicht.)

ich versuch mal das mit dem 4er-code. evtl ists nicht zu kompliziert und ich
mach das für sie eben jeweils, nachdem sie einen neuen beitrag gemacht hat.


THAKNS ANYWAY!

[luziusalbin]

Darüber hinaus kann man mit etwas zusätzlichem HTML in den Einträgen und CSS nachhelfen, dafür müsste aber die Person, die die Einträge verfasst, den HTML-Quellcode des Eintrags bearbeiten können, ansonsten wirkt das nicht. Außerdem muss man dazu wissen, wie breit die Inhaltsspalte ist und wie breit die Thumbnails sind. Stand jetzt passen 4 Thumbnails in eine Reihe – wenn das alles so bleiben soll, dann müssen je 4 Thumbnails von einem div-Container umschlossen sein, also im Quelltext des Eintrags folgendes stehen:

Code: Select all

<div class="clear">
… [hier die 4 Bilder einfügen] …
</div>
<div class="clear">
… [hier die nächsten 4 Bilder] …
</div>
[usw. usf.]

Dazu wirft man in die style.css des Blogtemplates folgendes:

Code: Select all

.clear { clear: both; }

und dann sollte das korrekt sitzen.

YL

ich habe das nun ausprobiert, mit dem ergebnis, dass die jeweiligen 4 bilder im container abgestuft daher kommen. so solls wohl nicht sein... beispiel hier (die ersten 12 bilder habe ich so eingeteilt, wie von dir beschrieben):

http://those.ch/celine/serendipity/inde ... Reise.html

[Timbalu]

Das liegt aber am nl2br Plugin, das, ansonsten immer noch nützlich, hier für Unterbrechungen (mit <br>) sorgt.
Bevor ihr nun ganz umstellt, entryproperties installiert etc, könnte eine kleine Stylesheet Ergänzung die Sache für solche Fälle bereinigen :

Code: Select all

.clear > br {
    display: none;
}
.clear .serendipity_image_link img {
    padding: 10px;
}

[luziusalbin]

Code: Select all

.clear > br {
    display: none;
}
.clear .serendipity_image_link img {
    padding: 10px;
}

wie setze ich das korrekt ein? ich hab das ans ende vom css-file angefügt.
ändern tut es im moment nichts... was für auswirkungen sollte das script haben?

[Timbalu]

Ja gut. Mach mal [Ctrl] - [F5] im Browser, denn ich sehe das konkrete Ergebnis. Das Einzige was noch zu bearbeiten wäre, sind die boxed images. Ergänze mit:

Code: Select all

.clear .serendipity_imageComment_left {
    margin-right: 0;
}
.clear .serendipity_imageComment_left img {
    padding: 0;
}

PS. Dieses letzte Bild ist ein wahrer Nervenkitzel!!

[yellowled]

Man könnte auch dieses &!#?% NL2BR auf NL2P umstellen, anstatt seine schwachsinnige Ausgabe mit CSS zurecht zu zerren.

Das da

Code: Select all

.clear .serendipity_image_link img {
    padding: 10px;
}

ist übrigens keine gute Idee, weil es dazu führt, dass sich die Breite des img-Elementes erhöht. Da das übergeordnete Container-Element aber eine feste Breite bekommt, ragt das img aus dem Container heraus (siehe Bild mit Unterschrift „Unser Ziel“).

YL

[luziusalbin]

CTRL-F5 war das fehlende stück - nun siehts auch bei mir gut aus (bis auf die bildunterschirften / rahmen)

Code: Select all

.clear .serendipity_imageComment_left {
    margin-right: 0;
}
.clear .serendipity_imageComment_left img {
    padding: 0;
}

wo soll das genau hin und was bringt es? sorry, ich bin nicht der code-profi.

und ja, das ist nervenkitzel - übrigens einen ausflug in die schweiz wert!

Man könnte auch dieses &!#?% NL2BR auf NL2P umstellen, anstatt seine schwachsinnige Ausgabe mit CSS zurecht zu zerren.

wie mach ich das und wo? was bringt es genau?

Code: Select all

.clear .serendipity_image_link img {
    padding: 10px;
}

ich hab diesen code im css entfernt, die bildunterschriften werden aber immer noch "nicht-gleich-breit" angezeigt. ctrl-f5 hat auch nichts gebracht (bis jetzt).

[Timbalu]

nee nee, nix wegnehmen... ergänzen!!

also insgesamt:

Code: Select all

.clear {
    clear: both;
}
.clear > br {
    display: none;
}
.clear .serendipity_image_link img {
    padding: 10px; /* Abstand als quasi Gallerie */
}
.clear .serendipity_imageComment_left {
    margin-right: 0;
}
.clear .serendipity_imageComment_left img {
    padding: 0; /* Abstand für geboxte Bilder wieder aufheben */
}

[yellowled]

Man könnte auch dieses &!#?% NL2BR auf NL2P umstellen, anstatt seine schwachsinnige Ausgabe mit CSS zurecht zu zerren.

wie mach ich das und wo? was bringt es genau?

In der Konfiguration des NL2BR-Plugins (in der Plugin-Liste auf den Titel klicken) sollte es eine Option dafür geben (ich schmeiße NL2BR üblicherweise als erstes aus Blogs raus, insofern weiß ich es nicht genauer).

NL2BR macht folgendes: Überall, wo Du im Editor 2mal Return drückst, setzt es zwei <br>-Elemente ein. NL2P wickelt stattdessen die gefundenen Absätze in <p>…</p> (wie es sein sollte).

Code: Select all

.clear .serendipity_image_link img {
    padding: 10px;
}

ich hab diesen code im css entfernt, die bildunterschriften werden aber immer noch "nicht-gleich-breit" angezeigt. ctrl-f5 hat auch nichts gebracht (bis jetzt).

Eventuell hast Du den Code doppelt in der style.css? Er steht nämlich immer noch drin. Sicherheitshalber könntest Du hier einfach statt 10px padding: 0; einsetzen.

YL

[luziusalbin]

dieses thema kann man von mir aus als gelöst einstufen.

ich habe schlussendlich den P-Tag (NL2BR auf NL2P) wieder ausgeschaltet und
den von euch generierten code eingefügt. nun sitzt das ganze swoeit tiptop...!

Code: Select all

.clear {
    clear: both;
}
.clear > br {
    display: none;
}
.clear .serendipity_image_link img {
    padding: 10px; /* Abstand als quasi Gallerie */
}
.clear .serendipity_imageComment_left {
    margin-right: 0;
}
.clear .serendipity_imageComment_left img {
    padding: 0; /* Abstand für geboxte Bilder wieder aufheben */
}

DANKE!

[Timbalu]

sach ich doch...!

Ich hatte mir schon fast gedacht, dass du unseren gegensätzlichen Ansatz nicht wirklich auseinanderhalten konntest. Da sieht man auch mal wieder das die NL2P Einstellung nicht wirklich immer zu bevorzugen ist.

Gruß an Céline! Da reist man neidvoll mit!

[luziusalbin]

tja, es ist nicht immer einfach...
hab vor lauter bäume den wald nicht mehr gesehen...

den richte ich sehr gerne aus. sie ist vollkommen aus dem häuschen - einerseits wegen
ihrer weltreise und andererseits wegen des guten blog-systemes. das ist mal lob!


PS: du heisst ja Ian - guter name!
mein sohn heisst ebenfalls so...