Hier nun eine verbesserte Version des Bootstrap Carousels. Diese Version zeigt alle Bilder an, die in den Seiten-Eigenschaften definiert sind. Zusätzlich werden die Metainformation des jeweiligen Bildes dargestellt. Ich habe mich dabei an der Vorlage unter Blog Teamgeist-Medien orientiert.

 lib.field_headerimage = COA

 lib.field_headerimage {
  wrap (
     <div id="skiplink">
       <a class="skip" title="Direkt zur Navigation springen" href="#navigation">Zur Navigation springen</a><br>
       <a class="skip" title="Direkt zum Content springen" href="#content">Zum Content springen</a>
     </div>
     <div id="blogo">
        <a href="/"><img src="fileadmin/user_upload/Logo_trans.png" /></a>
     </div>
     <div id="hslider" class="carousel slide carousel-fade" data-ride="carousel"  data-interval="5000">|</div>
  )
  #Hier hole ich die Bilder aus den Seiteneigenschaften(Ressourcen/Media) um die Navigation zu erstellen.
  10 = FILES
  10 {
    stdWrap.wrap = <ol class="carousel-indicators">|</ol>
    references {
      data = levelmedia:-1, slide
      treatIdAsReference = 1
    }
    renderObj = TEXT
    renderObj {
      wrap = <li data-target="#hslider" data-slide-to="|" class="active"></li>|*|<li data-target="#hslider" data-slide-to="|"></li>
      value = {register:FILE_NUM_CURRENT}
      insertData = 1
    } #Ende renderObj
  } #Ende 10

  #Hier nochmal das gleiche Spiel nur mit Ausgabe der Bilder
  20 = FILES
  20 {
    stdWrap.wrap = <div class="carousel-inner">|</div>
    references {
      data = levelmedia:-1, slide
      treatIdAsReference = 1
    }
    renderObj = COA
    renderObj {
      wrap = <div class="item active">|</div>|*|<div class="item">|</div>
      3 = IMAGE
      3 {
        stdWrap.wrap = |
        stdWrap.required = 1
        file.import.data = file:current:originalUid
        # Setze den Link der im Bild eingestellt ist um das Bild
        stdWrap.typolink.parameter.data = file:current:link
        altText.data = file:current:alternative
        titleText.data = file:current:alternative
      } #Ende 3
      # Hier Titel und Beschreibung für das Bild, wird auch vom Link umgeben.
      6 = COA
      6 {
        # alles nur, wenn Titel gesetzt ist
        if.isTrue.data = file:current:title
        wrap = <div class="carousel-caption">|</div>
        stdWrap.required = 1
        stdWrap.typolink.parameter.data = file:current:link
        4 = TEXT
        4.wrap = <h3>|</h3>
        4.data = file:current:title
         
        8 = TEXT
        8.wrap = <p>|</p>
        8.data = file:current:description 

      } #Ende 6
    } #Ende renderObj
  } #Ende 20
} #Ende headerimage

Letztendlich wird hier ein Carousel genau nach Beschreibung aufgebaut. Im Wrap ein paar vorbereitende Zeilen (inclusive überlagertem Logo) und dann der Kopf des Carousels mit der Geschwindigkeitsangabe und der Klasse zum Starten.

Danach wird dann unter 10 der Carousel-Indicator aufgebaut, dabei geht Typoscript durch alle Bilder. Wenn man den Indicator nicht haben möchte, dann kann man den ganzen 10er Block einfach weglassen.

Anschließend werden unter 20 die Bilder eingebunden und ggf. mit den Metadaten versehen.

Veröffentlicht unter typo3.

Für ein aktuelle Projekt brauchte ich einen Bilder-Slider im Header. Meine sonstigen Slider sind eher als Content-Elemente gedacht. Daher habe ich mich mit dem Bootstrap Carousel beschäftigt.

Der Slider soll mit dem Bildern aus der Seiteneigenschaft Resourcen arbeiten. Zur Vereinfachung gehe ich einfach davon aus, dass er die ersten drei Bilder benutzt. Bei Gelegenheit muss ich mir dann auch einmal Gedanken über eine Schleifenstruktur durch die vorhandenen Bilder machen.

