Tipps & Tricks, Alltagsthemen und Webentwicklung

Bilder Darstellung beim Einfügen über die WordPress Mediathek

Ich habe da einen kleinen Tipp zum Einfügen von Bildern über die WordPress Mediathek und die dabei zum Teil falsche Darstellung der Bilder im Artikel.

Problemstellung

Im WordPress Editor werden die Bilder nach dem Einfügen über die Mediathek noch sehr gut dargestellt. Ausrichtung, Bild-Unterschrift, alles stimmt. Wenn du nun aber zur Artikelvorschau wechselst, dann steht das Bild über dem Text und der Text umfließt nicht das Bild, so wie es im Editor dargestellt wurde.

Problemlösung

Die Lösung liegt fast auf der Hand, es fehlen bestimmte Stylesheet in der style.css deines WordPress Themes. Unter CSS « WordPress Codex findest du die entsprechenden Styles die seit Einführung der Mediathek notwendig sind um die Bilder entsprechend darzustellen. Du findest dort welche CSS für WP 2.6 Bilder verwendet werden müssen. Ergänze die style.css Datei deines Theme mit den dort gezeigtem Code.

Sylesheet Code

.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.alignleft {
   float: left;
}

.alignright {
   float: right;
}

.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}

.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}

Diesen Artikel weiterempfehlen:

Dieser Beitrag wurde veröffentlicht am Montag, 20. Oktober 2008 unter der Kategorie: WordPress. Hat Dir dieser Beitrag gefallen? Dann abonniere doch neue Beiträge per RSS Feed oder E-Mail, so wirst Du bequem über Neuigkeiten auf meinem Blog informiert.

Du kannst neue Kommentare zum Artikel per RSS 2.0 Kommentar-Feed abonieren, gerne auch einen eigenen Kommentar oder einen Trackback von Deiner eigenen Seite hinterlassen.
Du kannst auch mit Hilfe einer der Social Bookmarking Buttons diesen Beitrag mit anderen teilen.

Statistik: read: 3964 · today: 9 · last: 8. Februar 2012

3 Kommentare (Hinterlasse einen Kommentar »)

  1. David

    Bleibt nur das Problem das nach dem Bilder immer noch “gefloatet” wird. Wie mach ich das floating dann wieder weg? n zeilenumbruch mit style clear:both? oder ist das dreckig?

  2. Stefan Brandt (Autor)

    Hi David,
    wenn ich ein Bild mitten im Text plaziere will und es beim Einfügen über die Mediathek mit der Ausrichtung “Center” versehe, wird es bei mir nicht “gefloatet”.

  3. andre

    WOW! Ich danke Dir für die Erlösung. das war ganz genau mein Problem und nun schaut bei mit endlich alles super aus. War schon total genervt, dass ich im HTML-Code der Beiträge immer editieren musste, damit alles halbwegs gut ausschaut.

    VG,
    Andre

Schreibe einen Kommentar

Bitte benutzt nur eure Namen oder Nicknamen. Einträge mit Keywords oder offensichtliche Werbelinks werden als Spam markiert und gelöscht. Solltet ihr euren Kommentar nicht sofort sehen, so ist er wohl in der Spam-Sandbox gelandet. Ich werde ihn dann schnellst möglich bearbeiten.

no-nofollow Bewerte meinen Blog auf dem Blog-Verzeichnis bloggerei.de Web Development & Design Blogs - Blog Top Sites