Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 28. November 2011 13:41

faglork
CMS/ms-Profi
Ort: Fränkische Schweiz
Registriert: 15. Dezember 2010
Beiträge: 1.151
Webseite

Bildunterschriften OHNE ImageCaptions, im Editor SICHTBAR, KEIN JS!

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:

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

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)

Offline

#2 02. Januar 2012 19:52

hibr
probiert CMS/ms aus
Registriert: 05. Januar 2011
Beiträge: 29

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

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.

---|--- 
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)


Hanis Sammelsurium - How-To's · Erfahrungs- und Meinungsberichte

Offline

#3 02. Januar 2012 20:26

nockenfell
Moderator
Ort: Lenzburg, Schweiz
Registriert: 09. November 2010
Beiträge: 2.814
Webseite

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

Danke für den wertvollen Tipp Hani.


[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog  /   Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox

Offline

#4 03. Januar 2012 02:09

hibr
probiert CMS/ms aus
Registriert: 05. Januar 2011
Beiträge: 29

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

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:

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

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)


Hanis Sammelsurium - How-To's · Erfahrungs- und Meinungsberichte

Offline

#5 03. Januar 2012 06:52

nockenfell
Moderator
Ort: Lenzburg, Schweiz
Registriert: 09. November 2010
Beiträge: 2.814
Webseite

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

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.


[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog  /   Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox

Offline

#6 04. Januar 2012 23:33

hibr
probiert CMS/ms aus
Registriert: 05. Januar 2011
Beiträge: 29

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

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)


Hanis Sammelsurium - How-To's · Erfahrungs- und Meinungsberichte

Offline

#7 12. Januar 2012 15:42

faglork
CMS/ms-Profi
Ort: Fränkische Schweiz
Registriert: 15. Dezember 2010
Beiträge: 1.151
Webseite

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

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

Offline

#8 15. Januar 2012 01:42

hibr
probiert CMS/ms aus
Registriert: 05. Januar 2011
Beiträge: 29

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

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.

mini_tinymce_imagecaption.png

Gruß Hani

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


Hanis Sammelsurium - How-To's · Erfahrungs- und Meinungsberichte

Offline

#9 16. Januar 2012 20:39

faglork
CMS/ms-Profi
Ort: Fränkische Schweiz
Registriert: 15. Dezember 2010
Beiträge: 1.151
Webseite

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

Aaaah ... jetzt weiss ich was du meinst.

Wie wärs mit nem normalen

float:left;
clear:both

...?

Servus,
Alex

Offline

#10 17. Januar 2012 01:58

hibr
probiert CMS/ms aus
Registriert: 05. Januar 2011
Beiträge: 29

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

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:

---|---
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:"

.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)


Hanis Sammelsurium - How-To's · Erfahrungs- und Meinungsberichte

Offline

#11 17. Januar 2012 05:46

nockenfell
Moderator
Ort: Lenzburg, Schweiz
Registriert: 09. November 2010
Beiträge: 2.814
Webseite

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

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


[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog  /   Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox

Offline

#12 01. Februar 2012 13:05

faglork
CMS/ms-Profi
Ort: Fränkische Schweiz
Registriert: 15. Dezember 2010
Beiträge: 1.151
Webseite

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

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)

Offline

#13 06. Februar 2012 22:47

nockenfell
Moderator
Ort: Lenzburg, Schweiz
Registriert: 09. November 2010
Beiträge: 2.814
Webseite

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

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.


[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog  /   Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox

Offline

#14 07. Februar 2012 23:11

nicmare
Server-Pate
Registriert: 15. Dezember 2010
Beiträge: 1.314
Webseite

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

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?

Offline

#15 07. Februar 2012 11:23

faglork
CMS/ms-Profi
Ort: Fränkische Schweiz
Registriert: 15. Dezember 2010
Beiträge: 1.151
Webseite

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

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

Offline

#16 07. Februar 2012 11:51

nockenfell
Moderator
Ort: Lenzburg, Schweiz
Registriert: 09. November 2010
Beiträge: 2.814
Webseite

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

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.


[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog  /   Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox

Offline