Bilder beim Hochladen bearbeiten

Hinweis: Sie können auf die Bilder klicken um diese zu "zoomen".

Möchten Sie ein Bild direkt beim Hochladen bearbeiten, damit es ein entsprechendes Webformat erhält und bei gleichbleibender optischer Qualität weniger Speicherplatz verbraucht, gehen Sie bitte wie folgt vor. 

 

ODER:

1. Klicken Sie im Backend auf den Menübaum - Komponenten
2. Datei-Browser
3. Ordner wohin das Bild hochgeladen werden soll auswählen
4. Hochladen klicken

Ein PopUp öffnet sich.

 

1. Ziehen Sie einfach das gewünschte Bild in den "Datei hier ablegen"-Bereich, achten Sie bereits auf die maximale Dateigröße die hochgeladen werden kann. Sollten Sie eine höhere Uploadgröße benötigen kontaktieren Sie bitte uns.
2. Haken Sie "Größe ändern" an.
3. In diesem Beispiel gibt es zwei voreingestellte Werte. Sie können aber auch jederzeit temporär eigene Werte eintragen.
4. Wählen Sie unter Punkt 6 die gewünschte Größe aus. 
5. Sollten Sie nicht das gleiche Seitenverhältnis besitzen wie benötigt, wird das Bild automatisch zugeschnitten (Punkt 4), sollte dies nicht gewünscht sein bitte abhaken.
6. Im Suffix sind von uns voreingestellte Names-Suffixe die letzendlich an den Dateinamen angehängt werden, Sie können diese so belassen, ändern oder entfernen. Diese dienen lediglich der Orientierung. 

Sofern die Einstellungen passen, klicken Sie unten rechts im PopUp auf Hochladen, der Datei-Browser benötigt je nach Datenmenge etwas Zeit um alle Änderungen und Komprimierungen abzuschließen. Sobald dieser fertig ist verschwindet das PopUp von alleine und die Bilddaten können verwendet werden. 

 

Fotos mit dem JCE-Editor bearbeiten

Hinweis: Sie können auf die Bilder klicken um diese zu "zoomen".

---

 

Bildermanager aufrufen:

Im Bildmanager das Foto auswählen:  Man siehtunten rechts die aktuelle Dateigröße und die Pixelgröße. Dieses Testbild ist viel zu groß! Die gewünschte Größe wäre bei 1600 px in der Breite und einer Dateigröße von wenigen kB.

Wir verwenden als  Bildseitenverhältnis das Spiegel-Reflex-Format von 2:3. Ein Foto mit bspw. 1600px Breite würde dann eine Höhe von 1066px haben.

Wenn man ein Bildseitenverhältnis von 4:3 bevorzugt, dann wäre die Größe 1600 x 1200px.

Dieses Testfoto ist im Seitenverältnis 4:3.

Zum ändern des Fotos auf den gelb markierten Button drücken.

 

Falls wir das Foto auf das Bildseitenverhältnis schneiden wollen, dann jetzt auf den Button "Beschneiden" klicken. Falls das Bildseitenverhältnis nicht geändert werden soll, kann dieser Schritt übersprungen werden.

Das Format 20 x 30 auswählen und auf "Anwenden" klicken.

Achtung: je größer das Foto ist, umso länger dauert die Verarbeitung!  Das kann bis zu einer Minute dauern!

Warten bis der Speichern-Button aktiv wird.

Dann auf "Größe ändern" klicken

 

 

Hier kann man die gewünschte Größe eingeben. Wir haben die gängingen Größen voreingestellt. Für das 2:3-Format also bitte 1600x1066 auswählen und dann wieder "Anwenden" drücken.

Wieder warten bis "Speichern" aktiv wird!

Es kann jetzt passieren, dass die Aktion nicht ausgeführt wird und die alte Größe wieder angezeigt wird. Dann nochmals 1600x1066 einstellen und auf "Speichern" drücken. Sollte es weiterhin zu Problemen kommen, kontaktieren Sie uns bitte. 

 

 

Nun einen neuen Namen vergeben, 50 % Qualität einstellen und wir sind fertig. Der Speicherbutton wird inaktiv und wir können mit dem Schließkreuz das Fenster schließen.

