Bilddarstellung unter 2.0

Hier können Probleme und alles andere in Deutscher Sprache gelöst werden.
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: Bilddarstellung unter 2.0

Post by Timbalu »

Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
kho
Regular
Posts: 342
Joined: Fri Mar 04, 2005 8:34 pm

Re: Bilddarstellung unter 2.0

Post by kho »

Also, bei mir werden die nach wie vor Bild für Bild mit Zeilenumbruch dargestellt. Eigentlich hätte ich gedacht, dass 4 nebeneinander passen, und erst dann ein Umbruch erfolgt.

Oder sprechen wir da beide von etwas anderem??.-)

Schräg. In der Vorschau im admin Interface werden die Bilder so dargestellt, wie ich das haben will... im browser jedoch nicht...
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: Bilddarstellung unter 2.0

Post by Timbalu »

Nun, ich nutze Firefox, aber das liegt an einem Chrome fix für lightbox in der chromefix.css. Du müsstest dann noch

Code: Select all

/* on Safari and Chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .serendipity_image_center {
      display: inherit;
  }
}
in deine user.css einfügen. Beide, siehe zuvor, am besten mit einem

Code: Select all

center .serendipity_image_center {
oder wirklich besseren tag/selector (statt center) für diese Spezial Galerien.

Der obige Chromefix war nötig wegen http://board.s9y.org/viewtopic.php?f=4& ... #p10440915 und ff.
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
kho
Regular
Posts: 342
Joined: Fri Mar 04, 2005 8:34 pm

Re: Bilddarstellung unter 2.0

Post by kho »

Danke für die Rückmeldung!

Ich habe nun den Code

/* on Safari and Chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.serendipity_image_center {
display: inherit;
}
}

in die user.css eingetragen. Leider rührt sich da bei den Bildern überhaupt nichts. Sie stehen nach wie vor untereinander...:-(

Ich bin nicht sicher, ob ich richtig verstanden habe, was ich mich dem center .serendipity_image_center {
machen soll.

lg, kho
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: Bilddarstellung unter 2.0

Post by Timbalu »

OK das ist blöd, denn die user.css sitzt vor der chromefix.css.
Da kann man dann nur mit display:inherit !important; arbeiten, oder besser diese paar Zeilen weiter unten in der index.tpl nach dem {serendipity_hookPlugin hook="frontend_header"} per Hand einbinden, so a la

Code: Select all

<style>
/* k-ho gallery fix */
center .serendipity_image_center {
    display: inherit;
}

/* on Safari and Chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  center .serendipity_image_center {
      display: inherit;
  }
}
</style>
kho wrote:Ich bin nicht sicher, ob ich richtig verstanden habe, was ich mich dem center .serendipity_image_center {
machen soll.
Das < center > tag hast du in deinen Galerien ja bereits gesetzt. Also kann man es auch nutzen, auch wenn es als tag veraltet und eigentlich eher unnütz, vielleicht sogar schädlich ist. Besser wäre ein <div id="khogall">...</div>, denn dann könnte man #khogall .serendipity_image_center { schreiben und die beiden rules sogar in der user.css belassen. Aber das bedürfte einer manuellen Änderung der betreffenden Einträge deinerseits.
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
kho
Regular
Posts: 342
Joined: Fri Mar 04, 2005 8:34 pm

Re: Bilddarstellung unter 2.0

Post by kho »

Ich habe den Code
<style>
/* k-ho gallery fix */
center .serendipity_image_center {
display: inherit;
}