Mit einer festen Zahl ist die Lösung recht einfach:

 lib.field_headerimage = COA
   lib.field_headerimage.10 = TEXT
   lib.field_headerimage.10.value (
     <div id="skiplink">
     <a class="skip" title="Direkt zur Navigation springen" href="#navigation">Zur Navigation springen</a><br>
     <a class="skip" title="Direkt zum Content springen" href="#content">Zum Content springen</a>
     </div>

    <div id="blogo">
     <a href="/"><img src="fileadmin/user_upload/Logo_trans.png" /></a>
    </div>
    <div id="hslider" class="carousel slide carousel-fade">
    <div class="carousel-inner">
   )

   lib.field_headerimage.20 = IMG_RESOURCE
   lib.field_headerimage.20 {
    file.import.data = levelmedia:2, slide
    file.treatIdAsReference = 1
    file.import.listNum = 0
    stdWrap.wrap = <div class='item active'><a href='/'><img src='|' style='width: 100%;' /></a></div>
   }

   lib.field_headerimage.30 = IMG_RESOURCE
   lib.field_headerimage.30 {
     file.import.data = levelmedia:2, slide
     file.treatIdAsReference = 1
     file.import.listNum = 1
     stdWrap.wrap = <div class='item'><a href='/'><img src='|' style='width: 100%;' /></a></div>
   }

   lib.field_headerimage.40 < lib.field_headerimage.30 
   lib.field_headerimage.40.file.import.listNum = 2
 
   lib.field_headerimage.90 = TEXT
   lib.field_headerimage.90 {
   value = {$styles.content.hspeed}
   wrap (
     </div></div>
     <script type='text/javascript'>$(document).ready(function(){
     $("#hslider").carousel({interval: |});
    });</script>
  )
}

Im ersten Textbereich werden ein paar Standars-Zeilen generiert und dann der Kopf des Carousels definiert. Über das Javascript im letzten Block wird das Carousel aktiviert. Grundsätzlich kann man das Carousel über Javascript oder folgenden Datenblock aktivieren:

<div id="hslider" class="carousel slide carousel-fade" data-ride="carousel" data-interval="5000">

Ich habe die Version per Javascript benutzt, einfach weil sich das aus meiner Vorlage so ergab und mir nicht klar war, ob das auch mit dem Fade funktioniert. Bei Gelegenheit werde ich aber auf die andere Variante ohne Javascript umstellen.

Normalerweise scrollen die Bilder, mit dem Fade-Effekt kommt es zu einer weicheren Überblendung.

 

Veröffentlicht unter typo3.

Für meine Typo3-Erweiterung nettgrids habe ich ein Accordion-Element (Bootstrap Collapse) erstellt. Für ein Projekte wollte ich jetzt erreichen, dass über einen Link jeweils der passende Tab geöffnet wird.

Nach etwas Experimentieren mit Anregung von https://stackoverflow.com/questions/22254248/bootstrap-3-expand-accordion-from-url#answer-33444574 bin ich zu folgendem Javascript gekommen:

<script type="text/javascript"> $("a").click(function () {     
  function show_tab(){
   if(location.hash != null && location.hash != "")
   {         $('.collapse').removeClass('in');
             $(location.hash + '.collapse').collapse('show');     
   }
    }
    window.setTimeout(show_tab, 100);
  }); 
</script>

Das Script kann man einfach in ein HTML-Element vor dem Accordion packen.

Im vorliegenden Listing wird die Javascript-Funktion gestartet, wenn auf einen Link auf der Seite geklickt wird. Man könnte es auch an andere Ereignisse koppeln.

In der Funktion show_tab wird überprüft, ob ein Anker-Links vorhanden ist. Wenn ja, dann wird der aktuelle Tab geschlossen und der Zieltab geöffnet. Um die Funktion herum liegt eine Funktion zur Verzögerung. Ohne Verzögerung wäre der neun Link mit dem Anker-Ziel noch aktuell und der Aufruf käme zu früh. Die Verzögerung ist hier auf 0,1 Sekunden eingestellt.

Veröffentlicht unter typo3.

Bei einem Typo3-Projekt sollten die Seiten jeder Hauptrubrik unterschiedliche Farben bekommen. Dafür kann man mit den Conditions von Typo3 schnell eine Lösung basteln.

