Die Extension sk_calender ermöglicht es theoretisch, den einzelnen Beiträgen Bilder zuzuweisen. Das Problem ist, dass diese im FE nicht als Bilder dargestellt werden, sondern nur als Pfad zur Datei.
Zunächst mal hier die Möglichkeit, anstatt Bildpfad tatsächlich ein Bild auszugeben. Die Änderung muss in der Datei pi1/class.tx_skcalnedar_listview.php in der Funktion parseCalendar vorgenommen werden ungefähr ab Zeile 152. Da findet sich eine while-Schleife, die die Einträge in der Datenbank abarbeitet. In $data steht somit ein einzelner Datensatz.
if ($clean_arr) { // we do have entries
while (list(,$data) = each($clean_arr)) {
// change
$picConf = array();
$picConf[‚image.‘][‚file‘] = ‚uploads/tx_skcalendar/‘.$data[‚image‘];
$picConf[‚image.‘][‚file.‘][‚maxW‘] = 100;
$picConf[‚image.‘][‚file.‘][‚maxH‘] = 100;
if($data[‚image‘] != „“) {
$data[‚image‘] = $this->myCobj->IMAGE($picConf[‚image.‘]);
}
$data[‚description‘] = …
}
Damit wird ein Bild gerendert, dessen Ränder maximal 100px groß sind.
Ich bin mir grade nicht sicher, ob dieser Teil auch von mir stammt. Damit wird die Beschreibung in der Ansicht LIST auf 100 Zeichen gekürzt.
$data[‚description‘] = $this->myCobj->stdWrap($this->myCobj->crop($data[‚description‘],’100| […]|1′),$this->conf[‚general‘][‚rtefield_stdWrap‘]);
Bei derdrink.net hab ich es so weit erweitert, dass per Rollover eine große Version des Bildes angezeigt wird. Dazu füge ich eine zusätzliche $picConf ein, um das Bild größer vorbereiten zu lassen, und wrappe dann beide Bilder in ein a-Tag, um dann per CSS die Rollover Funktionalität zu implementieren. Es mag der Einwand kommen, dass man kein a-Tag braucht, um in CSS hover zuverwenden, manche Browser sind nur äußerst zickig, wenn es darum geht, andere Tags als a mit hover zu versehen.
Dieser Code erweitert das obige Beispiel:
$picConf = array();
$picConf[‚image.‘][‚file‘] = ‚uploads/tx_skcalendar/‘.$data[‚image‘];
$picConf[‚image.‘][‚file.‘][‚maxW‘] = 100;
$picConf[‚image.‘][‚file.‘][‚maxH‘] = 100;
$picConfBig = array();
$picConfBig[‚image.‘][‚file‘] = ‚uploads/tx_skcalendar/‘.$data[‚image‘];
$picConfBig[‚image.‘][‚file.‘][‚maxW‘] = 560;
$picConfBig[‚image.‘][‚file.‘][‚maxH‘] = 560;
if($data[‚image‘] != „“) {
$data[‚image‘] = ‚
‚;
$data[‚image‘].= ‚
‚;
}
// till then
$data[‚description‘] = …
In CSS muss man dann folgendes ergänzen:
a.calendar-image-link {
position: relative;
}
a.calendar-image-link .calendar-image-big {
display: none;
position: absolute;
}
a.calendar-image-link .calendar-image-small {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
a:hover.calendar-image-link .calendar-image-big {
display: block;
}
Und das Ergebnis in Anwendung sieht so aus: DER DRINK Veranstaltungskalender
Neueste Kommentare