Bulletproof - Kommentare im Eintragskopf anzeigen

[fwe77]

Hallo zusammen,

hat jemand eine Idee wie ich dem Bulletproof Template beibringen kann, die Kommentare vom Eintragsfuß in den Kopfbereich zu verlagern? Als Beispiel fällt mir spontan die Portierung WP_Premium ein, dort werden die Kommentare rechts neben der Überschrift dargestellt. Dies hätte ich nun auch gern für Bulletproof.

s9y Version: 1.4
Bulletproof Version: 1.4

Gruß. Frank.

[yellowled]

hat jemand eine Idee wie ich dem Bulletproof Template beibringen kann, die Kommentare vom Eintragsfuß in den Kopfbereich zu verlagern?

Hm, nur die Kommentare? Das ist nicht gerade trivial.

Du wirst die entries.tpl hacken und zusätzliche Styles für diese Kommentaranzeige einbinden müssen. Letzteres ginge updatesicher über die user.css oder ein eigenes Colorset, ersteres nicht, d.h. Du müsstest vor jedem Update von s9y und/oder BP Deine entries.tpl sichern und anschließend die Änderungen wieder in die aktualisierte entries.tpl von BP einpflegen.

Wenn Dir das die Mühe wert wäre, dann erzähl mal, wie Du Dir das optisch genau vorstellt hattest. Soll da nur die Zahl der Kommentare stehen oder auch "Kommentare", soll es rechts oder links vom Eintrag stehen, wie benutzt Du den Eintragsfuß ansonsten (unter dem Titel, geteilt, unter dem Eintrag)?

YL

[fwe77]

Vielen Dank für das schnelle und ausführliche Feedback.

Ich habe die entries.tpl bereits an einigen Punkten angepasst - somit wäre es nur eine weitere Änderung bei einem Update.

Wenn Dir das die Mühe wert wäre, dann erzähl mal, wie Du Dir das optisch genau vorstellt hattest. Soll da nur die Zahl der Kommentare stehen oder auch "Kommentare", soll es rechts oder links vom Eintrag stehen, wie benutzt Du den Eintragsfuß ansonsten (unter dem Titel, geteilt, unter dem Eintrag)?

Also, ich habe eine Grafik (Sprechblase) gebastelt und darin sollten dann die entsprechende Zahl an Kommentaren stehen. Aber ich denke Bilder sagen manchmal mehr als Worte - klick! Alternativ könntest Du auch einen Blick auf meinen Blog werfen!

Gruß. Frank.

[yellowled]

Also, ich habe eine Grafik (Sprechblase) gebastelt und darin sollten dann die entsprechende Zahl an Kommentaren stehen. Aber ich denke Bilder sagen manchmal mehr als Worte

Geht so Aber gut, damit kann man anfangen.

Vor allem ist mir gerade selbst aufgefallen, dass ich gestern vollkommen umsonst schon mal angedacht habe, wo man überall die doppelte Kommentaranzeige aus dem Code nehmen muss - muss man gar nicht, man schaltet einfach in den theme options von BP die Anzeige der Kommentare im Eintragsfuß ab, fertig.

Das haben wir gut gemacht in BP.

Zunächst mal willst Du Dir die Zahl der Kommentare "extrahieren". Das ist sehr, sehr simpel:

Code: Select all

<div class="no-of-comments">{$entry.comments}</div>

(Die class kann man latürnich auch anders nennen. Wichtig ist nur, dass dieses div [welches ebensogut ein span oder p sein könnte, ganz nach Laune] eine class zugewiesen bekommt. Keine id.)

Aber das gibt uns nur die Zahl - man will ja aber, dass das Ganze verlinkt wird:

Code: Select all

<div class="no-of-comments">
    <a href="{$entry.link}#comments">{$entry.comments}</a>
</div>

Schon schön. Aber was ist, wenn man mal einen Artikel mit deaktivierten Kommentaren posten will? Dann soll da ja nix stehen. Geht auch:

Code: Select all

{if $entry.has_comments}
<div class="no-of-comments">
    <a href="{$entry.link}#comments">{$entry.comments}</a>
</div>
{/if}

(Kommentare, die sich in Popup-Fenstern öffnen, spare ich mir - das benutzt ohnehin kein Mensch mehr.)

So. Und wohin nun damit? Vor den eigentlichen Eintragstext (in der entries.tpl von BP in Zeile, Momentchen, 135), nämlich so:

Code: Select all

<div class="entry-content serendipity_entry_body">
    {if $entry.has_comments}
    <div class="no-of-comments">
        <a href="{$entry.link}#comments">{$entry.comments}</a>
    </div>
    {/if}
    {$entry.body}
    [...]

