Erweiterung Im Browser editierbarer Blog

Hallo

Ich habe mir die Erweiterung Im Browser editierbarer Blog gekauft und die Ernüchterung hat sich breit gemacht.
Für einen Blog fehlt sehr viel. Für mich ist das nur eine erweiterte Kombination von Im Browser editierbarem Text und Bilder.
Die Funktionen im Textmodul sind wirlich nur das Nötigste. Ich hatte ja gehofft, das man in den Text ein kleines Bild einfügen kann. Mann braucht nicht immer ein Bild welches über die ganze Breite geht.
Beim Bildmodul kann man nur ein Bild pro Zeile einfügen und dann wird das immer in voller Breite angezeigt. Das sieht nicht immer gut aus. Hier wäre eine Einstellung der Bildbreite in Prozent wünschenswert. In anderen Absatzmodulen geht es doch auch. Per CSS könnte man das sicherlich selber lösen.

Gruß Rainer

Hallo Rainer,

in den Absatz-Eigenschaften kannst du bei Reiter "Allgemein" den Einzug (Desktop) links und rechts in Prozentangabe einstellen. Dies wirkt sich dann auf die fertigen Blog-Einträge/Artikel aus, aber das Bild wird hierdurch leider nicht kleiner.
Du hast recht ich hatte es hier in einer Spalte, die Bilder bleiben leider immer groß.

Hallo Thomas 

Das ist auch eine Lösung, aber dadurch wird auch der Textbereich schmaler. Mir gefällt es halt, wenn das Bild schon allein ist, wenn es schmaler wie der Text ist.

Für Bild im Text habe ich für mich eine Lösung gefunden. Auf meiner kleinen Webseite bei Blog zu sehen. Ich muss nur noch eine Anpassung für die Darstellung am Handy usw. Machen.

Gruß Rainer 

Hallo Rainer,

weiß zwar jetzt nicht wie du es genau mit den classen umgesetzt hast, aber dein Blog sieht gut aus.

Hier mal ein kleineres Beispiel, so wie du es teilweise umgesetzt hast:

- Bild auf rechter Seite und nachfolgender Text links vom Bild:

<style>
@media (min-width: 1023px) {
.ngparaeditableblog figure {
 max-width: 25%;
 float: right;
 margin-left: 1em;
 margin-bottom: 1em;
}
.ngparaeditableblog p::after { 
 content: ""; 
 display: block; 
 clear: both; 
}
.ngparaeditableblog-item::after { 
 float: none;
 content: ""; 
 display: block; 
 clear: both; 
}
}
</style>

- Bild auf linker Seite und nachfolgender Text rechts vom Bild:

<style>
@media (min-width: 1023px) {
.ngparaeditableblog figure {
 max-width: 25%;
 float: left;
 margin-right: 1em;
 margin-bottom: 1em;
}
.ngparaeditableblog p::after { 
 content: ""; 
 display: block; 
 clear: both; 
}
.ngparaeditableblog-item::after { 
 float: none;
 content: ""; 
 display: block; 
 clear: both; 
}
}
</style>

Mit @media min-widht habe ich das jetzt mal nur für die Desktop-Ansicht eingegrenzt, damit die Bilder auf dem Smartphone nicht zu klein sind. Hier könnte man das ganze auch noch weiter stylen und natürlich die beiden Beispiel-Codes ebenfalls noch verbessern, verfeinern und erweitern.
Einfach zum ausprobieren in Seiteneigenschaften Reiter HTML in den Head-Bereich kopieren und selber weiter ausbauen.