Uncategorized

Typesetter Contact Form released

We have just released our first bigger Typesetter CMS Plugin. It’s a highly configurable contact form section, where you can add multiple types of fields, send (HTML) Mails to the administrator and the submitter (optional).

The whole markup and class structure is based on Bootstrap 3, so if you already use a Bootstrap theme, you can install it and you’re ready to go. If you won’t use Bootstrap you have to implement your own styles.

Currently it’s just a „type“ inside the CustomSections Plugin, which you have to modify a little, please find detailed instructions on Github: https://github.com/webksde/Typesetter-Custom-Sections–Contact-Form

    Typesetter CMS: Create a reusable object, structured with page manager

    Let’s say you want to add a „call to action“-section beyond the content which is usable inside the template.

    1. Create a regular page holding your contents
    2. Create a new extra content block (/admin/extra), choose type „file include“. (You will notice, that the edit link is disabled inside the backend, ignore this)
    3. Possibility 1: Use Layout Manager
      1. Jump back to your frontend, klick „Layout“ at the top right
      2. Hover the region you wish to include your created extra block, click insert and choose your block
      3. Click save and click abort when finished
    4. Possibility 2: Insert your extra block directly inside your template
      1. Insert the following code to your template: <?php gpOutput::Get(‚Extra‘,’Technical_section_name‘); ?> (the technical section name is the name you choosed with underscores instead of spaces, but still case sensitive!)
      2. Save and reload your page
    5. Now hover the new appeard block (which will show something like „Insert File“ per default), click the edit link and choose the page you created in step 1

    The gerat thing about this is: the configuration of this extra is stored globaly and not per page, you have to set it just once and you can reuse it easily. You have it available to print it out inside your Template, or using a simple include section type with the page manager.

      Typesetter aka gpEasy – Remove edit and login locks

      To remove the edit lock, simply navigate to your main directory, open the „data“ folder, and delete the temporary „lock_….“ file.

      To reset the login lock, navigate to: „/data/_site/“ and edit the „user.php“. Now simply reset the „attempts“ to 0.

        Webfont „Amiri“ wrong underline position

        In a current project we used the beautiful looking font „Amiri“. After hovering the first link, i saw the underline appearing way too to far at the bottom.

        As we can´t fix this via CSS, i modified the font with FontForge. The result is called „Amirifix“ and is attached to this post.

        Amiri is an Open Font by Khaled Hosny & Sebastian Kosch.

        Credits:

        Copyright (c) 2010-2013, Khaled Hosny <khaledhosny@eglug.org>.
        Portions copyright (c) 2010, Sebastian Kosch <sebastian@aldusleaf.org>

        This Font Software is licensed under the Open Font License, Version 1.1.

          Shopware (4) Kategoriebild in der Kategoriebeschreibung ausgeben

          Warum auch immer das nicht von Shopware aus schon implementiert ist, hier eine Variante welche die Bilder (hochzuladen im Backend > Kategorien > KategorieX) in der Kategoriebeschreibung ausgibt.

          Die betroffene Templatedatei beinfdet sich im ordner frontend/listing/text.tpl. Zusätzlich sollte im Media Manager ein eigener Ordner „Kategoriebilder“ o.Ä. angelegt werden. In den Einstellungen des Ordners (rechtsklick auf den Ordner), muss nun noch die Thumbnail Generierung eingerichtet werden.

          Diese Lösung ist alles andere als perfekt, aber vllt. rettet es ja dem ein oder anderen den Tag 🙂
          Anzupassen ist die Thumbnail Size, der Pfad sollte identisch sein.

                        {assign var="category_thumbnail_size" value="120x120"}
              {assign var="category_thumbnail" value="media/image/thumbnail/{$sCategoryContent.media.name}_{$category_thumbnail_size}.{$sCategoryContent.media.extension}"}
              
              {if !file_exists($category_thumbnail)}
                {* FALLBACK *}
                {assign var="category_thumbnail" value="{$sCategoryContent.media.path}"}
              {/if}
              {if $category_thumbnail}
                {$sCategoryContent.cmsheadline}
              {/if}

            Tipp: Velositey für Photoshop CS6 + CC

            Photoshop wurde grundsätzlich nicht mehr Webdesign konzipiert, entsprechend fehlen einige Komfortfunktionen für Webdesigner.

            Das PlugIn Velositey hilft Photshop etwas auf die Sprünge und bietet neben der Generierung von 1170 Pixel Grids und weiterer Guide-Vorlagen eine ordentliche Anzahl von Basislayouts welche einem schon ordentlich Arbeit abnehmen können.

            Toller kleiner Helfer und das kostenlos!

              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!

                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.

                    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 😉

                    1. Das Coverphoto muss exakt die Maße 851×315 aufweisen (Stand 18.08.2013 – sobald Facebook skalieren muss, ist das Ergebnis MATSCH.)
                    2. In Photoshop unter Für Web- und Geräte Speichern als PNG-24 speichern.
                    3. Fertig. Das Ergebnis ist hier perfekt, kein Qualitätsverlust feststellbar.