Nun müssen wir natürlich den ganzen Kladderadatsch noch nach rechts rüberzurren. Wo man das im CSS genau macht, hängt ein wenig davon ab, wie man sein BP sonst so umgebaut hat. Hat man ein eigenes Colorset angelegt, gehört es in die $COLORSET_style.css. Wenn nicht, ist es am besten in der user.css aufgehoben, die man ggf. noch anlegen und aktivieren müsste, wenn man bislang keine benutzt hat. In beiden Fällen ist übrigens das CSS (aber nur das CSS!) updatesicher verpackt.

Das oben erzeugte div muss auf die Seite gefloated werden, wo es stehen soll, in Deinem Fall nach rechts:

Code: Select all

.no-of-comments {
    background: url('{TEMPLATE_PATH}img/$BILD} top left no-repeat;
    float: right; /* oder eben left, wenn die Box links stehen soll */
    height: $HÖHE_IN_PX;
    margin: 0 0 5px 5px; /* bzw. 0 5px 5px 0 wenn die Box links steht */
    width: $BREITE_IN_PX;
}

margin muss ggf. angepasst werden, da muss jeder für sich die besten Werte finden. Evtl. möchte man hier lieber Werte in em oder %, kommt ein wenig auf das Drumherum an.

$BILD ersetzt Du durch den Namen der Bilddatei, welche Du nach /templates/bulletproof/img/ kopiert hast, also beispielsweise sprechblase.png oder so. Auch die ist vor Updates sicher.

$HÖHE_IN_PX und $BREITE_IN_PX gibt die Dimensionen der div-Box an - Breite sollte bei gefloateten Elemente idealerweise immer angegeben werden, Höhe macht hier durchaus auch Sinn. Beides würde ich den Dimensionen des Hintergrundbildes anpassen.

Gehen wir mal davon aus, dass Du eine Datei sprechblase.png hast, die 40x40 Pixel groß ist, dann sieht das so aus:

Code: Select all

.no-of-comments {
    background: url('{TEMPLATE_PATH}img/sprechblase.png} top left no-repeat;
    float: right;
    height: 40px;
    margin: 0 0 5px 5px;
    width: 40px;
}

Nun könnte es noch sein, dass man eigentlichen Link"text" (also die Zahl der Kommentare) formatieren will, das ginge dann über:

Code: Select all

.no-of-comments a {
    color: #f00;
    font-size: 1.25em;
    text-decoration: none;
}

Oder wie auch immer es zum Template passt - natürlich kann man auch noch die Pseudoklassen für links (a:hover, a:visited etc. pp.) ausgestalten bzw. sollte man eigentlich auch - wobei es bei solchen Links, die grafisch unterlegt werden, oft eher störend ist. Aber ansonsten wendet BP hier halt die Standardformatierungen für Links an, das kann ins Auge gehen. Möglich, dass hier das eine oder andere !important nötig wird, um Formatierungen zu überschreiben.

Puh.

Nun zum Haken: Das Ganze ist ungetestet, sprich: Ich habe es nicht praktisch ausprobiert, schon gar nicht cross-browser. Das darfst Du machen Es könnte zudem sein, dass dieser Code Probleme macht, wenn im Eintragstext ebenfalls gefloatete Bilder etc. pp. stehen, schwer abzuschätzen. Aber im Groben und Ganzen müsste es so gehen.

YL

[fwe77]

Ähm ... zugegeben ich bin ein wenig sprachlos über diese sehr ausführliche Anleitung. Vielen vielen Dank Matthias.

Ich werde mich allerdings erst im neuen Jahr darum kümmern können, aber sobald ich damit fertig bin, gibt es hier ein entsprechendes Feedback.

Guten Rutsch!

Gruß. Frank.

[yellowled]

Ähm ... zugegeben ich bin ein wenig sprachlos über diese sehr ausführliche Anleitung. Vielen vielen Dank Matthias.

Da nich für

Mir fällt gerade noch auf, dass da noch ein kleiner Fehler drin steckt: Das Ganze soll ja nicht mitten in den Eintrag hinein, sondern neben den Titel des Eintrags! (Man schiebe es darauf, dass ich erst beim ersten Kaffee war, als ich den letzten Post schrieb.)

Also muss der Code an eine andere Stelle der entries.tpl. Mal sehen. Ah, viel weiter oben, nach Zeile 15, welche den Eintragstitel ausgibt:

Code: Select all

<h4 class="entry-title serendipity_title"><a href="{$entry.link}" rel="bookmark">{$entry.title}</a></h4>
{if $entry.has_comments}<div class="no-of-comments"><a href="{$entry.link}#comments">{$entry.comments}</a></div>{/if}

CSS bleibt, wie es war, wird aber ergänzt um:

Code: Select all

.serendipity_entry { clear: both; }

Alles andere sehen wir dann nächstes Jahr

YL

[fwe77]

Hallo Matthias,

ich wollte nur kurz vermelden, das alles bestens funktioniert hat. Testen konnte ich es bis jetzt nur im FF3, IE6 und Opera 9.5. Aber dort passt alles.

Also nochmal vielen Dank für die ausführliche Anleitung.

Gruß. Frank.