Wenn alles geklappt hat landen wir wieder im Bildmanager und sehen die neuen Daten des Bildes:

 

Aus 3,5 Megabyte sind nur 380 Kilobyte geworden, also eine sehr erhebliche und wichtige Verkleinerung der Dateigröße. Und aus dem viel zu großen Bild wurde ein passendes mit 1600px Breite. Bitte das viel zu große Originalbild danach löschen, damit der Speicher davon frei wird.

Anmerkung: Fotos größer als 8 MB werden nicht angenommen. Je größer die Fotos sind, desto länger dauert die Verarbeitung und desto unsicherer ist ein erfolgreiches Ergebnis.

Am besten ist es daher immer, mit einem Bildbearbeitungs-Tool seine Fotos vorher lokal zurecht zu schneiden.

PDF Dokumente richtig hochladen und verlinken

Hinweis: Sie können auf die Bilder klicken um diese zu "zoomen".

Möchten Sie ein PDF hochladen, dann folgenden Sie am besten dieser Anleitung.

ODER:

1. Klicken Sie im Backend auf den Menübaum - Komponenten
2. Datei-Browser
3. Ordner wohin das PDF hochgeladen werden soll auswählen
4. Hochladen klicken
5. Sofern kein Order für Dokumente vorhanden ist, erstellen Sie bitte einen, vermeiden Sie bitte die Dokumente im Root hochzuladen!

Ein PopUp öffnet sich.

1. Per Drag&Drop können Sie die PDF einfach in das Feld " Datei hier ablegen" ziehen
2. Achten Sie auf die maximale Dateigröße, diese wird direkt angezeigt. Meist sind dies ca 8MB
3. Klicken Sie unten rechts auf Hochladen

Jetzt können Sie das PDF entsprechend verwenden. 

Eine weitere Möglichkeit des Uploads wäre es die PDF direkt im Bildermanager im jeweiligen Beitrag/Modul hochzuladen. Dabei gehen Sie wie folgt vor. (Haben Sie die PDF schon herkömmlich hochgeladen können Sie diese Schritte überspringen)

Navigieren Sie einfach zu dem jeweiligen Beitrag oder Modul der das PDF als bzw. Link darstellen soll. Öffnen Sie diesen und dann rufen Sie den Bildermanager auf. 

Es öffnet sich ein PopUp. 

Hier stellen sie erst wieder Ihren entsprechenden Order ein, in dem das PDF beim hochladen landen soll. Auch hier bitte vermeiden die Daten ins Root zu legen. 

Beim Klick auf Hochladen, erscheint wieder das bekannte Upload-PopUp. 

Sobald die Daten dann hochgeladen sind können diese verwendet werden. 

Sollte eine Fehlermeldung mit nicht unterstütztem Dateiformat kommen, kontaktieren Sie uns bitte. 

Verlinken:

Um eine PDF zu verlinken gibt es mehrere Möglichkeiten, wir zeigen hier 3 Möglichkeiten auf.

1. Reiner Textlink oder Icon
2. Textlink mit Icon
3. Textlink mit FontAwesome

 

Textlink oder Icon:

 

Nehmen wir an das Sie einen Beitrag haben, in dem ein Textlink mit PDF verlinkt werden soll. 

Markieren Sie den Text, danach klicken Sie auf das Link-Symbol 

 

Der Link-Manager öffnet sich.

1. Klicken Sie auf das Dokumenten-Symbol
2. Wählen Sie Ihr Dokument aus, dass verlinkt werden soll
3. Klicken Sie unten rechts auf Einfügen
4. Wählen Sie im Link-Manager unten, bei Ziel: In neuem Fenster öffnen.
5. Klicken Sie dann unten rechts auf Einfügen
6. Der Link ist gesetzt und kann mit Speichern des Beitrags veröffentlich werden

Gehen Sie genau so vor wenn Sie die PDF nur mit einem Icon, einer Grafik oder einem Bild verlinken wollen, dass Sie zuvor eingefügt haben.

 

 Textlink mit Icon:

Sofern Sie ein Icon oder eine Grafik inkl. Textlink haben wollen fügen Sie vor Ihrem Textlink diese Grafik mit dem Bildermanager ein. 

 

