Bildunterschriften OHNE ImageCaptions, im Editor SICHTBAR, KEIN JS!

faglork · 28. November 2011 13:41

Moin!

Mich hat das Plugin imagecaptions schon lange genervt, weil es
- Javascript benötigt
- den JS code direkt in den head schreibt
- im Editor nicht sichtbar ist, was bei mehreren Bildern pro Seite extrem nervt

Die Lösung dafür ist so einfach, dass ich mich frage warum mir das nicht gleich eingefallen ist ;-)

Dazu muss nur der TinyMCE etwas ergänzt werden:

Im Reiter "Weitere Optionen"

1) unter "Benutzerdefiniertes Listenfeld folgendes ein-/ oder anfügen:

Hier klicken, um den Code zum Kopieren zu markieren

---|---
Bildunterschrift rechts |<div class="captionborderright">|<p class="captiontext">Text hier einfügen</p></div>
---|---
Bildunterschrift links |<div class="captionborderleft">|<p class="captiontext">Text hier einfügen</p></div>

2) unter "Das Stylesheet ergänzen mit:" folgendes ein-/ oder anfügen:

Hier klicken, um den Code zum Kopieren zu markieren

div.captionborder, div.captionborderleft,div.captionborderright {
border: 1px solid #cccccc;
padding: 3px;
background-color: #ffffff;
}

div.captionborderright {
float: right;
margin-left: 1em;
}

div.captionborderleft {
float: left;
margin-right: 1em;
}

p.captiontext {
margin: 0;
padding: 0;
font-size: 90%;
background-color: #F1EFE3;
color: #000;
text-align: center;
}

Das gleiche CSS-Schnipsel auch in die Standard-CSS der Website einfügen. Wer vorher bereits ImageCaptions installiert hatte, muss nichts ändern bzw. sollte halt den Eintag im TinyMCE so wie im Standard-CSS gestalten.

Wie funktionierts?

- Bild einfügen, keine Positionierung vornehmen
- Bild anklicken/markieren, dann den Button "Benutzerdefiniertes Listenfeld-Menü" anklicken und "Bildunterschrift rechts" oder "Bildunterschrift links" auswählen.
- anschließend "Text hier einfügen" durch gewünschte Unterschrift ersetzen

Die Styles kann man natürlich gestalten wie man will ...

EDIT: Ändern

Geht eigentlich ganz einfach. Dazu sind zwei weitere kleine Modifikationen nötig:

1. Das Plugin attribs in die Profile des TinyMCE einfügen (falls nicht schon vorhanden)

2. Die CSS-Stile des TinyMCE ergänzen um
BildUnterschriftLinks=captionborderleft;BildUnterschriftRechts=captionborderright;

Danach geht das Ändern einfach: Das DIV erhält ja in den zusätzlichen Editor-Styles (siehe oben) ein padding und eine border. Man klickt in den Zwischenraum zwischen Bild und DIV-Border - der Cursor blinkt dann rechts neben dem Bild. Dann klickt man auf "Attribute einfügen oder editieren" (das erwähnte attribs) und wählt als CSS-Klasse captionborderleft oder captionborderright. Auf "Einfügen" klicken, fertsch ...

ANMERKUNG

Die beschriebene Methode ist absichtlich kompatibel gehalten zu dem Plugin "ImageCaptions", damit eine bestehende Installation problemlos umgestellt werden kann.

Wenn man eine NEUE Installation damit ausrüsten will, empfiehlt es sich, "sprechende Namen" für die Klassen zu vergeben, also statt "captionborderleft" etwa "bildunterschriftlinks". Dann ist eine Änderung des Attributs auch für Laien einfach nachzuvollziehen.

EDIT: Löschen

Wenn man wie oben beschrieben ein DIV mit Bild und Caption eingefügt hat und dieses wieder löschen will, bleibt nach Löschen von Text und Bildunterschrift ein leeres DIV (sichtbar als kleines Rechteck) zurück, welches man nicht markieren kann und daher auch nicht löschen.

Lösung

