[WordPress] Caption - Nebeneinander anordnen..

Posted by bursali | Posted in Sourcecodes/Snippets, Text | Posted on 31.08.2010 @ 19:49:17

3

Guten Tag. (:

Wenn man krank ist, dann vertreibt man sich mit sinnlosen Sachen den Tag, damit Er so schnell wie Möglich vergeht, Ich habe heute mal etwas "rumgegoogelt" & gesehen, dass sehr viele Blogger das Problem mit der Caption Funktion von WordPress haben.

Caption-Funktion, was ist das?

Der Begriff Caption heißt übersetzt Beschriftung, in unserem Fall eine Bildbeschriftung.

Mit der Caption-Funktion könnt Ihr Euren eingebundenen Bildern kleine Beschriftungen zuordnen, dies ist zum  Beispiel hilfreich, wenn Ihr das Bild kommentieren wollt. Das Beispiel dazu findet Ihr bei meinem Beitrag, Back at home..

Ok. Ich habe es verstanden, wie realisiert man so etwas?

Dafür gibt es im Internet sehr viele Beispiele, hier werde Ich Euch eine vorstellen. Dieses Beispiel ist am weitesten Verbreitet, deswegen werde Ich Euch auch dieses zeigen.
Die Vorgehensweise ist sehr einfach und selbsterklärend.

  1. Ihr müsst erst einmal gucken, ob in der CSS-Datei (Stylesheet) schon eine Funktion mit dem Namen "wp-caption" definiert ist, falls dies der Fall sein sollte, macht Ihr eine Sicherheitskopie Eurer CSS-Datei. Danach ersetzt Ihr den originalen "wp-caption" Teil mit dem unteren.
    Falls Ihr es nicht in Eurer CSS-Datei definiert haben solltet, könnt Ihr den unteren Code einfach hineinkopieren.


    /* Captions */
    .aligncenter,
    div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
     
    .wp-caption {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 4px;
    margin: 10px;
    -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;
    }
    /* End captions */
  2. Nun nehmt Ihr ein Bild Eurer Wahl & klickt auf die WordPressfunktion um Bilder hinzuzufügen.
    Falls Ihr nicht wisst wo diese Funktion ist, Sie befindet sich neben "Hochladen/Einfügen" im Beitragseditor [].
  3. In dem nun erscheinend Fenster ladet Ihr Euer Bild hoch.
  4. Nachdem Ihr das Bild hinzugefügt habt, werdet Ihr es in Eurem Editor als Vorschau sehen. Nun geht Ihr auf das Bild und klickt das linke Kästchen an [].
  5. Danach erscheint nochmal ein Fenster, in diesem Fenster tragt Ihr unter "Bildbeschreibung bearbeiten" die "Bildbeschriftung" ein [].
  6. Jetzt solltet Ihr das gleiche Ergebnis wie bei meinem oben genannten Beispiel erreicht haben.

Soviel zum Allgemeinen einsetzen von den Captions.

Wo liegt nun das Problem?

Wenn Ihr nun versucht, mehrere Captions nebeneinander zu platzieren, werde Ihr spätestens nach dem zweiten Caption erkennen, dass es gewaltige Darstellungsprobleme gibt.
Ich habe versucht das Problem mit ein paar Anpassungen der CSS-Datei zu lösen, jedoch scheitert es immer an ein paar Ecken.

Aha, ok. Wie hast Du es dann gelöst?

An dem Tag, wo Ich den oben genannten Beitrag verfasst habe, hatte Ich auch keine Lust mehr rumzumachen und habe versucht das Problem per HTML zu lösen. Die Lösung ist sehr einfach - Tabellen.

Wenn man eine Tabelle erstellt, dann werden die Captions nebeneinander dargestellt und das mit sehr wenig Arbeit.
Dafür müsst Ihr aber im HTML-Tab arbeiten, da WordPress die Änderungen im Visuellen Editor ignoriert.

So sieht das Ergebnis bei mir aus:

<table border="0" align="center">
<tbody>
<tr>
<td>
 
[caption id="" align="alignnone" width="132" caption="Flugzeug + tolles Wetter = *-* #1"]<a href="http://www.abload.de/img/dsc00518mmx0.jpg" target="_blank"><img title="Flugzeug + tolles Wetter = *-* #1" src="http://www.abload.de/thumb2/dsc00518mmx0.jpg" alt="" width="132" height="132" /></a>[/caption]</td>
<td><a href="http://www.abload.de/img/dsc005223722.jpg" target="_blank"><img title="Flugzeug + tolles Wetter = *-* #2" src="http://www.abload.de/thumb2/dsc005223722.jpg" alt="" /></a></td>
<td><a href="http://www.abload.de/img/dsc00532b7oi.jpg" target="_blank"><img title="Flugzeug + tolles Wetter = *-* #3" src="http://www.abload.de/thumb2/dsc00532b7oi.jpg" alt="" /></a></td>
</tr>
<tr>
<td><a href="http://www.abload.de/img/dsc_1184qjl7.jpg" target="_blank"><img title="Für 4€ die Stunde. (;" src="http://www.abload.de/thumb2/dsc_1184qjl7.jpg" alt="" /></a></td>
<td><a href="http://www.abload.de/img/dsc_11777kqs.jpg" target="_blank"><img title="*Keine Worte finden kann*" src="http://www.abload.de/thumb2/dsc_11777kqs.jpg" alt="" /></a></td>
<td><a href="http://www.abload.de/img/dsc_11800vmf.jpg" target="_blank"><img title="Gute Nacht. &lt;3 #1" src="http://www.abload.de/thumb2/dsc_11800vmf.jpg" alt="" /></a></td>
</tr>
<tr>
<td><a href="http://www.abload.de/img/dsc00554483l.jpg" target="_blank"><img title="Gute Nacht. &lt;3 #2" src="http://www.abload.de/thumb2/dsc00554483l.jpg" alt="" /></a></td>
<td><a href="http://www.abload.de/img/dsc00546m7ja.jpg" target="_blank"><img title="*-* &lt;3 Karamell heißt die Süße." src="http://www.abload.de/thumb2/dsc00546m7ja.jpg" alt="" /></a></td>
<td><a href="http://www.abload.de/img/dsc00578vj06.jpg" target="_blank"><img title="Bursaspor - Konyaspor Spiel. Der Rauch kommt übrigens von Zigaretten!" src="http://www.abload.de/thumb2/dsc00578vj06.jpg" alt="" /></a></td>
</tr>
<tr>
<td><a href="http://www.abload.de/img/dsc00582djbk.jpg" target="_blank"><img title="Bursaspor - Konyaspor Spiel. #2" src="http://www.abload.de/thumb2/dsc00582djbk.jpg" alt="" /></a></td>
<td><a href="http://www.abload.de/img/dsc00602vvk4.jpg" target="_blank"><img title="Bursaspor &lt;3" src="http://www.abload.de/thumb2/dsc00602vvk4.jpg" alt="" /></a></td>
</tr>
</tbody>
</table>


Somit wäre das Problem gelöst, in man eine Tabelle mit drei Spalten und vier Zeilen erstellt.

Falls Ihr Fragen haben solltet, könnt Ihr gerne das Kontaktformular benutzen.

Mit freundlichen Grüßen,
~bursali


Bildbeschreibung bearbeiten
Tweet this!

Some little..

Posted by bursali | Posted in .Blog News | Posted on 29.08.2010 @ 00:36:51

1

..bugfixes & changes.

*gäähn* Mann bin Ich müde, gestern um 4 aufgestanden, Nachts nicht schlafen können & heute siehts auch nicht viel besser aus.. Ich hasse diese Schlaflosigkeit.

Deswegen hatte Ich viel Zeit. Einen Teil dieser Zeit habe Ich endlich mal wieder in mein Projekt bzw. meine Projekte gesteckt.

  1. Ich habe nun, nach etlichen Wochen vor mir hervorschiebens, den Widescreenbug auf der Enterpage gefixxt. Nun sollte wieder alles ok sein [getestet bis auf 1920x1080]. Die Seite ist aber für die Auflösung 1280x800 bzw. 1280x1024 optimiert. (:
  2. Ich habe einige Projekte entfernt, die Lockerz Invitepage & den Rapidshare Checker. Die Invitepage benötige Ich nicht mehr und das Rapidsharescript muss überarbeitet werden, da Rapidshare wohl Änderungen vorgenommen hat & somit war das Checkergebnis falsch.
  3. Einige andere Unterseiten sind seit gestern auch offline, nur eine davon war teilweise pub, der Rest war nur in Arbeit. Diese Seiten werden in Zukunft vielleicht erscheinen. (:
  4. Ich arbeite gerade an einer Unterseite und an dem Board.
  5. Die Boardarbeiten gehen voran. <3 [=
    • Das Design ist fertiggestellt und angepasst. (Vor dem Urlaub fertiggestellt, eventuelle Änderungen möglich.)
    • Die Foren stehen zum Größtenteil schon, es fehlen noch Beschreibungen & eventuelle Veränderungen.
    • Eine überarbeitete vBulletin Version von mir ist in Bearbeitung, sind eigentlich alles Back-End Arbeiten und somit wird man am Ende nicht sehr viel sehen wenn man die Seite besucht. Was genau alles geändert wird, werde Ich hier (noch) nicht nennen. [Status - ~92%]
    • Alle IP- & Hosttables wurden ausreichend anonymisiert, Plugins & Addons wurden umgeschrieben & anonymisiert, ein eigenes Script zur Überwachung von Doppelaccounts/Fakeaccounts etc. wurde von cyberterrorists.in übernommen und wird überarbeitet. [Status - ~70%]
  6. Am Blog habe Ich noch ein paar Sachen im Kopf, diese haben jedoch Zeit, wie zum Beispiel ein helleres Design. (:

So, dieser kurze Ausschnitt sollte als kleinen Überblick ausreichen. (;
Sobald Ich das Wichtigste erledigt habe, werde Ich das Board einigen Personen zugänglich machen und mich nach Kritik, Vorschlägen etc. umhören. (:

Ansonsten gibt es nicht viel zu sagen, es ist 00:36, Ich habe meine vierte Tasse Espresso in der Hand & überlege mir gerade, was Ich heute Nacht noch machen werde. Da Ich krank bin, bleibt mir keine große Auswahlmöglichkeit..

Ich wünsche Euch einen schönen Abend & einen schönen Sonntag,
~bursali

Tweet this!

Back at home..

Posted by bursali | Posted in .Blog News | Posted on 25.08.2010 @ 19:49:29

12

Huhu. (:

Wie schnell drei Wochen vergehen.. Ich bin wieder daheim und hatte schon am ersten Tag meiner Ankunft viel zu tun, einkaufen, Briefe lesen, Mails beantworten, aufräumen, auspacken, usw.. Bin schon jetzt erschöpft. ._. Daran kann man aber nichts ändern, in ein paar Tagen gehts dann auch mit dem normalen Alltag weiter, auch wenn Ich momentan das Gefühl habe, dass Ich es schwer haben werde mich wieder in meinen normalen Alltag einzuleben, da es immer sehr stressig ist. Ist genau das Gegenteil von Urlaub..

Türkei, uff.
Das waren Ferien. Tägliche Temperaturen über 40 Grad, Nachts nie unter 30 Grad. Ein Mordwetter, Ich habe zwei Wochen gebraucht um mich überhaupt mal daran zu gewöhnen. Wenigstens war Ich eine Woche am Meer. <3 Das hat geholfen & war richtig schön entspannend. (:
Die restliche Zeit habe Ich mit meiner Familie verbracht & war sehr oft daheim oder bei Freunden & dann ins Kino, da man bei der Hitze einfach nicht aus dem Haus kann und wenn man aus dem Haus geht, dann entweder nur eine Fußstrecke von maximal 30 Minuten oder direkt mit dem Auto, Bus oder der Metro, überall wo man eine Klimaanlage hat. Dementsprechend ist auch der Urlaubseinkauf klein ausgefallen, Ich habe mir zwei Jeans, ein paar Tshirts und Pullis gekauft.
Außerdem habe Ich ein Armband für meine Perle anfertigen lassen & mir noch eine gute Ledergeldbörse zugelegt.
Ah! Ich war noch bei dem Bursaspor - Konyaspor Spiel, einfach nur krank. Durfte wieder einmal auf die Texastribüne, sind einfach nur unvergleichlich diese Fans. <3 Typisch Texas.

Viel mehr gibt es eigentlich nicht zu sagen.
Vielleicht noch ein paar Bilder? <3
Sind nicht alle von meiner Kamera, also nicht wundern wenn mal Frauenfingerchen zu sehen sind. =P

Flugzeug + tolles Wetter = *-* #1

Flugzeug + tolles Wetter = *-* #2

Flugzeug + tolles Wetter = *-* #3

Für 4€ die Stunde. (;

*Keine Worte finden kann*

Gute Nacht. <3 #1

Gute Nacht. <3 #2

*-* <3 Karamell heißt die Süße.

Bursaspor - Konyaspor Spiel. Der Rauch kommt übrigens von Zigaretten!

Bursaspor - Konyaspor Spiel. #2

Bursaspor <3



Ich wünsche Euch noch einen schönen Abend!
~bursali

Tweet this!