Beiträge der Kategorie TYPO3

Bilder in tt_news vertikal und horizontal zentrieren

Gewünscht ist, dass bei den dargestellten Einträgen aus tt_news die Bilder verikal und horizontal zentriert werden. Um das Bild herum befindet sich ein Rahmen einer festen Größe mit Schlagschatten. Die Bilder sollen daher wie Polaroids aussehen. Falls kein Bild da ist, dann soll der Text normal über die gesamte Breite fließen.

Wie das geht, wird hier am Beispiel des “latest”-Abschnitts gezeigt. Zunächst modifiziere ich das Template so, dass nur noch das notwendige drinsteht:


###NEWS_IMAGE###

###NEWS_TITLE###

###NEWS_SUBHEADER### ###MORE###



Das reicht natürlich nicht, um das Bild so auszurichten, wie es gewünscht ist. Deswegen müssen noch ein paar Hilfs-divs her, diese dürfen aber auch nur dann da sein, wenn auch ein Bild da ist. Daher muss noch ein wenig am Setup geändert werden. Also wird ins TypoScript Setup der Hauptseite die folgende Zeile eingefügt:

plugin.tt_news.displayLatest.imageWrapIfAny =

|

Falls das Bild als existiert, werden um das Bild herum einige divs gewrappt, diese divs werden dazu benutzt, um das Bild auszurichten. Der Container für das Bild (news-latest-image) wird links positioniert und das Hintergrundbild wird eingefügt. Padding kann da nicht hinzugefügt werden, denn sonst würde der Text ohne Bild nicht über den kompletten Bereich fließen.
Im ersten Hilfs-Wrap wird das padding definiert, damit es keine Browser-Unterscheidung beim Box-Modell geben muss. Im Hilfs-Wrap 2 werden nun alle wichtigen Eigenschaften definiert: die Größe, die Ausrichtung und die Eigentschaft display wird auf table-cell gesetzt. Denn (so die Erklärung) nur innerhalb einer Tabelle können die Inhalte auch vertikal zentriert werden.

Wenn der IE nicht wäre, dann wäre es so weit fertig. Leider zentriert der IE die Bilder immer noch nicht mittig. Die Hilfe gibt es auf der tollen cssplay.co.uk Seite. Da wird das aber über eine zusätzliche Condition gemacht (siehe Quelltext der Seite). Nachdem ich die zwei wraps und die Definition eingebaut habe wie im Beispiel, hat es ohne zusätzliche Abfragen in IE5, IE6, FF und Opera funktioniert.


.news-latest-image {
float: left;
background: transparent url(‘../gfx/tt_news/latest_bg_68x68.gif’) no-repeat;
}
.news-image-helper {
padding: 5px 10px 25px 5px;
}
.news-image-helper2 {
width: 58px;
height: 58px;
display: table-cell;
text-align: center;
vertical-align: middle;
background-color: white;
}

.news-latest-image .edge {
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
.news-latest-image .container {
text-align:center;
width:100%;
display:inline-block;
vertical-align:middle;
}

Geschrieben in TYPO3 | Kommentare deaktiviert für Bilder in tt_news vertikal und horizontal zentrieren

Dateipfad ermitteln

Im Setup einer Extension kann man Dateipfade mit EXT definieren, damit je nach Installationsart die Datei trotzdem gefunden werden kann. Wie löst man diese Schreibweise nun auf.

In Constants werden zwei Beispielvariablen definiert, von der ersten Datei soll der Pfad ermittelt werden, von der zweiten braucht man direkt den Inhalt.

plugin.np_sudoku {
# cat=plugin.np_sudoku/file/1; type=file[txt]; label=Sudoku File: a text-file which contains all the sudoku games
sudokuFile = EXT:np_sudoku/res/sudoku.txt
# cat=plugin.np_sudoku/file/2; type=file[html,htm,tmpl,txt]; label=Rules File: a file which contains the preformatted rules for playing sudoku
rulesFile = EXT:np_sudoku/res/rules.html
}

Im Setup liest man die Konstanten aus:

plugin.tx_npsudoku_pi1 {
# name of the sudoku file
sudokuFile = {$plugin.np_sudoku.sudokuFile}
# name of the rules file
rulesFile = {$plugin.np_sudoku.rulesFile}
}

Die Werte stehen in der Klasse tx_npsudoku_pi1 im $conf zur Verfügung. Von der ersten Datei braucht man nur den Dateinamen:

$filename = $GLOBALS[‘TSFE’]->tmpl->getFileName($this->conf[‘sudokuFile’]);

Von der zweiten Datei braucht man den Inhalt:

$filecontent = $this->cObj->fileResource($this->conf[‘rulesFile’]);

Geschrieben in TYPO3 | Kommentare deaktiviert für Dateipfad ermitteln

Spinnenfutter (robots.txt) für Typo3

Ich denke, das könnte eine nette robots.txt für Typo3 Installationen sein.
Man verbietet die Source-Ordner, erlaubt aber fileadmin und den uploads, sowie den Extension-Ordner. Um Vorschläge wird gebeten.

User-agent: *
Disallow: /typo3
Disallow: /typo3_src
Disallow: /t3lib

Keine Bilder im sk_calender

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’] = ‘

