WordPress-Editor: Bilder korrekt einbinden

[Hank Moody]

Hi Leute,

ich nutze seit einiger Zeit das Dorayaki-Theme von Elmastudio und bin sehr zufrieden damit. Einzig der Backend-Editor nervt mich ein wenig, wenn ich Bilder links- oder rechtsbündig einbinde.

In der Vorschau sieht ein linksbündiges Bild z.B. so aus:

REMOVED

Im fertigen Artikel passt alles wunderbar:

REMOVED

Es gibt eine editor-style.css, in der wohl irgendwas kaputt oder falsch sein muss - leider kann ich zu wenig CSS, um das herauszufinden und hoffe daher auf eure Hilfe.

[src=css]/*
Theme Name: Dorayaki
Description: Used to style the TinyMCE editor.
*/

* {
color: inherit;
font-family: 'Domine', Georgia, serif;
font-size:17px;
font-style: inherit;
line-height: 1.8;
}
body {
color: #3f3f3f;
font-family: 'Domine', Georgia, serif;
font-size:17px;
font-weight: normal;
line-height: 1.8;
}

/* --- Headlines --- */
h1, h2, h3, h4, h5, h6 {
color: #3f3f3f;
font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
font-weight: bold;
text-rendering: optimizeLegibility;
word-wrap: break-word;
}
h1 {
font-size:26px;
}
h2 {
font-size: 20px;
}
h3 {
font-size: 18px;
}
h4 {
font-size:16px;
}
h5 {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
}
h6 {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
}

/* --- Text Elements --- */
p {
margin: 0 0 24px;
font-family: 'Domine', Georgia, serif;
line-height:1.7;
}
p strong {
font-weight: bold !important;
}
em {
font-style: italic;
}
p small {
font-size: .8em;
}
blockquote {
color: #9e9e9e;
}
blockquote p {
font-size:18px;
font-size:1.125rem;
}
blockquote cite {
display:inline-block;
padding: 15px 0 0 0;
font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
font-size: 12px;
font-size: 0.75rem;
font-weight: bold;
font-style: normal;
text-transform: uppercase;
letter-spacing: 1px;
}
pre {
background: #efefef;
font-family: Consolas, Monaco, monospace;
font-size: 14px;
font-size: 0.8125rem;
line-height: 1.4;
margin-bottom: 20px;
padding: 15px;
overflow: auto;
max-width: 100%;
}
address{
padding:0 0 30px;
line-height:1.7;
}
abbr,acronym {
border-bottom:.1em dotted;
}
mark, ins {
background: #fff9c0;
color: #3f3f3f;
text-decoration: none;
}
/* --- Images --- */
img, .page img {
max-width:100%;
height: auto;
margin: 0;
padding: 0;
}
img[class*="wp-image-"] {
height: auto;
max-width: 97.5%;
}
img.size-full {
width: auto; /* Prevent stretching of full-size images in IE8 */
}
img.wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
p img,
.wp-caption {
margin-top: 0.4em;
}
.wp-caption {
border: none;
text-align: center;
background-color: #fff;
-webkit-border-radius:0;
border-radius: 0;
}
.wp-caption-dd {
font-size: 14px;
line-height: 17px;
padding: 15px 0 15px;
font-style:italic;
text-align:center;
}
img {
border: none;
}
img.alignleft,
img.alignright,
img.aligncenter {
margin-bottom: 1.625em;
}
.wp-caption {
width:auto !important;
max-width: 100%;
text-align: left;
}
.wp-caption .wp-caption-text {
margin: 0;
padding: 8px 0 10px;
font-size:.85em;
}
/* --- Tables --- */
table {
font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
border-collapse: collapse;
border-spacing: 0;
border-bottom: 1px solid #eaeaea;
line-height: 2;
margin: 0 0 40px;
width: 100%;
font-size:14px;
font-size:0.875rem;
}
table td {
border-top: 1px solid #eaeaea;
padding: 6px 10px 6px 0;
}
table caption {
margin: 40px 0;
}
table th {
font-weight: bold;
text-align:left;
}

/* --- List Elements --- */
ol {
list-style: decimal;
margin:0 0 30px 20px;
}
ul {
list-style: disc;
margin:0 0 30px 20px;
}
ol ol,
ul ul {
margin:0 0 0 20px;
}
ul li,
ol li {
display: list-item;
margin: 0;
padding: 0;
line-height:1.8;
}
/* --- Links --- */
a,
a em,
a strong {
color: #92dadd;
font-weight:bold;
text-decoration:none;
}
a:focus,
a:active,
a:hover {
text-decoration: underline;
color:#2aa3b2;
}
/* --- Alignment --- */
.alignleft,
.alignright {
float: none;
display: block;
}
.aligncenter {
margin-left: auto;
margin-right: auto;
display: block;
clear: both;
}
img.alignleft,
img.alignright {
margin-top:10px;
margin-bottom:10px;
}[/src]