Man kann das DIV zwar nicht markieren, aber man kann in das DIV klicken. Dann die BACKSPACE Taste drücken - weg ist das DIV ...

Viel Spaß,
Alex

Beitrag geändert von faglork (01. Februar 2012 13:37)

hibr · 02. Januar 2012 19:52

Super Idee. Das verstehen sogar unerfahrene Redakteure: Erst Bild anklicken und dann den passenden Menübefehl auswählen. Voilà.

Zum Editieren: Wenn man das Bild so markiert, dass man am Textende der Bildunterschrift mit dem Markieren beginnt und bis hoch in das Bild zieht (quasi von hinten nach vorne), kann das Bild und die Unterschrift ganz leicht und genau markiert werden und so lässt sich das Bild inkl. Unterschrift an eine andere Stelle schieben. Größenänderungen sind sowieso kein Problem.

Einziges Manko: Wenn man ein Bild am Textende einfügt kann kein Text nach bzw. neben dem Bild platzieren werden, ohne den HTML-Code zu editieren. Das werden IMHO unerfahrene Redakteure nicht verstehen.

Wenn man aber hinter deinem DIV-Codeschnipsel ein <br /> anhängt, ist auch dieses kleine Problem umschifft, z.B.

Hier klicken, um den Code zum Kopieren zu markieren

---|--- 
Bildunterschrift rechts |<div class="captionborderright">|<p class="captiontext">Text hier einfügen</p></div><br />
Bildunterschrift links |<div class="captionborderleft">|<p class="captiontext">Text hier einfügen</p></div><br />
---|---

Ich bleibe dabei: Deine Idee ist super!

Gruß Hani

Beitrag geändert von hibr (03. Januar 2012 02:20)

nockenfell · 02. Januar 2012 20:26

Danke für den wertvollen Tipp Hani.

hibr · 03. Januar 2012 02:09

Versuche gerade auch eine zusätzliche Variante ohne floaten, also Setzen des Bildes zwischen zwei Absätzen. Ist aber nicht so leicht wie ich dachte. Mit CSS allein geht es glaube ich nicht.

Mit einer Tabellezelle geht es aber. Ist zwar nicht besonders elegant und sauber, aber mir fällt nichts besseres ein. Leider muss man auch manuell einen Zeilenumbruch nach der Bildunterschrift löschen. Nicht besonders schön.

Habt ihr ne bessere Idee?

Benutzerdefiniertes Listenfeld:

Hier klicken, um den Code zum Kopieren zu markieren

---|---
Bildunterschrift (ohne Umfließen)| <table class="captionborder"><tr><td>|<p class="captiontext">Text hier einfügen</p><td><tr></table><br />
Bildunterschrift rechts |<div class="captionborderright">|<p class="captiontext">Text hier einfügen</p></div><br />
Bildunterschrift links |<div class="captionborderleft">|<p class="captiontext">Text hier einfügen</p></div><br />
---|---

Das Stylesheet ergänzen mit:

Hier klicken, um den Code zum Kopieren zu markieren

table.captionborder {
border-collapse : collapse;
}

table.captionborder tr td{
border: 1px solid #cccccc;
padding: 3px;
background-color: #ffffff;
}

div.captionborderleft,div.captionborderright {
border: 1px solid #cccccc;
padding: 3px;
background-color: #ffffff;
}

div.captionborderright {
float: right;
margin-left: 1em;
}

div.captionborderleft {
float: left;
margin-right: 1em;
}

p.captiontext {
margin: 0;
padding: 0;
font-size: 90%;
background-color: #333333;
color: white;
text-align: center;
}

Gruß Hani

Beitrag geändert von hibr (03. Januar 2012 02:16)

nockenfell · 03. Januar 2012 06:52

Mir ist im Moment rätselhaft warum der Zeilenumbruch überhaupt entsteht. Wenn man den Quelltext vor und nach dem löschen des Zeilenumbruchs vergleicht, unterscheidet sich zumindest für mich nichts (Quelltext mit WYSIWYG aktivieren/deaktivieren angeschaut)

Ansonsten ist die Idee mit der Tabelle wohl die beste.

hibr · 04. Januar 2012 23:33

