Mein Vowort und Infos zum Erlebten
Warum hab ich mir eigentlich die Mühe gemacht? Ganz einfach -
Das Marktplatz-Script von Herrn Hummel ist auf einer aussergewöhnlichen Art und Weise so flexibel, dass die Anwendungs- u. Nutzungsmöglichkeiten gigantisch sind.
Ja das sieht man nicht sofort wenn man das biedere Tabellendesign sieht.
Aber daher ist der OHOO Effekt um so größer.
Ich nutze es meistens für Tierheime.
Das Marktplatz-Script von Herrn Hummel ist auf einer aussergewöhnlichen Art und Weise so flexibel, dass die Anwendungs- u. Nutzungsmöglichkeiten gigantisch sind.
Ja das sieht man nicht sofort wenn man das biedere Tabellendesign sieht.
Aber daher ist der OHOO Effekt um so größer.
Ich nutze es meistens für Tierheime.
Der Beginn
Zunächst sei gesagt - ich kann nicht php programmieren und daher habe ich es eigentlich immer etwas schwer. Als Schlaumeier wollte ich die dafür vorgesehenen Dateien:
mpSeite.htm
mpListen01Zeile.htm
mpDetail01Zeilen.htm
verwenden.
Damit bin ich aber gleich auf die Nase gefallen, da in den php Dateien wie listen.php auch HTML Code enthalten sind. Zum Beispiel:
<tr> <td> oder sogar direkte style="XXXXX" Angaben.
Ein weiteres Problem stellte ein darin enthaltener Codeaufbau dar.
Das Betrifft Bilder die als Link im Adminbereich bei der Segmentgestaltung definiert wurden.
Hier wird in den php Dateien wie folgt vorgegangen
regelwerk 1 behandelt die Links (wie diese generiert und dargestellt werden)
regelwerk 2 behandelt Bilder jedoch ist darin ein Platzhalter für Bildlinks, der vom regelwerk1 einfach eingefügt wird.
Im Grunde gut - es spart Code. Aber nicht in meinem Falle. Warum?
Weil meine Bilder mit einem speziellen Hover-Effekt versehen werden sollten, der aber nur über
eine Klasse für a definiert werden kann.
Hier der Code als Muster:
<a class="zoom" href="/marktplatz/marktplatz.php?mp_Aktion=detail&mp_Segment=1&mp_Seite=1&mp_Nummer=2" title="Inseratedetails"><div><img src="http://tierschutzverein.ist-das-recht.de/marktplatz/bilder/01/2-2_j202126.pic.jpg" class="attachment-p4col wp-post-image" alt="01/2-2_j202126.pic.jpg" title="01/2-2_j202126.pic.jpg"></div></a>
Da aber der Titel als Link oder ein textlink , auch regelwerk1 nutzt, sieht dessen Code so aus:
<h3 class="title"><a class="zoom" href="/marktplatz/marktplatz.php?mp_Aktion=detail&mp_Segment=1&mp_Seite=1&mp_Nummer=2" title="Inseratedetails">Pfiffige Missy</a></h3>
Also bekommt ein Textlink auch ein <a class="zoom" verpasst, zoom benötige ich aber nur beim Bild oder Bilder.
mpSeite.htm
mpListen01Zeile.htm
mpDetail01Zeilen.htm
verwenden.
Damit bin ich aber gleich auf die Nase gefallen, da in den php Dateien wie listen.php auch HTML Code enthalten sind. Zum Beispiel:
<tr> <td> oder sogar direkte style="XXXXX" Angaben.
Ein weiteres Problem stellte ein darin enthaltener Codeaufbau dar.
Das Betrifft Bilder die als Link im Adminbereich bei der Segmentgestaltung definiert wurden.
Hier wird in den php Dateien wie folgt vorgegangen
regelwerk 1 behandelt die Links (wie diese generiert und dargestellt werden)
regelwerk 2 behandelt Bilder jedoch ist darin ein Platzhalter für Bildlinks, der vom regelwerk1 einfach eingefügt wird.
Im Grunde gut - es spart Code. Aber nicht in meinem Falle. Warum?
Weil meine Bilder mit einem speziellen Hover-Effekt versehen werden sollten, der aber nur über
eine Klasse für a definiert werden kann.
Hier der Code als Muster:
<a class="zoom" href="/marktplatz/marktplatz.php?mp_Aktion=detail&mp_Segment=1&mp_Seite=1&mp_Nummer=2" title="Inseratedetails"><div><img src="http://tierschutzverein.ist-das-recht.de/marktplatz/bilder/01/2-2_j202126.pic.jpg" class="attachment-p4col wp-post-image" alt="01/2-2_j202126.pic.jpg" title="01/2-2_j202126.pic.jpg"></div></a>
Da aber der Titel als Link oder ein textlink , auch regelwerk1 nutzt, sieht dessen Code so aus:
<h3 class="title"><a class="zoom" href="/marktplatz/marktplatz.php?mp_Aktion=detail&mp_Segment=1&mp_Seite=1&mp_Nummer=2" title="Inseratedetails">Pfiffige Missy</a></h3>
Also bekommt ein Textlink auch ein <a class="zoom" verpasst, zoom benötige ich aber nur beim Bild oder Bilder.
mpListen01Zeile.htm
Begonnen hab ich nun mit der Listendarstellung.
Ich mußte hierzu folgende Dateien ändern:
und folgende Dateien neu erstellen:
eigene style.css Dateien (nach Bedarf)
Hinweis: keine neuen Werte | css Klassen in die mpStyle.css schreiben.
Wenn Sie im Adminbereich Änderungen vornehmen, werden Ihre neuen Klassen entfernt.
In der mpSeite.htm tragen Sie im Grunde alle Code des Responsiven Grundgerüste ein.
Muster:
<link rel="stylesheet" type="text/css" href="mpStyle.css">
<link rel="stylesheet" href="styles-custom-responsive/skeleton.css" type="text/css" media="all" />
<link rel="stylesheet" href="styles-custom-responsive/base.css" type="text/css" media="all" />
<link rel="stylesheet" href="styles-custom-responsive/layout.css" type="text/css" media="all" />
<link rel="stylesheet" href="styles-custom-responsive/responsive.css" type="text/css" media="all" />
<link rel="stylesheet" href="styles-custom-responsive/custom-style.css" type="text/css" media="all" />
<link rel="stylesheet" href="styles-custom-responsive/fontello.css" type="text/css" media="all" />
<body>
<h3 align="center">Anzeigen {Segment}</h3> <!-- deaktivieren bei wegen IFRAME deaktiviert -->
<div id="wrap" class="wrap wide"> <!-- Wrap (boxed or wide)-->
<div class="band content"> <!-- CONTENT -->
<div class="container">
<!-- ++++++++++++++ Beginn Scriptausgabe ++++++++++++++ -->
{Inhalt}
<!-- +++++++++++++++ Ende Scriptausgabe +++++++++++++++ -->
</div><!-- END container -->
</div><!-- EMD CONTENT -->
</div><!-- end Wrap -->
</body>
In der Listen01zeile.htm werden dann die erforderlichen Code für die Listenansicht eingefügt.
Also wie ein einzelner Eintrag zu erscheinen hat.
Beispiel:
<div class="portfolio-thumb thumb-p4col">
{Bild}
</div>
<div class="portfolio-info info-p4col" >
<h3 class="title">{Name}</h3>
<div class="portfolio-types">{Rasse}</div>
<div class="aufmacher">{Aufmacher}</div>
<div class="portfolio-more button center">{DetailButton}</div>
</div>
jetzt werden Sie sagen, toll und wie formatiere ich jetzt die ganzen Div tr td etc die dann an Stelle des Platzhalters eingefügt werden?
Ja das ist Knibbelarbeit und nicht so toll.
Hierzu muß man dann in der mpListen.php die erforderlichen Anpassungen machen.
Beispiel
Vorher:
Zeile 67
//Daten ausgeben: $i-Index, $j-Spalte, $k-Feld
$a=array(); $nSpalten=count($aMpSpalten); $bMitID=$aMpLF[0]>0;
$X.="\n\n".'<table class="mpList" border="0" cellpadding="0" cellspacing="0">';
Nachher:
Zeile 67
//Daten ausgeben: $i-Index, $j-Spalte, $k-Feld
$a=array(); $nSpalten=count($aMpSpalten); $bMitID=$aMpLF[0]>0;
$X.="\n\n".'<ul class="portfolio p4col sixteen columns">';
Vorher:
Zeile 206
$s='<div'.$r.'><img src="'.MP_Url.$s.'" '.$aI[3].' border="0" alt="'.substr($s,strpos($s,'/')+1).'" title="'.substr($s,strpos($s,'/')+1).'" /></div>'; $sStil.='text-align:center;';
Nachher:
Zeile 206
$s='<div'.$r.'><img src="'.MP_Url.$s.'" class="attachment-p4col wp-post-image" alt="'.substr($s,strpos($s,'/')+1).'" title="'.substr($s,strpos($s,'/')+1).'" /></div>'; $sStil.='text-align:center;';
Vorhher:
Zeile 238
$X.="\n <tr>\n ".'<td class="mp'.$sCSS.'">'."\n".$sZl."\n </td>\n </tr>";
}
}
$X.="\n".'</table>';
//Navigator unter der Tabelle
Nachher:
Zeile 243
$X.="\n".' <li class="blockhight" data-type="photography">'.$sZl."\n".' </li>';
}
}
$X.="\n".'</ul>';
//Navigator unter der Tabelle
Es sind noch weitere Änderungen in der Datei notwendig und möglich.
Aber der Ansatz sollte nun klar sein.
Also weg von <table> und hin zu <ul> <li> und floaten.
Ich mußte hierzu folgende Dateien ändern:
- mpSeite.htm
- mpListen01Zeile.htm
- mpListen.php
und folgende Dateien neu erstellen:
eigene style.css Dateien (nach Bedarf)
Hinweis: keine neuen Werte | css Klassen in die mpStyle.css schreiben.
Wenn Sie im Adminbereich Änderungen vornehmen, werden Ihre neuen Klassen entfernt.
In der mpSeite.htm tragen Sie im Grunde alle Code des Responsiven Grundgerüste ein.
Muster:
<link rel="stylesheet" type="text/css" href="mpStyle.css">
<link rel="stylesheet" href="styles-custom-responsive/skeleton.css" type="text/css" media="all" />
<link rel="stylesheet" href="styles-custom-responsive/base.css" type="text/css" media="all" />
<link rel="stylesheet" href="styles-custom-responsive/layout.css" type="text/css" media="all" />
<link rel="stylesheet" href="styles-custom-responsive/responsive.css" type="text/css" media="all" />
<link rel="stylesheet" href="styles-custom-responsive/custom-style.css" type="text/css" media="all" />
<link rel="stylesheet" href="styles-custom-responsive/fontello.css" type="text/css" media="all" />
<body>
<h3 align="center">Anzeigen {Segment}</h3> <!-- deaktivieren bei wegen IFRAME deaktiviert -->
<div id="wrap" class="wrap wide"> <!-- Wrap (boxed or wide)-->
<div class="band content"> <!-- CONTENT -->
<div class="container">
<!-- ++++++++++++++ Beginn Scriptausgabe ++++++++++++++ -->
{Inhalt}
<!-- +++++++++++++++ Ende Scriptausgabe +++++++++++++++ -->
</div><!-- END container -->
</div><!-- EMD CONTENT -->
</div><!-- end Wrap -->
</body>
In der Listen01zeile.htm werden dann die erforderlichen Code für die Listenansicht eingefügt.
Also wie ein einzelner Eintrag zu erscheinen hat.
Beispiel:
<div class="portfolio-thumb thumb-p4col">
{Bild}
</div>
<div class="portfolio-info info-p4col" >
<h3 class="title">{Name}</h3>
<div class="portfolio-types">{Rasse}</div>
<div class="aufmacher">{Aufmacher}</div>
<div class="portfolio-more button center">{DetailButton}</div>
</div>
jetzt werden Sie sagen, toll und wie formatiere ich jetzt die ganzen Div tr td etc die dann an Stelle des Platzhalters eingefügt werden?
Ja das ist Knibbelarbeit und nicht so toll.
Hierzu muß man dann in der mpListen.php die erforderlichen Anpassungen machen.
Beispiel
Vorher:
Zeile 67
//Daten ausgeben: $i-Index, $j-Spalte, $k-Feld
$a=array(); $nSpalten=count($aMpSpalten); $bMitID=$aMpLF[0]>0;
$X.="\n\n".'<table class="mpList" border="0" cellpadding="0" cellspacing="0">';
Nachher:
Zeile 67
//Daten ausgeben: $i-Index, $j-Spalte, $k-Feld
$a=array(); $nSpalten=count($aMpSpalten); $bMitID=$aMpLF[0]>0;
$X.="\n\n".'<ul class="portfolio p4col sixteen columns">';
Vorher:
Zeile 206
$s='<div'.$r.'><img src="'.MP_Url.$s.'" '.$aI[3].' border="0" alt="'.substr($s,strpos($s,'/')+1).'" title="'.substr($s,strpos($s,'/')+1).'" /></div>'; $sStil.='text-align:center;';
Nachher:
Zeile 206
$s='<div'.$r.'><img src="'.MP_Url.$s.'" class="attachment-p4col wp-post-image" alt="'.substr($s,strpos($s,'/')+1).'" title="'.substr($s,strpos($s,'/')+1).'" /></div>'; $sStil.='text-align:center;';
Vorhher:
Zeile 238
$X.="\n <tr>\n ".'<td class="mp'.$sCSS.'">'."\n".$sZl."\n </td>\n </tr>";
}
}
$X.="\n".'</table>';
//Navigator unter der Tabelle
Nachher:
Zeile 243
$X.="\n".' <li class="blockhight" data-type="photography">'.$sZl."\n".' </li>';
}
}
$X.="\n".'</ul>';
//Navigator unter der Tabelle
Es sind noch weitere Änderungen in der Datei notwendig und möglich.
Aber der Ansatz sollte nun klar sein.
Also weg von <table> und hin zu <ul> <li> und floaten.
mpDetail01Zeile.htm
mpDetail01Zeile.htm ist nu der einfache Part und kann wie gewohnt in html aufgebaut werden.
mpDetail.php
wurde nur minimal Änderungen vorgenommen.
Zum Beispiel für das Erste Bild ddas als Thumb ind er Liste ist und hier nun granz groß dargestellt werden sollte
Vorher:
Zeile 143
case 'b': //Bild
$s=substr($s,strpos($s,'|')+1); $s=MP_Bilder.$sBldDir.$sId.$sBldSeg.'_'.$s; $aI=@getimagesize(MP_Pfad.$s); $w=fMpDt(substr($s,strpos($s,'_')+1,-4));
$s='<img src="'.MP_Url.$s.'" '.$aI[3].' border="0" title="'.$w.'" alt="'.$w.'" />';
Nachher
Zeile 143
case 'b': //Bild
$s=substr($s,strpos($s,'|')+1); $s=MP_Bilder.$sBldDir.$sId.$sBldSeg.'_'.$s; $aI=@getimagesize(MP_Pfad.$s); $w=fMpDt(substr($s,strpos($s,'_')+1,-4));
// $s='<img src="'.MP_Url.$s.'" '.$aI[3].' border="0" title="'.$w.'" alt="'.$w.'" />';
$s='<img src="'.MP_Url.$s.'" class="bigimagedetail" border="0" title="'.$w.'" alt="'.$w.'" />';
Das ermöglicht nun die Größensteuerung des Bildes via css und kann entsprechend Responsiv definiert werden.
Feste Größe raus '.$aI[3].'
css Klasse rein class="bigimagedetail"
border hätte man auch noch raus nehmen können.
Entsprechend muß man natürlich für Drucken Mails senden etc weiter vorgehen und Anpassungen vornehmen, WENN MAN WILL.
mpDetail.php
wurde nur minimal Änderungen vorgenommen.
Zum Beispiel für das Erste Bild ddas als Thumb ind er Liste ist und hier nun granz groß dargestellt werden sollte
Vorher:
Zeile 143
case 'b': //Bild
$s=substr($s,strpos($s,'|')+1); $s=MP_Bilder.$sBldDir.$sId.$sBldSeg.'_'.$s; $aI=@getimagesize(MP_Pfad.$s); $w=fMpDt(substr($s,strpos($s,'_')+1,-4));
$s='<img src="'.MP_Url.$s.'" '.$aI[3].' border="0" title="'.$w.'" alt="'.$w.'" />';
Nachher
Zeile 143
case 'b': //Bild
$s=substr($s,strpos($s,'|')+1); $s=MP_Bilder.$sBldDir.$sId.$sBldSeg.'_'.$s; $aI=@getimagesize(MP_Pfad.$s); $w=fMpDt(substr($s,strpos($s,'_')+1,-4));
// $s='<img src="'.MP_Url.$s.'" '.$aI[3].' border="0" title="'.$w.'" alt="'.$w.'" />';
$s='<img src="'.MP_Url.$s.'" class="bigimagedetail" border="0" title="'.$w.'" alt="'.$w.'" />';
Das ermöglicht nun die Größensteuerung des Bildes via css und kann entsprechend Responsiv definiert werden.
Feste Größe raus '.$aI[3].'
css Klasse rein class="bigimagedetail"
border hätte man auch noch raus nehmen können.
Entsprechend muß man natürlich für Drucken Mails senden etc weiter vorgehen und Anpassungen vornehmen, WENN MAN WILL.
FAZIT | Überlegungen Wünsche
Ich könnte nach einiger Knibbelarbeit und mit sicherheit nicht so sauberen Code ein Responsives Design erstellen.
Listen und Details werden auch auf einem Smartphone gut dargestellt.
Wenn ich php programmieren oder auch nur den Code verstehen würde, hätte ich mich daran versucht, alle <table> <td> <tr> und manuellen style="" raus zu nehmen und via css Klassen zu ersetzen.
Aber zwei Versuche dahingehend gingen in die Hose, da ich nicht verstanden habe, wie die einzelnen Code geschieben werden. ' codezeilen' oder .'codezeile'
Aber ein versierter Progger wird das schon hinkriegen.
Ja welche Wünsche hab ich den? Nun zunächst das das Marktplatz-Script auch für nächste
PHP Versionen uns erhalten bleibt.
Listen und Details werden auch auf einem Smartphone gut dargestellt.
Wenn ich php programmieren oder auch nur den Code verstehen würde, hätte ich mich daran versucht, alle <table> <td> <tr> und manuellen style="" raus zu nehmen und via css Klassen zu ersetzen.
Aber zwei Versuche dahingehend gingen in die Hose, da ich nicht verstanden habe, wie die einzelnen Code geschieben werden. ' codezeilen' oder .'codezeile'
Aber ein versierter Progger wird das schon hinkriegen.
Ja welche Wünsche hab ich den? Nun zunächst das das Marktplatz-Script auch für nächste
PHP Versionen uns erhalten bleibt.
Verrückte Nutzung des Marktplatz-Scriptes
Ja ja ja ja ich gebe es zu, manchmal bin ich gespinnert und will das Unmögliche.
Was ist das? Integration des Marktplatz-Scriptes in meinem CMS.
IFRAME geht aber nicht wenn es Responsive sein soll.
Hier hatte ich eine IFRAME autohight Lösung
Die beschriebene Variante mit include - die sorry Herr Hummel , kann man vergessen.
Sichere CMS System erlauben kein include mehr.
So auch bei meinem CMS KAJONA. Ein hervorragendes und schönes CMS . Sehr gut durchdacht und mächtig.
Also was machen? Da ich einen der Entwickler von Kajona kenne, habe ich mich hilfesuchend an Ihn gewand.
Mit vollem Erfolg und meinen herzlichsten Dank an Herrn Stefan Idler.
Nun können alle Tierheim-Sites mit Kajona umgesetzt werden und das Marktplatz-Script erscheint wie aus einem Guss. Und dann auch noch RESPONSIVE. Was will man mehr..
Was ist das? Integration des Marktplatz-Scriptes in meinem CMS.
IFRAME geht aber nicht wenn es Responsive sein soll.
Hier hatte ich eine IFRAME autohight Lösung
Die beschriebene Variante mit include - die sorry Herr Hummel , kann man vergessen.
Sichere CMS System erlauben kein include mehr.
So auch bei meinem CMS KAJONA. Ein hervorragendes und schönes CMS . Sehr gut durchdacht und mächtig.
Also was machen? Da ich einen der Entwickler von Kajona kenne, habe ich mich hilfesuchend an Ihn gewand.
Mit vollem Erfolg und meinen herzlichsten Dank an Herrn Stefan Idler.
Nun können alle Tierheim-Sites mit Kajona umgesetzt werden und das Marktplatz-Script erscheint wie aus einem Guss. Und dann auch noch RESPONSIVE. Was will man mehr..