In der Typoscript setup habe ich am Ende die folgenden Zeilen ergänzt:
 
 # 21 = Schulprofil
 [PIDinRootline = 21]
  page.bodyTagAdd = class="schulprofil"
 [global]
 
 # 31 = Schülerinnen+Schüler
 [PIDinRootline = 31]
  page.bodyTagAdd = class="schueler"
 [global]

...

Es handelt sich hier um bedingte Anweisungen (Conditions) in Typoscript. Die Zahlen sind jeweils die Seitennummern (PID) der ersten Seite einer Rubrik.

Wenn die jeweilige (Seiten-)Nummer in der rootline auftaucht, also auch in der Brotkrumenleiste stehen würde, dann ist die aktuelle Seite eine Unterseite (oder auch die Seite selber).

Dann wird der Body-Tag der Seite um einen Klassenbezeichner erweitert. Auf diese Klasse kann man dann im CSS Bezug nehmen:

.schulprofil #footer, .schulprofil #spalte-links, .schulprofil .breadcrumb {
   background-color: #ebd1d1;
 }

Hier werden also drei Elemente anhand der bedingten Klassenzuordnung gestaltet.

 

Nützliche Links:

Meine Schülerfirma Netthelp betreut eine Reihe von Kunden, die ihre Domains bei Domainfactory liegen haben. Wenn bei Netthelp ein Serverwechsel ansteht, dann taucht immer wieder das Problem auf, dass wir die Zugangsdaten der Kunden brauchen. Der letzte Zugriff auf die Domainverwaltung ist dann zum Teil schon mehrere Jahre her und die Zugangsdaten sind nirgends mehr im Zugriff. Dieses Problem trat bei den aktuellen Umstellungen massiv auf, da DF die Regeln für gültige Passwörter geändert hat und ungültige Passwörter dann deaktiviert hatte.

Unser erster Ansatz dieses Problem zu Lösen war eine Cluster-IP bei Strato. Diese IP ist relativ teuer 9,99€ im Monat und für uns nahezu nutzlos, da sie an einen Server-Vertrag gebunden ist. Wenn wir diesen Server wechseln, dann ändert sich auch die Cluster-IP.

Der einzige Ansatz der uns (Dank an Lukas Thiel) jetzt noch einfällt ist eine Domain-Weiterleitung auf eine Netthelp-Subdomain. Dabei muss man ein kleines bisschen tricksen, weil der Grund-Eintrag für linux-diskless.de keine cname sein darf, sondern ein A-Record erwartet wird. Der Trick besteht darin den Eintrag auf Domainfactory zu belassen und dann dort eine Header-Weiterleitung auf www.linux-diskless.de einzurichten. Der Eintrag für „www“ und sogar der für „*“ darf dann ein cname sein.

Für den MX-Eintrag wird ebenfalls linux-diskless.netthelp.de genutzt und keine Subdomain der jeweiligen Domain. Ein MX-Record muss in erster Instanz auf einen A-Record und darf nicht auf einen cname-Record verweisen.

Der einzige Schönheitsfehler besteht in der zwingenden Weiterleitung auf www.