/* on Safari and Chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
center .serendipity_image_center {
display: inherit;
}
}
</style>

in die Zeile 41 (ein mal vor und ein mal nach dem "if") eingefügt in der index.tpl. War das korrekt??

Die Bilder bewegen sich keinen mm... ne schwierige Geburt:-)

lg, kho
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: Bilddarstellung unter 2.0

Post by Timbalu »

Oder nur

Code: Select all

center .serendipity_image_center {
    display: inline-block !important;
}
ginge (eventuell) auch...
kho wrote:in die Zeile 41 (ein mal vor und ein mal nach dem "if") eingefügt in der index.tpl. War das korrekt??
Wohl nicht, denn die Ausgabe lügt nicht:

Code: Select all

<head>
    <meta charset="ISO-8859-1">
    <title>Karneval der Kulturen 2014... | kho</title>
    <meta name="generator" content="Serendipity v.2.0">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://k-ho.de/weblog/index.php?/serendipity.css&v=1425402660">
    <link rel="stylesheet" href="/weblog/templates/kho/user.css">
    <script src="/weblog/templates/kho/js/modernizr-2.7.1.min.js"></script>
    <link rel="alternate" type="application/rss+xml" title="kho RSS feed" href="http://k-ho.de/weblog/index.php?/feeds/index.rss2">
    <link rel="alternate" type="application/x.atom+xml"  title="kho Atom feed"  href="http://k-ho.de/weblog/index.php?/feeds/atom.xml">
    <link rel="pingback" href="http://k-ho.de/weblog/comment.php?type=pingback&entry_id=3701">
    <script src="/weblog/templates/jquery.js"></script>
    <script>jQuery.noConflict();</script>
<meta name="description" content="      
      
      
      
      
      
      
      
      
      
      
      
      

Ein paar Impre" />

    <link rel="stylesheet" type="text/css" href="/weblog/plugins/serendipity_event_lightbox/fixchrome.css" />
    <link rel="stylesheet" type="text/css" href="/weblog/plugins/serendipity_event_lightbox/magnific-popup/magnific-popup.css" />

    <script src="http://k-ho.de/weblog/index.php?/serendipity.js&v=1425402660"></script>
</head>
<body>
So ungefähr müsste das aussehen.

Code: Select all

...
{/if}
{serendipity_hookPlugin hook="frontend_header"}
<script src="{$head_link_script}"></script>
<style>
..deine manuellen styles..
</style>
</head>
Doch wie gesagt mit dem kleinen Scriptteil, siehe oben, sollte es auch in der user.css genügen.
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
kho
Regular
Posts: 342
Joined: Fri Mar 04, 2005 8:34 pm

Re: Bilddarstellung unter 2.0

Post by kho »

Na, ich habe das schon eingefügt, aber wieder rausgenommen,nachdem ich gesehen habe, dass es nicht funktioniert hat.

Aber der Eintrag

.serendipity_image_center {
display: inline-block !important;
}

in der user.css hat nun zum Erfolg geführt:-)!! Damit ist die Darstellung wieder so, wie ich sie hatte und haben wollte...:-)!

Puhh... Vielen Dank für Deine Geduld und Unterstützung!!

Liebe Grüsse, kho
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: Bilddarstellung unter 2.0

Post by Timbalu »

Wie schön. Allerdings so - als general Rule - wird das jetzt jedes image_center überschreiben.
Der Chrome fix war meiner Erinnerung dafür da, dass die floats der serendipity_left/right trotz der lightbox mit Chrome weiterhin funktionierten. Weiteres im verlinkten Thread.
Deshalb könnte ein etwas spezialisierterer gallery selector a la #dein .serendipity_image_center {} nicht schaden.
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
kho
Regular
Posts: 342
Joined: Fri Mar 04, 2005 8:34 pm

Re: Bilddarstellung unter 2.0

Post by kho »

Ja, das werde ich auch entsprechend anpassen. Und mir auch die anderen Tips und Anregungen anschauen!!

Vielen Dank und Liebe Grüsse, kho
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Bilddarstellung unter 2.0

Post by yellowled »

Mir ist natürlich klar, dass das so einfacher ist, als zig Einträge zu bearbeiten – aber auch wenn das im Ergebnis „richtig“ aussieht, es ist ein bisschen so, als wollte man eine Schraube in die Wand bringen und würde dafür einen Hammer nehmen. Insbesondere !important ist eigentlich schon ein Vorschlaghammer, den man nach Möglichkeit in CSS zu vermeiden versucht.

Was man tatsächlich tun sollte ist, bei den Bildern, die fälschlicherweise zentriert sind und dadurch einen Absatz erzeugen, die CSS-Klasse auf dem img-Element von serendipity_image_center auf serendipity_image_left zu ändern.

Das nur so als „Dokumentation“, falls mal jemand diesen Thread ausbuddelt.

YL
kho
Regular
Posts: 342
Joined: Fri Mar 04, 2005 8:34 pm

Re: Bilddarstellung unter 2.0

Post by kho »

Nun, ich habe es schon so verstanden, dass ich für die Ausrichtung der Bilder eine eigene csh-klasse einrichte, auch wenn es manuellen Aufwand bedeutet, das auch in den vorhandenen Einträgen zu ändern.

Bei den Bildersammlungen in den Einträgen hat aber erst der "Vorschlaghammer" zum Ziel geführt. Wenn es sanftere oder sauberer Methoden gibt, nehme ich sie natürlich gern auf!!

Vor allem auch, weil ich ja dabei bin, auch ein neues Layout aufzubauen. Da sollte es dann schon stimmig sein...

Vielen Dank und Liebe Grüsse, kho
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Bilddarstellung unter 2.0

Post by yellowled »

kho wrote:Nun, ich habe es schon so verstanden, dass ich für die Ausrichtung der Bilder eine eigene csh-klasse einrichte, auch wenn es manuellen Aufwand bedeutet, das auch in den vorhandenen Einträgen zu ändern.
Wenn Du ohnehin alle Einträge bearbeiten musst, könntest Du auch einfach für alle Bilder die positionierende Klasse anpassen.
kho wrote:Bei den Bildersammlungen in den Einträgen hat aber erst der "Vorschlaghammer" zum Ziel geführt.
Ja, natürlich. Weil die Bilder noch die alte (falsche) Positionierungsklasse haben.

Diese Bilder mit der Klasse serendipity_image_center bekommen „von Hause aus“ (d.h. vom CSS des Themes oder vom Fallback-CSS von s9y) display: block;, deshalb musst Du in Deiner user.css im Moment !important anwenden.

Wenn Du aber diese Bilder (dann auch durchaus mit der Klasse serendipity_image_center) in ein Container-Element wickelst (z.B. <div class="kho-galerie"></div>), dann brauchst Du das !important für display: inline-block; nicht mehr.

Warum nicht? Weil Du mit der Anweisung .kho-galerie .serendipity_image_center { … } das gleiche erreichst wie mit !important – Du veränderst die CSS-Spezifität, eine Art interne Gewichtung für CSS-Selektoren.

Vereinfacht gesagt: .kho-galerie .serendipity_image_center „ist größer als“ nur .serendipity_image_center. Der Vorteil dabei ist – auch wenn das sehr theoretisch klingen mag, ich hab's schon praktisch erlebt –, dass Du .kho-galerie .serendipity_image_center später im CSS mit z.B. .blafasel .serendipity_image_center überschreiben (d.h. für diesen Fall andere Styles zuweisen) könntest.

Mit !important wird das sehr schwierig, weil !important eine höhere Spezifität als alle anderen Methoden, die Spezifität zu ändern, hat. Es ist quasi der „Joker“, der alles andere in Sachen Spezifität sticht. Und wie im Kartenspiel versucht man eben, den Joker aufzuheben, bis man ihn wirklich braucht.

YL
Post Reply