Bilder mit Bildunterschriften anzeigen [Caption]

Ich hab die aktuelle Wordpress-Version 2.6.2 in deutscher Sprache. Wenn ich Bilder mit Bildunterschriften in meine Blog-Beiträge einfüge, hatte ich das Problem, dass der Text in das Bild hineinragt. Ich habe herausgefunden, dass die Bildunterschrift zu knapp berechnet ist und einfach den Teil im php-Code der media.php unter wp-admin/includes/ verändert, der dafür zuständig ist:[INDENT]$shcode = '[caption id="' . $id . '" align="align' . $align
. '" width="' . [COLOR=Red]($width+20)[/COLOR] . '" caption="[COLOR=Red]<i>[/COLOR]' . $alt . '[COLOR=Red]</i>[/COLOR]"]' . $html . '[/caption]';
[/INDENT]Außerdem habe ich die Bildunterschrift jetzt italic gemacht.

Leider funktioniert das nur, wenn ich den HTML-Editor benutze. Kaum bearbeite ich oder jemand anders den Artikel im Grafik-Modus, ist wieder die alte Version ohne Schrägschrift und vor allem mit 20 Pixeln zu wenig wieder da.

Ich vermute, dass der grafische Editor mit Javascript funktioniert und folgender Code für die Bildunterschriften zuständig ist:[INDENT]

<script type="text/javascript">
//<![CDATA[
var addExtImage = {


    width : '',
    height : '',
    align : 'alignnone',


    insert : function() {
        var t = this, html, f = document.forms[0], cls, title = '', alt = '', caption = null;


        if ( '' == f.src.value || '' == t.width ) return false;


        if ( f.title.value ) {
            title = f.title.value.replace(/['"<>]+/g, '');
            title = ' title="'+title+'"';
        }


        if ( f.alt.value ) {
            alt = f.alt.value.replace(/['"<>]+/g, '');
<?php if ( ! apply_filters( 'disable_captions', '' ) ) { ?>
            caption = f.alt.value.replace(/'/g, ''').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
<?php } ?>
        }


        cls = caption ? '' : ' class="'+t.align+'"';


        html = '<img alt="'+alt+'" src="'+f.src.value+'"'+title+cls+' width="'+t.width+'" height="'+t.height+'" />';


        if ( f.url.value )
            html = '<a href="'+f.url.value+'">'+html+'</a>';


        if ( caption )
            html = '[caption id="" align="'+t.align+'" width="'+t.width+'" caption="'+caption+'"]'+html+'[/caption]';


        var win = window.dialogArguments || opener || parent || top;
        win.send_to_editor(html);
    },

[/INDENT]Aber was muss ich da machen, um meine 20 Pixel hinzuzufügen und die Schrift in italic zu haben? Javascript kann ich gar nicht. Oder brauch ich sowieso eine ganz andere Stelle?? :confused:

Ratlose Grüße
Petra

Aber klar doch, hier ist so ein Artikel:
AllesUeberKoeln.de » Blog Archiv » Testartikel

Oben wurde das Bild mit dem grafischen Editor hochgeladen und der Text ragt ins Bild, unten mit dem HTML-Editor - da ist der Abstand schön und die Schrift kursiv.

Über das style.css würde ich das natürlich lieber lösen, aber ich habe nicht herausgefunden wie. Ich pfusche aber bei allen meinen Blogs in den Skripten herum, also wäre das hier auch nicht gar so schlimm. :)

Leider klappt es nicht ganz. Die kursive Schrift funktioniert schonmal.

Dass die Bilder _kein_ Margin bekommen, habe ich direkt bei den Bildern verändert:

#content img {
border: 1px solid #cccccc;
padding: 4px;
max-width: 100%;
display: inline;}

#archiv img {
border: 1px solid #cccccc;
padding: 4px;
max-width: 100%;
display: inline;}

Dort war vorher der Margin angegeben und der hat den Text in die Bilder ragen lassen (warum eigentlich??).

Aber die beiden align-Zeilen nützen leider gar nix. Zwischen Bild bzw. Bildrahmen und Text gibt es keinen Abstand.

Trotzdem schonmal vielen Dank für die Lösungen. :-)

Juhuu, das wars! Danke! :-D:-D