webksde
Use Smarty truncate function inside PHP (instead of substr)
Working with the PHP substr() function is horrible, so if you have Smarty available you can use the truncate function inside your php files.
smarty_modifier_truncate($string, $length = 80, $etc = '...', $break_words = false, $middle = false)
For Example:
smarty_modifier_truncate($oStartKategorie->cBeschreibung, 200)
Adobe Photoshop, Illustrator, … CS6 Trial Downloaden (nicht CC!)
Update 2019: Wer die Schnauze voll hat von Adobe sollte sich ganz dringend die Affinity Suite (Designer, Photo & Publisher) ansehen, lĂ€sst ĂŒberhaupt nichts vermissen, ganz im Gegenteil:
https://affinity.serif.com/de/
Benefits fĂŒr Webdeveloper:
- Zentrale Verwaltung von Textstilen, samt Vererbungslogik
- Erstellen von „Symbols“, wiederverwendbare Designbestandteile, die synchronisiert werden
- Fantastisches Grid-Tool
- uvm.
Wer keine Lust auf den neuen Abo-Unsinn von Adobe hat und sich mal CS6 anschauen will, schaut bei der Suche nach der Trial in die Röhre. Die Downloadlinks auf diversen Websites verweisen komplett auf Adobe.com, wo dann die CC-Version als Download angeboten wird.
Wunderbarerweise gibt es allerdings eine Seite fĂŒr CS6 Kunden welche Ihre DVD verlegt haben… oder wie auch immer. Das Setup unterscheidet sich nicht von dem welches als Trial angeboten wurde, kann somit weiterhin als 30-Tage Testversion installiert werden.
Link findet Ihr unten!
Netbeans Development Version – Fehlermeldungen deaktivieren – Disable Error Messages
Um in der Dev Version von Netbeans die Netbeans eigenen Fehlermeldungen zu unterdrĂŒcken geht man folgendermaĂen vor.
- Einen Editor mit Administrator Rechten starten
- Mit dem Editor Netbeans Installationsverzeichnis aufrufen (z. B. C:\Program Files\NetBeans Dev 201311260002)
- Im Ordner „etc“ die Datei „netbeans.conf“ öffnen
- Nach „netbeans_default_options“ suchen
- Dort folgende Option anfĂŒgen (ACHTUNG! Innerhalb der vorhandenen AnfĂŒhrungszeichen): „-J-Dnetbeans.exception.alert.min.level=99999 -J-Dnetbeans.exception.report.min.level=99999“
- Speichern, Netbeans starten, Fertig.
Die Ausgabe der Fehlermeldungen hat bei der Dev Version natĂŒrlich den Sinn, den Entwicklern Fehler melden zu können. Das einfach beim Abschalten bedenken! Benötigt man, wie in meinem Fall zwingend die Dev z. B. aktuell fĂŒr die UnterstĂŒtzung von SASS, sind die teils extrem oft erscheinenden Fehler aber aus Sicht der ProduktivitĂ€t natĂŒrlich untragbar.
JTL Shop 3: Regionen hinzufĂŒgen (Boxen)
Aktuell ist der JTL-Shop 3 auf 4 Regionen begrenzt, wovon 2 standardmĂ€Ăig deaktiviert und nicht im template definiert sind. Das hinzufĂŒgen eigener Regionen ist aktuell nicht möglich (ohne die UpdatefĂ€higkeit zu zerstören). Ich zeige hier nun kurz auf wie die vorhandenen Regionen aktiviert und eingebunden werden.
Die Anfrage eigene Regionen einfĂŒgen zu können, haben wir bereits an JTL herangetragen, Ihr seit herzlich eingeladen die Anfrage zu unterstĂŒtzen đ –> http://feedback.jtl-software.de/forums/214215-jtl-shop3/suggestions/5115506-definition-eigener-container-in-der-template-xml-
Erste Anlaufstelle ist die Template.xml im Hauptverzeichnis des Templates, z. B. â/jtlshop/templates/JTL-Shop3-Tinyâ dort nach dem Tag â<Boxes>â suchen. Hier gilt es nun fĂŒr die Aktivierung vorhandener Regionen den Wert âAvailableâ von â0â auf â1â zu setzen.
NĂ€chster Schritt ist, die Ausgabe im entsprechenden Templatefile zu definieren. In unserem Fall geben wir die Region âBottomâ in der footer.tpl respektive footer_custom.tpl aus.
Die Kenntnisse zum Anpassen der umliegenden HTML Struktur setze ich an dieser Stelle voraus. Die Ausgabe der Region funktioniert dann folgendermaĂen:
â{load_boxes type=“bottom“ assign=“cBoxbottom“}{eval var=$cBoxbottom}â
Im letzten Schritt im Backend unter âAdmin -> Boxenverwaltungâ die Box im neuen Bereich hinzufĂŒgen, die Region mit dem HĂ€kchen links oben zu aktivieren (!!!) und fertig! Die Box sollte nun angezeigt werden.
Thunderbird Caldav Support mit Oauth (Google Calendar)
Da nun schon seit einigen Tagen mein Kalender nicht mehr ging, was natĂŒrlich extrem unerfreulich ist, habe ich mir die Sache nun erneut vorgenommen. Huckepacklösungen wie die Extension Provider for Google Calendar funktionierte unzureichend und der Kalender sollte nun endlich wieder laufen.
Also die letzte Thunderbird + Lightning Aurora Version installiert (26.0a2) und mit der neuen URL die CalDav Kalender wie gehabt neu angelegt: https://apidata.googleusercontent.com/caldav/v2/calid/events . Und schon lÀuft die Sache.
Das OAuth Fenster popt nun korrekt auf und nach der BestĂ€tigung des Dialogs, erhĂ€lt man eine RĂŒckmeldung von Thunderbird, sowie nach einigen Sekunden den gewohnten Kalender.
Downloadlinks unterhalb, der Einfachheit halber habe ich den englischen Release genutzt.
HTML5 Video in Drupal – Video.js + Video.js Filter
FĂŒr ein aktuelles Projekt bestand die Notwendigkeit, auf einfachem Weg HTML5 Videos in den Content einpflegen zu mĂŒssen. Hierzu nutzen wir die Module Video.js und Video.js Filter, ersteres stellt die Video.js Library (Achtung! Nicht die Library von Github nutzen, sondern die der Video.js Website) zur VerfĂŒgung, zweiteres stellt einen Textfilter zur VerfĂŒgung der es ermöglicht einen String mit Parametern einzupflegen. ZusĂ€tzlich setzen wir das File Entity Modul fĂŒr den Dateiupload ein.
Problem ist hier nur, dass Videos in einem FTP Folder gespeichert werden mĂŒssen, was fĂŒr viele Kunden zu umstĂ€ndlich ist. Der Upload erfolgt nun also ĂŒber das benannte File Entity Modul, welches Dateien direkt ins File Verzeichnis lĂ€dt. Problem an der Stelle: In den Einstellungen des Video.js Filter Moduls lassen sich nur Unterverzeichnisse innerhalb von Files angeben.
Einfacher Trick an der Stelle: Da das Pfad Feld in den Video.js Filter Settings nicht leer bleiben darf, kann einfach ein „/“ eingetragen werden. Damit wird dann direkt das files Verzeichnis angesprochen.
Alternativ steht noch das File Entity Path Modul zur VerfĂŒgung, was dann die Angabe von Unterordnern beim Dateiupload erlaubt.
Noch ein Tipp zur generellen Nutzung: Es reicht folgende Angabe aus [videojs:{webks_beispielvideo.mp4|webks_beispielvideo.webm| … }] der Pfad wird automatisch durch die entsprechenden Settings des Video.js Filter Moduls ergĂ€nzt.
Einstieg: Drupal & SASS + Compass (mit Prepro und Sassy)
Der Einstieg in das Thema ist nicht ganz so leicht gemacht, daher hier eine kleine Zusammenfassung.
Die GrundsĂ€tzlichen Möglichkeiten mit dem CSS Preprocessor zu arbeiten: Lokale Ruby Installation aufsetzen (http://thesassway.com/beginner/getting-started-with-sass-and-compass) und die daraus generierten .css Files auf den Webserver laden (fĂŒr die Entwicklung in meinen Augen völliger KĂ€se, auĂer man bindet den entsprechenden FTP Folder als Netzlaufwerk ein. Die Möglichkeit der direkten „Portierung“ zu CSS Files bietet SASS). Vorteil dieser Variante ist schlicht und ergreifend, dass man die tatsĂ€chliche SASS Lib nutzt und nicht die PHP Portierung.
Wir wollten uns die zusÀtzliche Pflege lokaler Software und den Aufwand der Einrichtung allerdings schenken und setzen so auf die komplette online Variante mit den Modulen https://drupal.org/project/sassy, https://drupal.org/project/prepro und der Library https://github.com/richthegeek/phpsass.
Update: Inzwischen sind wir auf eine lokale Lösung mit Prepros umgestiegen, den Sync auf den Server erledigt unser Standard Tool WinSCP mit Hilfe der keepuptodate-Funktion, was inzwischen göttlich funktioniert. Die Entscheidung zum Umstieg erfolgte aufgrund etlicher Fehler in der PHP Portierung von SASS. Im kommerziellen Umfeld ist das nur mit EinschrĂ€nkungen zu genieĂen.
Die Einrichtung…
… sollte jedem Drupalisten leicht von der Hand gehen: Module aktivieren, Lib in den vom Modul geforderten Ordner packen, aktivieren (nicht das Sassy Compass integration – Modul ĂŒbersehen!), prepro konfigurieren. Dann die .SCSS / .Sass Files im .info file des Themes eintragen und loslegen.
Ein paar „Fakten“:
- SCSS ist fĂŒr Einsteiger einfacher zu erlernen
- SASS ist etwas kompakter zu schreiben
- Die PHPSass Portierung des eigentlichen Ruby Projekts Sass ist sicher nicht perfekt, aber lĂ€uft im groĂen und ganzen rund genug um damit arbeiten zu können.
- Compass ist in der PHPSass portierung bereits enthalten (die schönste ErklĂ€rung zu Compass ist sicher der Vergleich zu Javascript und jQuery – Compass ist Ă€hnlich hilfreich, stellt vordefinierte @mixins zur VerfĂŒgung. .
Schöne Dokumente zum Thema:
- http://de.slideshare.net/nathansmith/drupal-compass
- http://de.slideshare.net/mediacurrent/elegant-css-design-in-drupal-less-vs-sass
- https://drupal.org/project/sassy & https://drupal.org/files/Making%20Drupal%20Sassy.pdf
Hilfreiche Tools
- https://addons.mozilla.org/de/firefox/addon/firesass-for-firebug/ (Zeigt in Firebug die Zeile im .SCSS / .Sass Quellfile an, sofern @debug aktiviert ist (Prepro Einstellungen!)
- http://sass-lang.com/try.html – Klappt etwas nicht wie erwartet, wunderbar zum testen ob EVTL. PHPSass schuld ist đ
VerfĂŒgbare Editoren
- Ich nutze Netbeans, welches in der aktuellen Dev Version (NetBeans IDE Dev (Build 201309191137)) SASS / SCSS ohne weitere Module unterstĂŒtzt (die Alternative ist das folgende Plugin: http://plugins.netbeans.org/plugin/34929 – welches bei mir allerdings nur unzureichend funktionierte)
- Empfohlen wird weiterhin http://www.sublimetext.com/
Du brauchst UnterstĂŒtzung bei deinem Drupal Webdesign-Projekt? Sprich uns an.
Sidebar auf gleiche Höhe wie den Content bringen (jQuery)
Das Problem besteht schon, solange es Webdesign gibt. Per CSS gibt es nur die bekannten Möglichkeiten per position:absolute; + top:0; + bottom:0; oder aber per background-image. Diese Möglichkeiten sind bei Flexiblen (responsive) Seiten allerdings oft unbrauchbar. Zudem hat die Absolute-Methode das Problem, dass hier die Sidebar keinesfalls lĂ€nger sein darf als der Content, sonst ĂŒberlappt diese in den Footer, oder sogar aus der Seite heraus.
Per jQuery ist das ganze natĂŒrlich kein wirkliches Problem:
/* Full Height Sidebar */ function fullHeightSidebar() { (function($) { jQuery(window).load(function (){ // execute when document.ready scripts are finished var heightContent = $('#content-column').height(); var heightSidebar = $('.region-sidebar-second').height(); if( heightContent > heightSidebar){ $('.region-sidebar-second').css('height',heightContent); } }); })(jQuery); }
Hier ist das ganze schon in ein Resize Script gekapselt, dieses mĂŒsst Ihr bei euch ggf. ergĂ€nzen, damit es dann auch live, on resize, etc. funktioniert.
Facebook Cover Foto QualitÀt
Zu diesem Thema wurde schon schwadroniert bis die Schwarte kracht, ich spare mir hier jetzt lange AusfĂŒhrungen und verrate einfach die Lösung đ
- Das Coverphoto muss exakt die MaĂe 851×315 aufweisen (Stand 18.08.2013 – sobald Facebook skalieren muss, ist das Ergebnis MATSCH.)
- In Photoshop unter FĂŒr Web- und GerĂ€te Speichern als PNG-24 speichern.
- Fertig. Das Ergebnis ist hier perfekt, kein QualitÀtsverlust feststellbar.