Als Beispiel soll hier die Domain linux-diskless.de dienen:

  1. Ich lege einen A-Record linux-diskless.netthelp.de an, der auf die gewünschte Server-IP zeigt
  2. Nun gehe Ich zur Domain-Verwaltung von linux-diskless.de und lege unter Domain-Einstellungen eine Weiterleitung auf www.linux-diskless.de an (http:// oder wenn konfiguriert besser https://.
  3. Dann folgen die Verweise auf die Netthelp-Subdomain:

Für zukünftige Serverwechsel müssen wir jetzt nur noch den Eintrag für die Netthelp-Subdomain ändern Ein Zugriff auf den DF-Account des Kunden ist nicht mehr notwendig.

Weitere Informationen unter:

Bei einem Serverwechsel taucht immer wieder das Problem auf, dass man auch vorhandene Mailman-Listen umziehen möchte. Der Vorgang ist eigentlich ganz einfach. Die Beschreibung geht davon aus, dass Mailman auf dem Zielrechner bereits eingerichtet und funktionsfähig ist.

Im ersten Schritt müssen die Listen-Verzeichnisse aus den Ordnern

/var/lib/mailman/archives/private/
/var/lib/mailman/lists/

kopieren. Für jede Liste gibt es in den Ordnern ein gleichnamiges Verzeichnis und in dem Archivordner noch jeweils eines mit der Extension .mbox. Diese Verzeichnisse werden einfach auf den neuen Server kopiert und dem richtigen Eigentümer übereignet. Unter Ubuntu gehören die Dateien in der Regel lists.list und die übergeordneten Verzeichnisse root.list.

Die Eigentümer müssen jeweils noch richtig gesetzt werden.

Dann geht es noch an zwei Dateien im Verzeichnis data:

aliases
virtal-mailman

Hier finden sich für jede Liste mehrere Zeilen mit den Weiterleitungen. Die benötigten Zeilen holt man sich vom alten Server und hängt sie an die Dateien auf dem neuen Server an. Am Ende müssen die entstandenen Dateien noch in das benutzte Datenbank-Format umgewandelt werden:

/usr/lib/mailman/bin/genaliases

oder man wartet bis mailman das selber macht.

Danach kann man dann vorsichtshalber mailman neu starten.

Falls es Probleme mit der URL für die Liste gibt, so ist wichtig zu wissen, dass die Listenkonfiguration in der Datei:

/var/lib/mailman/lists/<listenname>/config.pck

steckt. Diese Datei kann man z.B. mittels

withlist -l -r fix_url <listname> -u mailman.yyy.com

bearbeiten.

 

Weitere Hinweise unter:

Bei kleinen Grafiken ist der Verwaltungsaufwand beim Laden relativ groß, verglichen mit dem Datenvolumen. Hier bietet es sich an die Grafiken in eine Data-URL umzuwandeln, die direkt im Seitenquelltext angegeben wird.

Gegeben sei die folgende Grafik <img src=“sidebar_more.png“>


Ihre Größe beträgt hier 627 Bytes, was schon relativ viel ist. Mittels:

php -r "echo base64_encode(file_get_contents('sidebar_more.png'));"

wird daraus eine Zeichenkette aus 836 Zeichen, die direkt per Copy&Paste in den Link integriert werden kann (der Teil nach dem Komma):

 <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAMgAAAAaCAIAAAEKy7R7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhVJREFUeNpi1IqewEAlwPLz2yeqmfXt01uqmZWqdYBaZgEEEOOgCy8erh9fvnFQJ7zA7vlKzfACCCBG9fAuhsEHWL5/fj94XNORZ1kx6TgotERt0gZhaAEEEDUTPTUj8e+fX4PRWX9+/RgkTrmzrlYlqBnqrN8/vw+eQOJg+fD5KzsobUk65w/KSBxMoYVwVqbhyUHoLIAAYtSM7GMYBcQmrd8/RkNhaOfDAQf3NjUByaqp01bsfIEIrN8/v40GDSawSy6+/4QRPWX9Hk1Z2MCtu4O7TTP4AUAADdLm8iAt4P//+zcaCsQG1r9/f0ZDgejA+jsaWKOBRQFoyzbZefzywXM/MQLrz+/R0EEDf//8nVtT9u/fP5WABpTA+juasrCA/0BsHFv69y87StNBxq14NGzQgLUR9+Vb7z99YUPPhqMpCxMcOv2RgYGJgeHPaJk1WhuOBtagC6xsk7OjoUAkAAgwFs2o/tFQGAW0GHT4OxoKo4AGdeHoAM0ooEnC+jOasEYBUcBQneH5m+9fvjN8+cY52nofBVQDgQ7GkW4+QMbxK6eL+9d9+8Hw+SsHzoT19+/ogMMoIA78/w+hLXVMd0/RLOyfuuv4ZzxV4WjCGgVEAWYmpp+/foSWN9978g1zABkNMEq7FI4G2SigfuN9tCocBbTpFY423kfB6HDDKBgyCSvL+PRoKIwCqgOm">

Und hier als Data-Image eingebunden:

Damit entfällt das zusätzliche Laden der Datei.

Owncloud geht sehr großzügig mit gelöschten Dateien um. Die werden in einen Papierkorb-Ordner verschoben und normalerwise nur dann gelöscht, wenn Speicherplatz knapp wird.

Man kann aber einen oder alle Papierkorb-Ordner von der Konsole aus löschen:

sudo -u wwwrun php occ trashbin:cleanup user

für einen bestimmten User oder

sudo -u wwwrun php occ trashbin:cleanup

für alle User.

Der Befehl occ ist im Wurzelverzeichnis der Installation zu finden.

Veröffentlicht unter linux.

Gelegentlich kann es sinnvoll sein die Passworteingabe beim SSH-Login zu vermeiden. Wenn man den SSH-Login z.B. aus einen Script heraus vornehmen will oder wenn andere Nutzer das Passwort auf dem Server ändern können.

In solch einem Fall kann man mit vorab ausgetauschten Schlüsseln arbeiten.

Dazu meldet man sich einmal normal per SSH- mit Passwort an:

ssh benutzer@server

Das kann auch schon lang vorher einmal geschehen sein. Dann erzeugt man sich sein Schlüsselpaar:

 ssh-keygen -t rsa

Auf eine Passphrase kann man verzichten, wenn man den Zugang für ein Script benötigt.

Es werden hiermit zwei Schlüsseldateien im Ordner .ssh erzeugt:

  • id_rsa
    das ist der private Schlüssel den man nicht weitergegeben darf
  • id_rsa.pub
    das ist der öffentliche Schlüssel, den wir auf den Zielrechner übertragen

An einfachsten kann man mit folgendem Befehl den Schlüssel in einem Rutsch übertragen:

 cat .ssh/id_rsa.pub | ssh benutzer@server 'cat >> .ssh/authorized_keys'
Veröffentlicht unter linux.

Auf meinem Server war die letzte Aktualisierung auf Version 8.1.x schon vor längerer Zeit. Mir war nicht klar, wie weit ich mit den Aktualisierungen kommen würde. Die Version 10.0.x läuft anscheinend nur noch mit PHP7.x.

Die Aktualisierung bis auf 9.1.5 habe ich mit folgenden Etappen vorgenommen:

  • Version 8.2.11
  • Version 9.0.9
  • Version 9.1.5

Bezogen habe ich die Archive von https://owncloud.org/changelog/ .

Der erste Schritt war relativ problemlos.

cd mein-onwncloud-verzeichnis
mv httpdocs httpdocs.81
tar xvfj owncloud-8.2.11.tar.bz2
cp -a httpdocs.81/config owncloud
mv owncloud httpdocs
chown -R wwwrun.www httpdocs
cd httpdocs
sudo -u wwwrun php occ upgrade

Das Update deaktiviert immer die Apps für Kalender und Kontakte.

Die weiteren Schritte erfolgen analog, aber ab 9.0 muss man wirklich aufpassen, das man nicht alte Daten im httpdocs-Verzeichnis liegen hat. Vorher hatte ich immer einfach die neuen Dateien in das Verzeichnis hinein kopiert, das lief dann aber nicht mehr. Der oben beschrieben Weg klappt aber weiterhin.

Ich musste auf meinem alten SuSE-System den erlaubten Speicher erhöhen in der

/etc/php5/cli/php.ini

Dann musste ich für MySQL die Blockgröße erhöhen in der /etc/my.cnf

max_allowed_packet=256M

Vorher brach das Upgrade-Tool von 9.0.9 immer wieder ab. Zusätzlich wurde über unzulässige Dateien gemeckert.

Es stellte sich heraus, dass vier Dateien gelöscht werden mussten, es war aber mein Ordner für die Owncloud-Dateien fast vollständig geleert worden. Das habe ich erst einmal ignoriert.

Das Upgrade auf 9.1.5 lief dann problemlos.

Zum Glück hatte ich das komplette Datenverzeichnis datadirectory gesichert, das Update hatte es mir gelöscht. Ich habe dann diese Dateien einfach wieder an ihren Platz kopiert und im Owncloud Web-Frontend neu prüfen lassen, danach war alles ok.

Was mir noch auffällt ist die Tatsache, dass Owncloud meldet, es hätte keine Internetverbindung. Auch zusätzliche Apps kann ich aus der Oberfläche heraus nicht installieren, auch Updates werden nicht angeboten.

Ich habe gelesen, dass das an einer defekten Curl-Version liegt. Naja, ich muss den kompletten Server sowieso mal aktualisieren.

Was mich etwas wundert ist die Tatsache, dass sich anscheinend die Kalender-Links etwas geändert haben, von caldav zu dav im Pfad. Meine Synchronisation klappt aber trotzdem, also werde ich das erst einmal nicht weiter verfolgen.