Danke!

 

[theSplit]

Eigentlich sollte es reichen wenn du folgendes ergänzt:

[src=css]img.alignleft {
float:left;
}

img.alignright {
float:right;
}

/* Den Teil hier brauchst du nicht zwingend, ist nur Optik damit etwas Luft um die Bilder bleibt */
img.alignleft,
img.alignright {
margin: 10px;
}[/src]


Ich kann dir aber nicht garantieren das dies im Editor so passen wird, meiner Erfahrung nach tun sich die Browser (speziell jedenfalls Firefox und Chrome) schwer wenn ein Element mal gefloatet ist (links oder rechts ausgerichtet mit float: left/right) und dann beispielsweise der Style weggenommen und dann zentriert oder normal dargestellt werden soll, mit "float: none". Kann sein das die Ansicht so bleibt. Würde ich aber einfach mal testen.

Vielleicht mußt du das Bild komplett rausnehmen und dann wieder neu einfügen, um das Problem mit der starren Anzeige bei einer Änderung, falls vorhanden, zu umgehen*.

* Starre Anzeige im Editor Fenster/Vorschau im Beitrag bleibt alles wie gehabt.

 

[Hank Moody]

Danke für deine Hilfe!

Leider klappt es noch nicht, siehe:

REMOVED

Das ist auch extra ein neu angelegter Beitrag, damit da nichts gecached wird oder so. Das Bild der Maus ist nun eigentlich rechtsbündig.

 

[godlike]

Bekommt das Bild im Editor auch die Klasse alignleft bzw. alignright zugewiesen? Schau mal im Quelltext nach wenn du einen Artikel schreibst (erzeugter Quelltext natürlich).

img.alignleft,
img.alignright {
margin: 10px;
}

Würde ich so nicht machen. Wenn du ein Bild rechts floatest braucht es ja nur links einen Abstand und umgekehrt. Von dem her eher

[src=css]img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }[/src]

 

[Hank Moody]

Bekommt das Bild im Editor auch die Klasse alignleft bzw. alignright zugewiesen?

Im Quellcode eines Artikels mit linksbündigem Bild ist das Bild wie folgt eingebunden:
[src=html4strict]<img class="alignleft size-full wp-image-374" src="https://domain.de/wp-content/uploads/2013/05/openlogo-100.png" alt="openlogo-100" width="100" height="123" />[/src]
Sollte doch also eigentlich passen, oder?

 

[godlike]

Ich seh gerade das in deiner CSS von oben ja folgendes steht:

[src=css] /* --- Alignment --- */
.alignleft,
.alignright {
float: none;
display: block;
}[/src]
Wieso steht das da? Mach das mal raus...

edit: Und ja, das Bild sollte so eigentlich passen.

edit 2: Nimm mal meinen CSS-Schnipsel von oben und ersetze das unter /* --- Alignment --- */ und schau was passiert...

 

[Hank Moody]

@godlike: das steht da, weil's zum Theme gehört.

Hab das nun auskommentiert und meine css sieht nun so aus:

[src=css]/*
Theme Name: Dorayaki
Description: Used to style the TinyMCE editor.
*/

* {
color: inherit;
font-family: 'Domine', Georgia, serif;
font-size:17px;
font-style: inherit;
line-height: 1.8;
}
body {
color: #3f3f3f;
font-family: 'Domine', Georgia, serif;
font-size:17px;
font-weight: normal;
line-height: 1.8;
}

/* --- Headlines --- */
h1, h2, h3, h4, h5, h6 {
color: #3f3f3f;
font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
font-weight: bold;
text-rendering: optimizeLegibility;
word-wrap: break-word;
}
h1 {
font-size:26px;
}
h2 {
font-size: 20px;
}
h3 {
font-size: 18px;
}
h4 {
font-size:16px;
}
h5 {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
}
h6 {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
}