Seit einiger Zeit fügt der TinyMCE nach einer Tabelle INTERN automatisch eine neue Zeile ein, damit man weitere Inhalte nach einer Tabelle eingeben kann. Es erscheint aber im HTML-Code des Editors kein <br />, wohl aber im fertigen Code der Seite. Allerdings NACH dem </table> Tag. Der kann nicht Ursache für die Leerzeile in der Bildunterschrift sein.

Ich verstehe es auch nicht, wie die Leerzeile in der Ausgabe des Editors und im Frontend zustande kommt. Gebe ich den Code (aus dem Frontend) der Tabelle inkl. CSS in einen HTML-Editor ein und schaue mir die Tabelle in Browser an, ist alles in Butter.

Beitrag geändert von hibr (04. Januar 2012 23:50)

faglork · 12. Januar 2012 15:42

hibr schrieb:

Versuche gerade auch eine zusätzliche Variante ohne floaten, also Setzen des Bildes zwischen zwei Absätzen. Ist aber nicht so leicht wie ich dachte. Mit CSS allein geht es glaube ich nicht.

Verstehe ich jetzt nicht. "Setzen des Bildes zwischen zwei Absätzen"?

Also so:

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

-----------------
| |
| |
| |
| |
-----------------

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Ist es das?

habe es nicht getestet, aber warum geht ein DIV mit 100% width und text-align: left nicht?

BTW: Danke für den Tip mit dem <br />!

Servus,
Alex

hibr · 15. Januar 2012 01:42

Ja, Alex, das meine ich.

Man kann leider DIV Containern nicht an ein Kind-Element anpassen lassen. Ich habe viel probiert und gelesen und keine Möglichkeit gefunden, die funktioniert, außer der Tabellenworkaround.

Dein Vorschlag und viele meiner Versuche enden nur damit, dass das Bild zwar linksbündig ausgerichtet wird, der Rahmen inkl. Text aber über die volle Breite des Elternobjekts geht.

Gruß Hani

Beitrag geändert von hibr (15. Januar 2012 01:47)

faglork · 16. Januar 2012 20:39

hibr schrieb:

http://www.cmsmadesimple.de/forum/img/members/126/mini_tinymce_imagecaption.png

Aaaah ... jetzt weiss ich was du meinst.

Wie wärs mit nem normalen

float:left;
clear:both

...?

Servus,
Alex

hibr · 17. Januar 2012 01:58

Ich Depp. Ich hatte natürlich auch zuerst an "clear: both;" gedacht, es aber sofort wieder verworfen, da es ja dem nachfolgenden Tag zugeordnet werden muss. Das fand ich damals aber für unerfahrene Redakteure für viel zu abstrakt, z.B. dem nachfolgenden P-Tag manuell eine Klasse zuzuordnen, die "clear: both;" enthält.

Jetzt - nach deinem Posting - habe ich nochmal nachgedacht und mir an den Kopf gefasst. Man kann in dem Code-Schnipsel des "Benutzerdefiniertem Listenfelds" nach dem DIV-Container ein P-Tag mit "clear: both" anhängen (ein br-Tag mit "clear: both" funktioniert leider nicht, weil es immer von einem p-Tag umschlossen wird, egal was in "Neue Zeilen erstellen mit" oder "Absatz erzwingen" eingestellt ist. Komisch. Habe TinyMCE 2.9.4).

Macht aber nichts. Nachfolgend eingegebener Text wird schöner weise von diesem p-Tag umschlossen. Es wird also vor dem eingegeben Text kein leerer Absatz erzeugt.

