Drupal

Manually loop through blocks in a region.html.twig

Update 2: It turns out that the elements array is not reliable available. So i’ve decided to put the .row wrapper in the region.html.twig and add the cell classes per region in the .theme file. This kinda sucks, but i currently see no other way to ensure the cell / column classes are added in a specific region.

(mehr …)

    Drupal Mimemail Module (HTML Mails, Newsletter, …) unwanted attachment.dat *Update*

    In a current project we ran into a curious problem, every HTML Mail has an file attachment named „attachment.dat“.

    After some research in the „mimemail.theme.inc“ (function „template_preprocess_mimemail_message()“), we figured out that the problem is located inside the $css content.

    In our case the implementation of the google webfont produces this issue (@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600)). Basicly @import has to work inside html mails, so mimemail seems to do something wrong here?

    Whatever. We can work around this problem, using the <link …> – implemantation inside the mimemail-message.tpl file instead of the declaration directly inside the css code.

     

      Remove Drupals .menu-position-link menu items (Menu Position module)

      Menu Position is a great Drupal Module to get the .active-trail class in the menu, without adding eg. all news article nodes to the it.

      The only problem is a „placeholder“ link created instead, class: „.menu-position-link“. It seems this is technically necessary.

      Here is a little jQuery function to remove the element itself, the container menu (if its the only item) and fix the causing classes. You may have to alter it a bit.

      Remove the console.logs before using it on productive environment!

      $('.menu', context).children('li.active-trail').each(function() {
        var menuChildCount = $(this).children('.menu').children('li').length;
        var $menuPosLinkParent = $(this).find('.menu-position-link').parent();
        if ($menuPosLinkParent.length) {
          console.log('Found one - childcount:' + menuChildCount);
          console.log($menuPosLinkParent);
          if (($menuPosLinkParent).hasClass('last')) {
            console.log('Its the last item.');
            // If its the last link move class .last to the menu item before 
            $menuPosLinkParent.prev('li').addClass('last');
          }
          if (menuChildCount === 1) {
            console.log('Its the only item.');
            // If menu position link is the only menu-item, remove parent trails .expanded 
            $menuPosLinkParent.parents('li.active-trail.expanded').removeClass('expanded');
            $menuPosLinkParent.parent('.menu').remove();
            console.log('Removed it.');
          } else {
            $menuPosLinkParent.remove();
            console.log('Removed it.');
          }
        }
      });

        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/sassyhttps://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:

          Hilfreiche Tools

          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.

            Drupal: Custom Panel Layout Plugin (AT-Theme)

            Eine eigentlich einfache Sache, bei der aber kleine Unachtsamkeiten dazu führen können dass das Layout Plugin garnicht, oder nur unvollständig funktioniert.

            Hier die Vorgehensweise:

            1. Eine passende Basis für das zu erstellende Layout auswählen
            2. Diese aus dem AT-Core Theme (layouts/panels) in das eigene Theme übernehmen (gleiche Unterordner)
            3. Namen des Ordners und der Dateien entsprechend anpassen (z. B. two_col_brick zu two_col_custom)
            4. Alle Dateien öffnen und dort per Suchen & Ersetzen ebenfalls den alten Namen durch den neuen ersetzen
            5. Den Funktionsnamen auf das eigene Theme anpassen („adaptivetheme“ gegen den eigenen Themenamen ersetzen“)
            6. Nun den *.tpl.php File anpassen wie er benötigt wird (es können natürlich neue Inhaltsbereiche / Variablen ergänzt werden ACHTUNG! Die Funktionsnamen dürfen eine Länge von 32 Zeichen nicht überschreiten! )
            7. Als nächstes den *.inc File anpassen und die ggf. hinzugefügten Variablen aus dem letzten Schritt ergänzen
            8. Optional: Das Thumbnail zur Voransicht des Layouts anpassen und austauschen
            9. Den theme.info File bearbeiten. Einfach für jeden Gerätetyp unter „Responsive Panels“ entsprechend das eigene Layout anfügen
            10. Weiterhin muss im theme.info File folgendes ergänzt werden: „plugins[panels][layouts] = layouts/panels“ (der Pfad kann im Grunde natürlich frei gewählt werden)
            11. Cache leeren, Panel Layout auswählen, fertig!

            Für NICHT AT-Panel-Layouts läuft das ganze im Grunde identisch, die Quelle ist nur eine Andere –> „/sites/all/modules/contrib/panels/plugins/layouts“

             

             

              webks.de: Relaunch

              Ein hartes Stück Arbeit war das, aber es hat sich gelohnt. Unsere rundum erneuerte Unternehmenswebsite http://www.webks.de ist online. Wie auch schon einige unserer Kundenseiten, komplett responsive, dank CSS Media-Queries. Technisch setzen wir selbstverständlich auf eine Drupal 7 Lösung. 

              So selten man für die eigenen Websites inzwischen Zeit findet, folgt nun – möglichst zeitnah – ebenfalls der Relaunch unserer Drupal Themenseite DROWL.de. Selbstverständlich ebenfalls stark verschlankt und responsive.

              Zum Ende natürlich noch ein frohes neues Jahr 2013, allen Lesern viel Erfolg und alles Gute im neuen Jahr!

                webks: Responsive Module Plugin for jQuery

                Ein großes Problem beim gestalten von Oberflächen für Mobilgeräte, stellen Tabellen dar. Tabellen sind aufgrund ihres „Wesens“ schon gänzlich ungeeignet für schmale Displays, viele Spalten, platzraubender Inhalt. Und so nehmen sich Tabellen den Platz welchen Sie benötigen, mit der Folge das sie über die Website hinausragen und der User nach rechts scrollen muss, Katastrophe.

                Zusammen mit meinem Kollegen Julian Pustkuchen bei webks: websolutions kept simple haben wir nun eine jQuery Lösung entwickelt, welche für Jedermann kostenfrei zum Download bereitsteht.

                Anregungen und Wünsche zur Optimierung des Moduls nehmen wir selbstverständlich gerne entgegen.

                  Sprungmarken in HTML Newslettern (insb. Simplenews Content Selection)

                  Nach meiner Recherche zum Thema kann ich sagen: Das Thema geistert nicht selten durchs Netz, ich hoffe dieser Artikel hilft Anderen etwas weiter.

                  Das Problem: Outlook akzeptiert die aktuelle Form, sprich IDs, von Sprungmarken nicht, obwohl (angeblich) der Internet Explorer als Renderer zum Einsatz kommt (was hier Version 9 entsprechen würde, welcher es definitiv kann). Folgende Grundsätzliche Tipps kann man also geben:

                  1. name UND ID verwenden
                  2. Der Zielanker sollte Inhalt haben

                  Unsere Lösung sieht also folgendermaßen aus:

                  
                  
                  

                  Ueberschrift Text

                  Ueberschrift Text

                    Tipp: Panels Layout-Designer gerundete Spaltenbreiten

                    Da mir gerade so ein bisschen die Schuppen von den Augen fielen, will ich andere Unwissende auch teilhaben lassen.

                    Beim Panels Layout-Designer ärgerte ich mich immer darüber, dass sich die Prozentwerte der Spaltenbreiten nicht vernünftig einstellen ließen. Drückt man aber, wie auch in nativen Programmen üblich die Shift-Taste beim ziehen, erhält man runde Werte.

                    Das war´s auch schon 🙂