/* --- Text Elements --- */
p {
margin: 0 0 24px;
font-family: 'Domine', Georgia, serif;
line-height:1.7;
}
p strong {
font-weight: bold !important;
}
em {
font-style: italic;
}
p small {
font-size: .8em;
}
blockquote {
color: #9e9e9e;
}
blockquote p {
font-size:18px;
font-size:1.125rem;
}
blockquote cite {
display:inline-block;
padding: 15px 0 0 0;
font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
font-size: 12px;
font-size: 0.75rem;
font-weight: bold;
font-style: normal;
text-transform: uppercase;
letter-spacing: 1px;
}
pre {
background: #efefef;
font-family: Consolas, Monaco, monospace;
font-size: 14px;
font-size: 0.8125rem;
line-height: 1.4;
margin-bottom: 20px;
padding: 15px;
overflow: auto;
max-width: 100%;
}
address{
padding:0 0 30px;
line-height:1.7;
}
abbr,acronym {
border-bottom:.1em dotted;
}
mark, ins {
background: #fff9c0;
color: #3f3f3f;
text-decoration: none;
}
/* --- Images --- */
img, .page img {
max-width:100%;
height: auto;
margin: 0;
padding: 0;
}
img[class*="wp-image-"] {
height: auto;
max-width: 97.5%;
}
img.size-full {
width: auto; /* Prevent stretching of full-size images in IE8 */
}
img.wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
p img,
.wp-caption {
margin-top: 0.4em;
}
.wp-caption {
border: none;
text-align: center;
background-color: #fff;
-webkit-border-radius:0;
border-radius: 0;
}
.wp-caption-dd {
font-size: 14px;
line-height: 17px;
padding: 15px 0 15px;
font-style:italic;
text-align:center;
}
img {
border: none;
}
img.alignleft,
img.alignright,
img.aligncenter {
margin-bottom: 1.625em;
}
.wp-caption {
width:auto !important;
max-width: 100%;
text-align: left;
}
.wp-caption .wp-caption-text {
margin: 0;
padding: 8px 0 10px;
font-size:.85em;
}
/* --- Tables --- */
table {
font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
border-collapse: collapse;
border-spacing: 0;
border-bottom: 1px solid #eaeaea;
line-height: 2;
margin: 0 0 40px;
width: 100%;
font-size:14px;
font-size:0.875rem;
}
table td {
border-top: 1px solid #eaeaea;
padding: 6px 10px 6px 0;
}
table caption {
margin: 40px 0;
}
table th {
font-weight: bold;
text-align:left;
}

/* --- List Elements --- */
ol {
list-style: decimal;
margin:0 0 30px 20px;
}
ul {
list-style: disc;
margin:0 0 30px 20px;
}
ol ol,
ul ul {
margin:0 0 0 20px;
}
ul li,
ol li {
display: list-item;
margin: 0;
padding: 0;
line-height:1.8;
}
/* --- Links --- */
a,
a em,
a strong {
color: #92dadd;
font-weight:bold;
text-decoration:none;
}
a:focus,
a:active,
a:hover {
text-decoration: underline;
color:#2aa3b2;
}
/* --- Alignment --- */
img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }[/src]

Klappt aber leider noch immer nicht.

 

[godlike]

Auch nach STRG+F5? Seltsam. Ist auch schwer zu sagen wenn man nicht genau weiß wie das Theme bearbeitet/geändert wurde...

Ich schätze die haben da was am Editor geschraubt oder so was in der Art....

 

[Hank Moody]

@godlike: ja, auch nach Strg+F5 und sogar Browserwechsel auf Firefox. Das Bild bleibt einfach immer linksbündig, außer beim zentrieren, da passts.

Klappt nun. Der Apache hat das gecached... danke für eure Hilfe!

--- [2016-05-04 14:46 CEST] Automatisch zusammengeführter Beitrag ---

Noch eine kleine Frage: kann man den "Schreibbereich" des Editors begrenzen? Hintergrund: mein Artikellayout ist wesentlich schmaler als der Editor. Das Problem, welches ich hier sehe ist, dass das Theme responsive ist. Ich hätte halt gerne die gleiche Breite im Editor wie in der Desktop-Ansicht.

 

[theSplit]

Hank Moody, zu deinem Edit.

Die Textfläche auf die Desktopauflösungen deines Blogs anzupassen ist auch möglich.

Du mußt dir dazu nur mal die ID (falls vorhanden) des Vorschaufensters herausholen und legst dafür im CSS folgende Werte
[src=css]/* Das erste wäre mit ID Bezeichnung */
#EditorBereichOderFensterID {
width: 777px;
}

/* Oder mit einem Klassennamen */

.EditorBereichOderFensterKlasse {
width: 777px;
}[/src]

Das sollte es eigentlich schon tun. Du mußt halt nur wissen wie breit dein Desktop Theme gestaltet.
Am einfachsten geht das mit den Developer Tools in Firefox (F12) und dann ganz Links in der Leiste das Auswahlwerkzeug wählen. Anklicken und mit der Maus über das Element fahren, du solltest dann gleich die Abmessungen sehen wie auch den Quellcode des Elements im Inspektor. Die Breite eines Artikels kannst du auch leicht damit herausfinden.

Ist einfacher als jetzt den Quelltext so zu durchforsten

 

[Hank Moody]

Etwas peinlich, den Thread nach oben zu holen, ich wollte euch aber auch nicht dumm sterben lassen...

Zusammenfassung: um beide "Probleme" zu lösen reicht es, in die editor-style.css folgende Einträge zu setzen/zu ersetzen:

[src=css]/* --- Alignment --- */
img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* --- Editor-Width --- */
.wp-editor {
width: 630px;
}[/src]

Danke an alle, die geholfen haben!