NEU: Man kann in dem Code-Schnipsel des "Benutzerdefiniertem Listenfelds" das <div> mit dem Bild und der Unterschrift in ein weiteres <div> setzen, welches zuerst als inline-block dargestellt wird und nachfolgend mittels Pseudo-Element ":after" dann das floaten beendet wird und einige weitere Anpassungen vorgenommen werden, z.B. "display" wieder auf "block" setzen, etc. (s. http://www.ecommy.com/web-development/c … -opera-fix) Damit umgeht man einige Probleme mit clear:both (s.w.u). Ein <br /> am Ende sorgt dafür, dass man nach dem Einfügen der Unterschrift einfacher Fließtext unter das Bild setzen kann. Wenn man ein Bild mit Unterschrift zwischen zwei bestehende Absätze setzt, entsteht durch das br eine Leerzeile, die man dann manuell löschen kann.

Für die Copy&Paste-Fraktion: Die Komplettlösung inkl. Änderung kann so aussehen:

Benutzerdefiniertes Listenfeld:

Hier klicken, um den Code zum Kopieren zu markieren

---|---
Bild mit Unterschrift (ohne Umfließen)|<div class="clearfloat"><div class="captionborder">|<p class="captiontext">Text hier einfügen</p></div></div><br />
Bild mit Unterschrift rechts|<div class="captionborderright">|<p class="captiontext">Text hier einfügen</p></div><br />
Bild mit Unterschrift links |<div class="captionborderleft">|<p class="captiontext">Text hier einfügen</p></div><br />
---|---

Für das Screen und Druck-Stylesheet und für die "Das Stylesheet ergänzen mit:"

Hier klicken, um den Code zum Kopieren zu markieren

.clearfloat {
display: inline-block;
}

.clearfloat:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
line-height: 0px;
height: 0px;
}

div.captionborder {
float: left;
}

div.captionborderleft,div.captionborderright, div.captionborder {
border: 1px solid #cccccc;
padding: 3px;
background-color: #ffffff;
margin-bottom: 1 em;
}

div.captionborderright {
float: right;
margin-left: 1em;
}

div.captionborderleft {
float: left;
margin-right: 1em;
}

p.captiontext {
margin: 0;
padding: 0;
font-size: 90%;
background-color: #333333;
color: white;
text-align: center;
}

Danke Alex für den Gedankenanstoß.

Ich finde die Lösung von Alex so gut und auch für andere so interessant, dass man sie fixieren sollte. Was meinen die Moderatoren?

Gruß Hani

Änderung vom 21.02.2012

Um einige Probleme bei meiner ersten Umsetzung eines Bildes mit Unterschrift ohne Umfließen mittel "clear:both;" zu umgehen, wie:

Sporadisch, nicht immer reproduzierbare auftretende Leerräume vor dem "clear: both;" Element
Schwierigkeiten beim nachträglichen Einfügen von Bildern mit Unterschrift zwischen zwei bestehenden Absätzen (Der bestehende nachfolgender Absatz musste manuell in den clear:both-p-Tag verschoben werden, um das Umfließen zu verhindern)

habe ich die Tipps aus dem Blog http://www.ecommy.com/web-development/c … -opera-fix umgesetzt und in den obigen Code integriert.

Damit konnte ich alle oben beschriebenen Probleme beseitigen. Getestet habe ich es auf aktuellen Versionen von FF, IE, Chrome, Safari (PC), Opera. Der im Blog beschriebene Opera-Hack scheint zumindest in der aktuellen Version von Opera nicht mehr nötig zu sein.

Beitrag geändert von hibr (23. Februar 2012 23:25)

nockenfell · 17. Januar 2012 05:46

Thema ist fixiert. Danke für eurer dranbleiben und die gute Lösung.

faglork · 01. Februar 2012 13:05

Ich hab ne Lösung für die Löschung des DIV.

Die Problematik:

Wenn man wie oben beschrieben ein DIV mit Bild und Caption eingefügt hat und dieses wieder löschen will, bleibt nach Löschen von Text und Bildunterschrift ein leeres DIV (sichtbar als kleines Rechteck) zurück, welches man nicht markieren kann und daher auch nicht löschen.

Lösung

Man kann das DIV zwar nicht markieren, aber man kann in das DIV klicken. Dann die BACKSPACE Taste drücken - weg ist das DIV ...

Ich ergänze das mal oben.

Servus,
Alex

Beitrag geändert von faglork (01. Februar 2012 13:12)

nockenfell · 06. Februar 2012 22:47

Dieser Artikel hier könnte auch noch interessant sein:
http://t3n.de/news/bilder-bildunterschr … l5-364185/

