Ursprünglich habe ich mir das kostenpflichtige Plugin Formidable Pro erworben, um Benutzern auf der Frontend Seite von WordPress die Möglichkeit zu bieten, Beiträge zu veröffentlichen. Dieses Vorhaben habe ich schon vor längerer Zeit verworfen. Da ich Internetseiten entwickele, mit denen der Seitenbesucher sich verschiedener Dienste bedienen kann, möchte ich hier eine grundsätzliche Verwendungsmöglichkeit von Formidable Pro skizzieren. Das Beispiel, dass ich aufzeigen werde, verwendet neben dem Plugin Formidable Pro, das Bildprogramm imagemagick auf Linux, mit dem es möglich ist, Bilder zu bearbeiten. Die Funktionsweise des hier vorgestellten Skripts kann man auf https://bewerbugnstools.de sehen.
Ziel dieses Skriptes ist es, dem Benutzer der Seite die Möglichkeit zu geben Bewerbungsfotos ein wenig aufzuwerten und Online Manipulationen des Bildes zu ermöglichen wie es zum Beispiel Word bietet. Es empfiehlt sich das Plugin Code Snippets zu installieren. Mit diesem Plugin können alle Code Schnippsel, die normalerweise in die function.php des Themes geschrieben werden themeunabhängig programmiert werden. Das hat den Vorteil, dass die Schnippsel in einer Datenbank liegen und bei der Aktualisierung des WordPress Theme erhalten bleiben.
[unitegallery Galeire1]
Anlegen und konfigurieren des Formulars
Mit dem Formular sollen Bilddateien hochgeladen werden und durch eine Auswahl verschiedener Optionen unterschiedliche Manipulationen angeboten werden. Dafür kann man die Feldart Radio Buttons nutzen. Es ist also ein Formularfeld zum Hochladen von Dateien auszuwählen. Damit nur Bilddateien zugelassen werden, kann man die Bilddateien im Backup Bereich von WordPress auswählen. Imagemagick kann so gut wie alle Bilddateien bearbeiten, deshalb kann man hier auch Bilddateien wie Bitmap zulassen. Es ist sinnvoll die Dateigröße zu begrenzen.
-
-
Die Optionen von Formidable Pro für den Upload von Dateien.
Als Bildbearbeitungsoptionen sollen Polaroid, Panorama, Vignette, Schatten und Beschriftung gewählt werden. Schön ist es, wenn die gewählte Option auch durch ein entsprechendes Bild untermalt wird. Das geht ganz einfach, indem man als Auswahlmöglichkeit
<img src="Bild Url" width="75" /> Option |
<img src="Bild Url" width="75" /> Option
als Bezeichnung für die Option eingibt.
Macht man dies, muss man allerdings darauf achten, dass man die Option Benutze separate Werte bei den Einstellungen des Radio Buttons Feld im Formidable Pro Backend Bereich verwendet, damit bei der Abfrage im Skript auch der entsprechende gewünschte Optionswert abgefragt wird und nicht der gesamte html-Code. Nützlich ist noch ein Captcha Feld.
-
-
Bild Eingabe als Option im üblichen html Code und zusätzliche Definition der gespeicherte Werte
-
-
Optionen im Radiobutton Menu. Das Ursprungsbild wurde mit Perspekive und Schatten bearbeitet.
-
-
Bei den Optionen separate Werte speichern Haken setzen, damit die Option als verständlicher Begriff und nicht html Code gespeichert wird.
Formidable Pro Hooks zur Datenmanipulation
Formidable bietet eine ganze Reihe von Hooks zu Verarbeitung und Anpassung der Formulardaten an. Für unsere Zwecke verwenden wir den Hook
mit dem Daten nach der Erstellung des Datensatzes weiter bearbeitet werden können. Wie üblich wird bei WordPress eine spezielle Funktion durch den Hook durch
angemeldet. Wir definieren hier die Funktion
. Beim Versenden des Formulars werden die Einträge des Formulars versendet. Die Formularnummer erhallt man dabei durch
. Entsprechende Felder durch
$_POST['item_key'][Feldnummer] |
$_POST['item_key'][Feldnummer]
. Dabei ist Feldnummer
die vom Formular erzeugte Feld id von Formidable Pro. nach der Manipulation des Bildes soll die neue Datei zum Download freigegeben werden. Dazu verwenden wir den Datensatzschlüssel, um eine eindeutige Datei zu erzeigen. Den Datensatzschlüssel erhalten wir durch
Der Vorteil bei der Verwendung des Keys gegenüber der ID liegt darin, dass der Key schon vor der Speicherung der Daten in der Daenbank existiert, während die ID erst beim Anlegen der Datenbank festseht.
Zunächst filtert das Skript heraus, welches Formular aufgerufen worden ist. Damit die Funktion nur für das vorgesehene Formular ausgeführt wird, definieren wir die Variablen
und
, die wir durch den entsprechenden POST Aufruf erhalten. Dann fragen wir diese entsprechende Variable durch eine if-Schleife ab. In unserem Beispiel soll wird die Funktion nur ausgeführt, wenn das Formular mit der ID 27 ausgefüllt worden ist.
Bei der Verwendung von Code Snippets ist zunächst ungewiss, in welchem Verzeichnis das Skript ausgeführt wird. Da wir für manche Operationen den vollen Pfad unserer Installation benötigen und der nicht immer bekannt ist, bedienen wir uns
$_SERVER['SCRIPT_FILENAME'] |
$_SERVER['SCRIPT_FILENAME']
Methode und zerlegen den Pfadnamen mittels
, Jetzt können wir serverunabhängig spezielle Namen und Verzeichnisse definieren. Üblicherweise liegen die von Formidable Pro hochgeladenen Bilder in einem Verzeichnis:
/Meine Wordpress Installation/wp-content/uploads/formidable/Formular Nummer/ |
/Meine Wordpress Installation/wp-content/uploads/formidable/Formular Nummer/
Bei importieren Formularen kann das leider auch abweichen und dann sucht man verzweifelt den Fehler
Formidable Pro speichert die hochgeladene Datei wie eine übliche Datei im Mediencenter von WordPress ab. Dementsprechend erhält man mit dem Befehl
$_POST['item_meta'][Feldnummer Upload Feld] |
$_POST['item_meta'][Feldnummer Upload Feld]
die entsprechende Medien ID aus WordPress. Mit dem Befehl
wp_get_attachement_url(ID) |
wp_get_attachement_url(ID)
kann man den Bildlink herausfiltern. Da wir aber den absoluten Dateinamen benötigen, müssen wir uns zunächst den Dateinamen mit
und der Konstruktion des Pfades erzeugen. Bevor die eigentliche Bildbearbeitung beginnt, definieren wir noch einen Dateinamen, für das neue Bild, den wir zum Download und zur Ausgabe der Zieldatei von Imagemagick brauchen. Durch die Verwendung des Datensatzkeys ist das Bild auch eindeutig.
Das nachfolgende Skript zeigt die Auswertung des hochgeladenen Bildes und mit der definierten Funktion.
Bei der Verwendung von Code-Snippets fallen die php Tags weg.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| //Anmeldung des Formidable Hooks mit der Funktion wd_man_im bei wordpress
add_action('frm_after_create_entry', 'wd_man_im', 10, 2);
function wd_man_im($form_id,$entry_id){
// Formularnummer und Key des Eintrages ermitteln
$form_id=$_POST['form_id'];
$Id_Data = $_POST['item_key'];
//Wenn Formular xx (hier 27) abgesendet wurde, dann führe folgende Operationen aus.
if ($form_id = 27){
//Ersetze Mein Wordpress Home Verzeichnis durch das Verzeichnis der Wordpress Installation
$parse_uri = explode( 'Mein Wordpress Home Verzeichnis', $_SERVER['SCRIPT_FILENAME'] );
$Pfad= $parse_uri[0]."/Mein Wordpress Home Verzeichnis/Uplod Verzeichnis Formular/";
// Verwende die globalen Funktionen von Wordpress
global $wpdb;
//Ermittlung des Bildnamens
$current_value = $_POST['item_meta'][216];
$Dat_url= wp_get_attachment_url($current_value);
$KompDatei=$Pfad.basename($Dat_url);
//Definition der Zieldatei mit zu Hilfename des Keys
$NewImage = $parse_uri[0]."/Mein Wordpress Home Verzeichnis/Datei Zielverzeichnis/".$_POST['item_key']."_converted.png";
if ($_POST['item_meta'][219] == "Perspektive"){
$size = getimagesize( $KompDatei);
$hoehe_neu_y_max = round(0.875*$size[1]);
$hoehe_neu_y_min = round(0.125*$size[1]);
$stretch = '"0,0 0,0 '.$size[0].',0 '.$size[0].','.$hoehe_neu_y_min.' '.$size[0].','.$size[1].' '.$size[0].','.$hoehe_neu_y_max.' 0,'.$size[1].' 0,'.$size[1].' "';
$cmd = 'convert '.$KompDatei.' -virtual-pixel transparent -distort Perspective '.$stretch.' '.$Newimage;
shell_exec($cmd);
}
Was bei der Auswertung des Bildbearbeitungsteiles passiert, kann man im Beitrag <a href="http://waler-dietz.de/bildbearbeitung-mit-imagemagick-bild-mit-perspektive/" target="_blank" rel="noopener">Bildbearbeitung mit Imagemagick: Bild mit Perspektive</a> lesen und nachvollziehen. |
//Anmeldung des Formidable Hooks mit der Funktion wd_man_im bei wordpress
add_action('frm_after_create_entry', 'wd_man_im', 10, 2);
function wd_man_im($form_id,$entry_id){
// Formularnummer und Key des Eintrages ermitteln
$form_id=$_POST['form_id'];
$Id_Data = $_POST['item_key'];
//Wenn Formular xx (hier 27) abgesendet wurde, dann führe folgende Operationen aus.
if ($form_id = 27){
//Ersetze Mein Wordpress Home Verzeichnis durch das Verzeichnis der Wordpress Installation
$parse_uri = explode( 'Mein Wordpress Home Verzeichnis', $_SERVER['SCRIPT_FILENAME'] );
$Pfad= $parse_uri[0]."/Mein Wordpress Home Verzeichnis/Uplod Verzeichnis Formular/";
// Verwende die globalen Funktionen von Wordpress
global $wpdb;
//Ermittlung des Bildnamens
$current_value = $_POST['item_meta'][216];
$Dat_url= wp_get_attachment_url($current_value);
$KompDatei=$Pfad.basename($Dat_url);
//Definition der Zieldatei mit zu Hilfename des Keys
$NewImage = $parse_uri[0]."/Mein Wordpress Home Verzeichnis/Datei Zielverzeichnis/".$_POST['item_key']."_converted.png";
if ($_POST['item_meta'][219] == "Perspektive"){
$size = getimagesize( $KompDatei);
$hoehe_neu_y_max = round(0.875*$size[1]);
$hoehe_neu_y_min = round(0.125*$size[1]);
$stretch = '"0,0 0,0 '.$size[0].',0 '.$size[0].','.$hoehe_neu_y_min.' '.$size[0].','.$size[1].' '.$size[0].','.$hoehe_neu_y_max.' 0,'.$size[1].' 0,'.$size[1].' "';
$cmd = 'convert '.$KompDatei.' -virtual-pixel transparent -distort Perspective '.$stretch.' '.$Newimage;
shell_exec($cmd);
}
Was bei der Auswertung des Bildbearbeitungsteiles passiert, kann man im Beitrag <a href="http://waler-dietz.de/bildbearbeitung-mit-imagemagick-bild-mit-perspektive/" target="_blank" rel="noopener">Bildbearbeitung mit Imagemagick: Bild mit Perspektive</a> lesen und nachvollziehen.