Marktplatz-Script fürs Smartphone anpassen

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.

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&amp;mp_Segment=1&amp;mp_Seite=1&amp;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&amp;mp_Segment=1&amp;mp_Seite=1&amp;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:
  • 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.

 

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.

 

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..