1. Klicken Sie vor den Textlink
2. Öffnen Sie den Bildermanager
3. Suchen Sie Ihr Icon, welches Sie zuvor hochgeladen haben aus
4. Klicken Sie unten rechts auf Einfügen

Das Icon erscheint vor dem TextLink. Jetzt markieren Sie den Textlink inklusive dem Icon und erstellen wie oben beschrieben eine Verlinkung mit dem Link-Manager her. 

Das fertige Ergebniss in etwas so aussehen:

 PDF Link

Sollte sich das Icon oder die Grafik nicht in einer Linie mit dem Text erscheinen und nur mit einem Umbruch, müssen Klassen verwendet werden um den Article-Content-Img zu überschreiben. Diese können Sie wie folgt setzen: 

Achtung: Es kann sein, dass der Klassenname hierfür ein anderer ist. Bitte kontaktieren Sie uns wenn der gewünschte Effekt nicht eintritt. 

 

 Textlink mit FontAwesome:

Sofern es Ihre Installation zulässt finden Sie einen Button in jemdem Beitrag, mit dem Sie einfach entsprechende Grafiken einbetten können. Die Verlinkung erfolgt dann wie oben im Abschnitt "Textlink mit Icon".

Klicken Sie wieder hinter ihren Textlink und Klicken dann auf den FA Icons Button unten in der Leiste:

Ein PopUp öffnet sich.

1. Klicken Sie in die Eingabemaske und suchen Sie nach Fachbegriffen wie "download"
2. Sofern Icons vorhanden sind, werden diese darunter angezeigt
3. Klicken Sie auf das Icon
4. Klicken Sie auf Insert
5. Ein Code-Schnippsel mit geschweiften Klammern wird eingefügt bsp: "fa fa-download"
6. Markieren Sie den Textlink inkl. Code-Schnippsel und verlinken Sie ihn wie bereits gezeigt

 

Das Ergebnis:

PDF Link

 

Beiträge/Module - Spaltenfunktion

Hinweis: Sie können auf die Bilder klicken um diese zu "zoomen".

Um einfach Hinhalt ansprechend und responsive (für Mobilgeräte optimiert) darzustellen, kann folgende Funktion "Spalten" verwendet werden. Diese Funktion ermöglicht es den Inhalt einfach und ohne Programmieraufwand nebeneinander darzustellen. Die Spalten verhalten sich auch auf mobilen Endgeräten beispielhaft.

Um einfach eine gewünschte Anzahl an Spalten einzustellen gehen Sie wie folgt vor. 

Klicken Sie auf den Pfeil rechts neben dem linken Spaltensymbol im obig markierten Bereich.

In der Schnellauswahl können Sie dann von 1 bis 5 Spalten einfach einfügen, indem Sie die gewüsnchte Anzahl auswählen. In diesem Beispiel wählen wir 3 Spalten. 

Es werden 3 Spalten im Texteditor eingefügt. Die gestrichelten Umrandungen visualisieren entsprechend eine Spalte. Innerhalb der Spalten können Sie wie gewohnt Arbeiten. 

Um Spalten hinzuzufügen oder zu löschen verwenden Sie die nebigen Symboliken im obig markierten Bereich. 

Drücken der Eingabetaste innerhalb einer Spalte:

Da das Standardblockelement innerhalb einer Spalte ein Absatz ist, wird durch Drücken der Eingabetaste innerhalb eines Spaltenabsatzes – oder eines anderen Blockelements innerhalb der Spalte – ein neuer Absatz (oder ein neues Blockelement) erstellt. Durch Drücken von SHIFT + Enter wird ein Zeilenumbruch erstellt. Dieses Verhalten ist identisch mit dem Drücken der Eingabetaste außerhalb einer Spalte.

Um den Cursor vollständig aus der Spalte zu bewegen, verwenden Sie ALT + Eingabetaste. Dadurch wird unterhalb der Spalte ein neuer Absatz erstellt. Verwenden Sie ALT + UP (Pfeil oben), um einen neuen Absatz über der Spalte zu erstellen.

Spaltenkonfigurator:

Um den Spaltenkonfigurator aufzurufen gehen Sie wie folgt vor.