Probiere ich nächstens mal auf meiner eigenen Seite aus.

nicmare · 07. Februar 2012 23:11

habe ich heute auch gelesen. aber letzendlich ist in der anwendung für den editor ja nix anderes als diverse div-konstrukte. also wo ist der vorteil außer semantik die in 5 jahren vielleicht erst standard ist?

faglork · 07. Februar 2012 11:23

nicmare schrieb:

habe ich heute auch gelesen. aber letzendlich ist in der anwendung für den editor ja nix anderes als diverse div-konstrukte. also wo ist der vorteil außer semantik die in 5 jahren vielleicht erst standard ist?

Naja. Wenn du *heute* ne HTML5-Seite baust, warum dann nicht gleich die passenden Konstrukte?
5 Jahre sind ne kurze Zeit ... und manchmal geht es einfach schneller als gedacht. Grad im Smartphone-Bereich (Stichwort Web-App).

Ich habe vor 8 Jahren Seiten gebaut, die laufen heute auf nem Smartphone immer noch problemlos, und damals haben mich auch alle gefragt wieso ich so penibel auf Standards und Standardkonstrukte achte. Grad bei kommunalen Seiten zb. da ist kein Geld da um die Seiten alle 5 Jahre komplett umzugestalten. Da ist es halt besser, vorausschauend zu arbeiten.

Servus,
Alex

nockenfell · 07. Februar 2012 11:51

Meine Seite läuft mit HTML 5. Schlussendlich braucht es immer ein Konstrukt mit irgend welchen <divs>. Wenn es dafür eine gute Möglichkeit gibt, dann sollte diese auch getestet werden.

Forum für CMS/made simple

#1 28. November 2011 13:41

Bildunterschriften OHNE ImageCaptions, im Editor SICHTBAR, KEIN JS!

#2 02. Januar 2012 19:52

Re: Bildunterschriften OHNE ImageCaptions, im Editor SICHTBAR, KEIN JS!

#3 02. Januar 2012 20:26

Re: Bildunterschriften OHNE ImageCaptions, im Editor SICHTBAR, KEIN JS!

#4 03. Januar 2012 02:09

Re: Bildunterschriften OHNE ImageCaptions, im Editor SICHTBAR, KEIN JS!

#5 03. Januar 2012 06:52

Re: Bildunterschriften OHNE ImageCaptions, im Editor SICHTBAR, KEIN JS!

#6 04. Januar 2012 23:33

Re: Bildunterschriften OHNE ImageCaptions, im Editor SICHTBAR, KEIN JS!

#7 12. Januar 2012 15:42

Re: Bildunterschriften OHNE ImageCaptions, im Editor SICHTBAR, KEIN JS!

#8 15. Januar 2012 01:42

Re: Bildunterschriften OHNE ImageCaptions, im Editor SICHTBAR, KEIN JS!

#9 16. Januar 2012 20:39

Re: Bildunterschriften OHNE ImageCaptions, im Editor SICHTBAR, KEIN JS!

#10 17. Januar 2012 01:58

Re: Bildunterschriften OHNE ImageCaptions, im Editor SICHTBAR, KEIN JS!

#11 17. Januar 2012 05:46

Re: Bildunterschriften OHNE ImageCaptions, im Editor SICHTBAR, KEIN JS!

#12 01. Februar 2012 13:05

Re: Bildunterschriften OHNE ImageCaptions, im Editor SICHTBAR, KEIN JS!

#13 06. Februar 2012 22:47

Re: Bildunterschriften OHNE ImageCaptions, im Editor SICHTBAR, KEIN JS!

#14 07. Februar 2012 23:11

Re: Bildunterschriften OHNE ImageCaptions, im Editor SICHTBAR, KEIN JS!

#15 07. Februar 2012 11:23

Re: Bildunterschriften OHNE ImageCaptions, im Editor SICHTBAR, KEIN JS!

#16 07. Februar 2012 11:51

Re: Bildunterschriften OHNE ImageCaptions, im Editor SICHTBAR, KEIN JS!

Fußzeile des Forums