‘.$this->myCobj->IMAGE($picConf[‘image.’]).’

‘;
$data[‘image’].= ‘

‘.$this->myCobj->IMAGE($picConfBig[‘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

Geschrieben in TYPO3 | Kommentare deaktiviert für Keine Bilder im sk_calender

indexed_search: Template ohne Tabellen

Ich hasse unötige Tabellen, daher hier ein Template für indexed_search komplett ohne table, br oder p. Alles nur span oder div, daher kann man auch alles per CSS formatieren.

Hier ein Auszug aus dem Stylesheet, wie es z.B. sein könnte, das Ergebnis gibts auf derdrink.net

/*** indexed_search ***/
.tx-indexedsearch-searchbox form {
margin: 0;
padding: 0;
}
.tx-indexedsearch-searchbox .formline {
clear: both;
padding-bottom: 10px;
overflow: auto;
}
.tx-indexedsearch-searchbox label {
width: 150px;
float: left;
}
.tx-indexedsearch-searchbox input {
float: left;
border: 1px solid #116aae;
}
.tx-indexedsearch-searchbox-button {
width: 150px;
border: 1px solid #116aae;
background-color: #ffffff;
color: #116aae;
}
.isearch_linkMode {
display: block;
float: left;
padding: 2px 10px;
}
.tx-indexedsearch-rules {
position: relative;
padding: 10px 0;
}
.tx-indexedsearch-rules h2 {
font-weight: normal;
font-size: 100%;
padding: 0;
margin: 0;
}
.tx-indexedsearch-rules a .isearch-rules-text {
display: none;
text-decoration: none;
color: #116aae;
}
.tx-indexedsearch-rules a:hover .isearch-rules-text{
display: block;
text-decoration: none;
position: absolute;
font-weight: normal;
top: 0;
left: 100px;
background-color: #ffffff;
padding: 10px;
}
.tx-indexedsearch-whatis {
padding-bottom: 10px;
}
.tx-indexedsearch-sw {
font-weight: bold;
}
.tx-indexedsearch-browsebox {
padding-bottom: 10px;
}
.tx-indexedsearch-res .result-row {
margin: 10px 0 20px 0;
}
.tx-indexedsearch-icon {
float: left;
display: block;
}
.tx-indexedsearch-result-number {
float: left;
display: block;
}
.tx-indexedsearch-title {
float: left;
display: block;
}
.tx-indexedsearch-percent {
float: right;
display: block;
}
.tx-indexedsearch-descr {
clear: both;
display: block;
}
.tx-indexedsearch-info {
clear: both;
display: block;
}
.tx-indexedsearch-path {
display: block;
}

Geschrieben in TYPO3 | Kommentare deaktiviert für indexed_search: Template ohne Tabellen

sk_calendar: Archive view

Bei der Archive view im sk_calendar (VCE) wollte ich eigentlich nur, dass die vergangenen Events wie in einer Liste angezeigt werden. Stattdessen bekam ich einen Button und eine komische Ausgabe. Ich habe einen Teil des Quelltextes geändert, damit meine Anforderungen erfüllt werden.

Die Variable Startdate wird auf 5 Jahre in der Vergangenheit gesetzt, die Variable Enddate auf den aktuellen Tag und damit die Ansicht so gerendert wird, wie die Liste, wird die Variable manuell neu gesetzt (ab Zeile 231).

case ‘archive’:
$this->conf[‘general’][‘view’] = ‘list’;
$offset_temp = date(‘m-d-Y’,$offset);
$offset_temp = explode(‘-‘,$offset_temp);
if (!$filters[‘startdate’]) $filters[‘startdate’] = mktime(0,0,0,$offset_temp[0],$offset_temp[1],$offset_temp[2]-5); // 5 years back
if (!$filters[‘enddate’]) $filters[‘enddate’] = $offset;
/*if ($filters[‘monthfilter’]) {
$filters[‘startdate’] = $filters[‘monthfilter’];
$offset_temp = date(‘m-d-Y’,$filters[‘monthfilter’]);
$offset_temp = explode(‘-‘,$offset_temp);
$filters[‘enddate’] = mktime(0,0,0,$offset_temp[0]+1,$offset_temp[1],$offset_temp[2]);
$offset = $filters[‘monthfilter’];
} else {
if (!$filters[‘startdate’]) $filters[‘startdate’] = 1; // show us everything (0 would disable filter)
$offset_temp = date(‘m-d-Y’);
if (!$filters[‘enddate’]) $filters[‘enddate’] = mktime(0,0,0)-1; // … until not quite today
}*/
break;

Und wenn man möchte, dass diese Liste auch noch umgekehrt sortiert wird – das letze Event zuerst – da kann man manuell die Sorting Variable setzen:


$this->conf[‘general’][‘view’] = ‘list’; // war schon da
$this->conf[‘sorting’] = ‘update’; // steht für “up” und “date”

Geschrieben in TYPO3 | Kommentare deaktiviert für sk_calendar: Archive view

Tabbed Content

Auf einer Seite befand sich zu viel Content, um eine Aufteilung auf mehrere Seite und Scrolling zu vermeiden, entstand die Idee den Content in eine Art Tabs anzuzeigen. Der Content sollte weiterhin in Typo3 gepflegt werden können und einige der Elemente sollten weiterhin dem Flow der Seite folgen.

Die Elemente, die in einen Mini-Tab-Browser gepackt werden sollte, werden in Typo3 mit einem Rahmen “Indent”/”Einzug” versehen. Die normalen Content Elemente werden nicht in den Browser gepackt.

Das Skript wird in den Header eingebunten, und am Ende der Seite wird die Funktion aufgerufen. Die Funktion sucht das Element mit der id “content” und überprüft alle darin befindlichen Elemente, ob sie den Klassennamen “csc-frame-indent” haben. Ich musste vorher im Template einstellen, dass nur csc-frame-indent verwendet wird. Dann werden die Elemente, die diese Voraussetzungen erfüllen, mit einer Id versehen, der Titel des Elementes wird extrahiert und auch in ein Array gepackt. Das Array wird dann abgearbeitet, es wird eine Navigation erstellt und an den Anfang des Content-Elementes gepackt. Bei Rollover wird das vorherige Element ausgeblendet und das neue eingeblendet.

Zu beachten: im HTML-Template muss der Content in <div id=”content”> eingefügt werden. Jedes Content-Element muss in einem Div mit dem Klassennamen “content-element” gewrappt werden. Und der Wrap für den Content-Rahmen muss auch geändert werden. Wie das geht, steht weiter unten im TypoScript Abschnitt.

Der Quelltext sollte nach den Änderungen etwas so strukturiert sein:

Irgenein Content

[… weitere divs]

Hier der Link zum Anschauen und darunter der Quelltext, zunächst das TypoScript Template und dann der JavaScript Teil.

page.headerData.20 = TEXT
page.headerData.20.value =
page.99 = HTML
page.99.value =
# damit jedes Content Element in ein div gewrappt wird
tt_content.stdWrap.dataWrap =

|

# jedes Content Element mit Rahmen “Indent” oder “Einzug” wird so gewrappt
tt_content.stdWrap.innerWrap.cObject.10.value =

|

var currentlyShowing = -1;
// array with titles, that should be linked
var titleArray = Array();
// array with indices of the elements, that should be display tabbed
var indexArray = Array();

function displayTabbedContent() {
var contentElement = document.getElementById(“content”);
contentElement.style.position = “relative”;
var contentChildren = contentElement.childNodes;
var counter = 0;
for(var i=0;i‘;
naviHTML+= ‘‘+titleArray[i]+’