Tipps und Tricks zur Webentwicklung und Alltagsthemen

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 Beitrag weiterempfehlen:

  • del.icio.us
  • Facebook
  • Twitter
  • Google Bookmarks
  • Yigg
  • LinkArena
  • MisterWong.DE
  • Alltagz
  • SEOigg
  • Webnews.de
  • Favoriten.de
  • Technorati
  • Digg
  • Netvibes
  • Linkarchiv

Weitere beliebte Artikel

Artikel Daten

Veröffentlicht:
Montag, 20. Oktober 2008
Statistik:
Gelesen: 2393 · heute: 4 · zuletzt: 1. September 2010
Trackback:
Trackback-URL
Kommentar:
Du kannst hier einen Kommentar hinterlassen.
RSS-Feed 2.0:
Kommentar-Feed zum Artikel

Abonniere unsere neuesten Beitrage

hier folgt der feedbirner code

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.

XING - Stefan Brandt
no-nofollow blogoscoop Bewerte meinen Blog auf dem Blog-Verzeichnis bloggerei.de BlogPingR.de - Blog Ping-Dienst, Blogmonitor Web Development & Design Blogs - Blog Top Sites TopBlogs.de BlogTotal.de