Bilder im WYSIWYG-Feld

Fragen zu den Grundfunktionen der webEdition Oberfläche wie Backup, Import, ...
Fragen zu we:Tags bitte im Forum "Templates erstellen"
Benutzeravatar
christobal
Senior Member
Beiträge: 313
Registriert: Do 4. Nov 2010, 13:03
Wohnort: Reith bei Seefeld, Tirol - Österreich
Kontaktdaten:

Bilder im WYSIWYG-Feld

Beitragvon christobal » Mo 24. Sep 2018, 13:12

Hallo aus Tirol,

Gibt es einen Trick für folgendes Problem: Ich arbeite im WYSIWYG-Modus in einem Dokument oder Objekt und platziere ein Bild. Das Bild hat exemplarisch 2500px Breite, weil wir responsive arbeiten. Nun nimmt mir das Bild den kompletten Platz ein.

Wie kann ichs einstellen, dass das dargestellte Bild z.B.: nur 250 px Breite mit automatischer Höhe einnimmt und ich weiter gut editieren kann?

Außerhalb des WYSIWYG-Modus kann ich mir bei einem Bild mit <we:ifEditmode... behelfen.

Bitte um Tipps!
Danke Christoph
BIG Detail, Kaspar & Sigl OG
Riedgasse 8b
A-6020 Innsbruck
Tel. +43 512 346070-40
Fax +43 512 346070-20
Mobil: +43 676 3438011

christoph.kaspar@bigdetail.com
http://www.bigdetail.com

WBTMagnum
webEdition Partner
webEdition Partner
Beiträge: 1825
Registriert: Di 7. Mär 2006, 16:50
Wohnort: Wien
Kontaktdaten:

Re: Bilder im WYSIWYG-Feld

Beitragvon WBTMagnum » Mo 24. Sep 2018, 14:10

Hallo Christoph,

Im Richtext würde ich grundsätzlich keine so großen Bilder einbetten. Hier empfiehlt es sich geeignete Miniaturansichten zu definieren und diese bei der Einbettung des Bildes auszuwählen. Damit werden die Bilder automagisch auf die passende Größe runter gerechnet.


Liebe Grüße,
Sascha

mediavantis
Senior Member
Beiträge: 238
Registriert: Do 16. Feb 2012, 12:51

Re: Bilder im WYSIWYG-Feld

Beitragvon mediavantis » Mo 24. Sep 2018, 14:39

Hallo Christoph,

es gäbe noch einen anderen Lösungsansatz.

Wir haben das mit geteilter CSS umgesetzt. Eine CSS natürlich für das Frontend, eine CSS für die Klasse bzw. das Objekt:
Für die Klasse haben wir eine "tiny-mce.css" hinterlegt. In dieser steht z. B. folgendes drin:
.p_image { float: left; width: 48% !important; height: auto !important; margin: 0 3% 1% 0; display: block; }
.p_image_full { width: 100% !important; height: auto !important; margin: 0 0 1.0rem 0; display: block; }

Wenn Du dann also ein Bild in den WYSIWYG-Editor einfügst, wählst Du dann die entpsrechende CSS-Klasse aus und löscht die Pixelwerte, die ja beim Reinladen mit übernommen werden.

In der Frontend-CSS benötigst Du dann natürlich das passende Gegenstück.

Aber es ist schon von Sascha korrekt angemerkt. Solch grosse Bilddateien machen für das Web nicht viel Sinn. Man arbeitet besser mit weitaus kleineren Bild-Dateien von vornherein, oder man verwendet tatsächlich die Option mit den Miniaturansichten und definiert hier eigens dafür zu verwendende Werte.
Dateianhänge
tiny_bild_einfuegen.jpg
tiny_bild_einfuegen.jpg (160.11 KiB) 3707 mal betrachtet

Benutzeravatar
christobal
Senior Member
Beiträge: 313
Registriert: Do 4. Nov 2010, 13:03
Wohnort: Reith bei Seefeld, Tirol - Österreich
Kontaktdaten:

Re: Bilder im WYSIWYG-Feld

Beitragvon christobal » Mi 26. Sep 2018, 09:36

Vielen Dank für Eure Überlegungen und Tipps.
Werd ich ab sofort so umsetzen!!

Danke!
BIG Detail, Kaspar & Sigl OG
Riedgasse 8b
A-6020 Innsbruck
Tel. +43 512 346070-40
Fax +43 512 346070-20
Mobil: +43 676 3438011

christoph.kaspar@bigdetail.com
http://www.bigdetail.com

Benutzeravatar
christobal
Senior Member
Beiträge: 313
Registriert: Do 4. Nov 2010, 13:03
Wohnort: Reith bei Seefeld, Tirol - Österreich
Kontaktdaten:

Re: Bilder im WYSIWYG-Feld

Beitragvon christobal » Mo 1. Okt 2018, 10:06

Ganz praktikabel ist Euere Vorgehensweise nicht:

ich setze responsives Webdesign voraus
  • Ich bin im WYSIWYG-Feld
    lade ein Bild hoch
    sag ihm per Miniaturansicht-Select, dass es statt der 4000px nur 1200px Breite haben soll
    nur dass dann der Editor voll mit diesem Bild ist
    und ich herumdoktern muss, um überhaupt einen Platz für den Cursor zu finden...
  • oder ich definier als Miniaturansicht 250px Breite
    damit kann ich im Editor gut arbeiten
    nichts ist im Weg
    aber das Bild bleibt so klein
Ein Mischung aus beiden Fällen wäre fein. Eine Art Previewbild mit 250px im Editor, das aber dann auf der fertig gerenderten Seite responsive ist...
BIG Detail, Kaspar & Sigl OG
Riedgasse 8b
A-6020 Innsbruck
Tel. +43 512 346070-40
Fax +43 512 346070-20
Mobil: +43 676 3438011

christoph.kaspar@bigdetail.com
http://www.bigdetail.com

mediavantis
Senior Member
Beiträge: 238
Registriert: Do 16. Feb 2012, 12:51

Re: Bilder im WYSIWYG-Feld

Beitragvon mediavantis » Mo 1. Okt 2018, 17:05

Hallo Christoph,

versuche es doch mal mit dem Einbinden der CSS wie oben beschrieben. Es funktioniert wirklich gut. Das ist einmal Arbeit, und dann klappt das auch immer. Und das responsive kannst Du damit auch noch abdecken.

Benutzeravatar
christobal
Senior Member
Beiträge: 313
Registriert: Do 4. Nov 2010, 13:03
Wohnort: Reith bei Seefeld, Tirol - Österreich
Kontaktdaten:

Re: Bilder im WYSIWYG-Feld

Beitragvon christobal » Di 2. Okt 2018, 18:03

Hallo Ulrich,

habs gerade ausprobiert. Funktioniert einwandsohne!
Vielen Dank. Das rettet mir den Abend!

Christoph
BIG Detail, Kaspar & Sigl OG
Riedgasse 8b
A-6020 Innsbruck
Tel. +43 512 346070-40
Fax +43 512 346070-20
Mobil: +43 676 3438011

christoph.kaspar@bigdetail.com
http://www.bigdetail.com


Zurück zu „Basisversion“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 12 Gäste