Klicken Sie auf das linke Spaltensymbol im obig markierten Bereich. Der Konfigurator öffnet sich. 

In diesem Konfigurator haben Sie folgende Möglichkeiten:

Columns / Spalten:

Anzahl der Spalten

Stack Width / Spalten stapeln:

Spalten sind responsive und passen ihre Größe der Browserbreite an.

Die Browserbreite, mit der die Spalten gestapelt werden basiert auf drei Gerätegrößen:

Klein – Geräte in Telefongröße im Querformat mit einer Breite zwischen 576 Pixel und 640 Pixel 
Mittel – Tablet-Geräte im Querformat mit einer Breite zwischen 768 Pixel und 960 Pixel
Groß – Laptops und Desktops mit einer Breite zwischen 992 Pixel und 1200 Pixel

Gap Size / Spaltenabstand:

Der Abstand zwischen 2 Spalten, sofern sie horizontal angeordet sind. Klein, Mittel, Groß

Layout:

Beim Erstellen neuer Spalten oder beim Erstellen von Spalten mit bereits vorhandenem Inhalt werden die Spalten gleichmäßig dimensioniert, damit sie der Breite des Browserfensters entsprechen. 

Die Layout-Liste enthält die folgenden Optionen:

Auto: der Standardwert. Jede Spalte hat die gleiche Breite
2-1: Die Breite wird in Dritteln festgelegt, wobei die erste Spalte zwei Drittel der Gesamtbreite ausmacht.
1-2: Die Breite wird in Dritteln festgelegt, wobei die letzte Spalte zwei Drittel der Gesamtbreite ausmacht.
3-1: Die Breite wird in Vierteln festgelegt, wobei die erste Spalte drei Viertel (75 %) der Gesamtbreite ausmacht.
1-3: Die Breite wird in Vierteln festgelegt, wobei die letzte Spalte drei Viertel (75 %) der Gesamtbreite ausmacht.
2-1-1: Die Breite wird in Vierteln festgelegt, wobei die erste Spalte die Hälfte (50 %) der Gesamtbreite ausmacht. Dies wird normalerweise auf Zeilen mit 3 oder mehr Spalten angewendet.
1-2-1: Die Breite wird in Vierteln festgelegt, wobei die mittlere Spalte die Hälfte (50 %) der Gesamtbreite ausmacht. Dies wird normalerweise auf Zeilen mit 3 oder mehr Spalten angewendet.
1-1-2: Die Breite wird in Vierteln festgelegt, wobei die letzte Spalte die Hälfte (50 %) der Gesamtbreite ausmacht. Dies wird normalerweise auf Zeilen mit 3 oder mehr Spalten angewendet.

Mit einem Klick auf Insert / Einfügen, werden die Spalten entsprechend den Einstellungen eingesetzt.

Auch hier können die Spalten den mit Inhalt versorgt werden. So wie Sie es vom Editor gewohnt sind. Das heißt mit Text, Bildern, Aufzählungen etc. 

HistoryBack-Button (Zurück-Knopf)

Hinweis: Sie können auf die Bilder klicken um diese zu "zoomen".

Um einfach einen "Zurück"-Button einzufügen gehen Sie wie folgt vor:

Wenn Sie sich im gewünschten Beitrag befinden, klicken Sie auf die Stelle im Editor an dem der Button erscheinen soll. Hier im Beispiel unter dem Wort (Code-Snippet) "smartslider". Danach klicken Sie auf den Pfeil des rot umrahmten Vorlagensymbols.

Es erscheint ein Dropdown Menü mit angelegten Vorlagen. Klicken Sie auf die Vorlage "Zurück-Button (HistoryBack).

Danach wird automatisch der dahinter stehende Code eingefügt. Im Editor erscheint der Button als "normaler" Button. Im FrontEnd der Seite erscheint der Button jedoch in der richtigen Formatierung. 

Achtung:

Damit dies funktioniert sind einige Dinge nötig, sollte keine Vorlage bei Ihnen auftauchen, kontaktieren Sie uns bitte. Wir stellen Ihnen diese dann gerne nachträglich ein.

Wir möchten weitere kleine Anleitungen veröffentlichen, die es unserern Kunden erleichtern Ihre Seiten zu pflegen.