Stretch SVG Background Images

The next time I’m going mad when trying to stretch a SVG background image using background-size I’ll remember adding preserveAspectRatio="none" to the SVG itself. Otherwise it’s gonna stick to its original aspect ratio like its life depends on it.

MAMP MySQL repair fails with Access Denied

mysqlcheck: Got error: 1045: Access denied for user ‘root’@‘localhost’ (using password: YES) when trying to connect

I have no clue where the MAMP GUI tries to take the credentials from when running checks and repairs. It just never seems to work.

The solution that worked for me, however, is to simply run mysql_upgrade -uroot -p on the command line. Don’t forget to check that MAMP’s mysql binary is in your PATH, because it is not by default. To do so add to your shell’s config (that’s .zhsrc for me) and restart your terminal:
export PATH="/Applications/MAMP/Library/bin:$PATH"

Et voilà:

Upgrade process completed successfully.
Checking if update is needed.

Using CSS Blur to add full-width image background

Many designs require the implementation of full-width imagery while restricting the component’s height at the same time.

Blurred Hero Component

Today I came up with this simple idea that may help in some situations: Put a blurred version of the hero image in the background, reduce its opacity and make it span the entire width. Place the actual image above and restrict its width to a dimensions that makes it easier for content editors to find a fitting image.

Bonus points: when using a small resolution for the blurred image it could serve as a placeholder while loading the high res version.

Decoupled Drupal mit Gatsby

Heute kam ich endlich mal dazu, dieses Tutorial zu Decoupled Drupal mit GatsbyJS nachzubauen. In kürzester Zeit war Folgendes möglich:

  • CMS-Setup inklusive Einrichten der JSON-API
  • Anlegen einer von Drupal völlig unabhängigen statischen Site, die CMS-Content von der API konsumiert und rendert.

Oh, ich freu mich auf die Zukunft und auf reale Projekte mit Drupal als Headless CMS. Ungeahnte Möglichkeiten öffnen sich.

Re-use and override TailwindCSS Configuration

TailwindCSS is hands-down my most useful CSS tool of 2017. It’s a fantastic helper to create utility-first CSS. I’ve been working with it since its first public release and I’m still more than happy to have it.

Today I found out a way to make it even more useful. Say you’re having a Parent Theme that you use for a lot of projects, where each project implements a child theme that needs to adjust properties such colors, breakpoints or font stacks. That’s as simple as requiring your Parent Theme’s tailwind.js, override or add properties and export the adapted config.

const config = require('../parent_theme/tailwind');

config.colors['grey'] = '#eee'
config.screens['md'] = '32em'

module.exports = config;

 

Composer PHP Memory Limit on MAMP Pro

With every PHP update MAMP Pro adds an updated `php.ini file, so previous adaptations are lost after upgrading.

Interestingly, editing a specific PHP versions config file (via File > Edit Template > PHP -> [Version]) doesn’t have any effect on MAMP’s PHP used on the command line. To increase the PHP limit to be able to work with Composer I did the following:

  1. Find the current memory_limit value by running:
    php -r "echo ini_get('memory_limit').PHP_EOL;“
  2. Find out which php-ini is currently loaded on the command line by running:
    php -r 'phpinfo();' | grep 'php.ini'
  3. Update that config file

Rinse and repeat with every MAMP update.

Set Front Page from settings[.local].php in Drupal 8

When working on Drupal projects I usually need to set a static front page by referencing a Node’s ID. When working with different environments chances are high that Node ID varies from environment to environment.

Luckily we can easily override any configuration value in the settings file and thus have different values in settings.php than in settings.local.php. It’s simple as that: $config['system.site']['page']['front'] = '/node/1';

Drupal: Add Body Class when Tabs are displayed

I had the urge to style various elements differently in case tabs (the ones generated by menu_local_tasks) are present on the page. Out of the box $tabs array isn’t available in html.tpl.php so I had to implement ‘ hook_preprocess_html’ and add my desired class to my array of body classes. Yay!

<?php
function THEMENAME_preprocess_html(&$vars, $hook) {
  // Make tabs available on html tpl
  $vars['tabs'] = menu_local_tabs();
  // if we have primary tabs, add an accoring body class
  if (!empty($vars['tabs']['#primary'])) {
    $vars['classes_array'][] = 'has-tabs';
  }
}

Unmaintainable Block Admin Page in Drupal

When you have more than 100 Blocks things get messy on Drupal’s Block Admin Interface. If you ever went crazy because of weird issues when dragging and dropping blocks to change their weight and/or region you probably have hit Drupal’s internal limit of handling weights from -50 to +50 or otherwise said, 100 items.

It can be fixed by setting the variable drupal_weight_select_max to a higher value. This can be done in various ways, here’s how its implemented in a deploy script.

function dgm_deploy_update_7011() {
  variable_set('drupal_weight_select_max', 250);
}

Programmatically manipulate a Node’s field value upon saving 

For a recent project we needed to automatically change a Node’s field value upon saving with a computed value. For an unrelated reason we needed this value to be in a regular text field, so using Computed Field was off the table.

It turned out to be really simple to accomlish with a minimal amount of custom code.

<?php
/*
 * Changes the value of field_marker to a string made up of the
 * Node's type and the value of it's category taxonomy term
 * Slashes will be replaced with deshes, spaces get removed
 * Must make sure that the following exists:
 *  - text field "field_marker"
 *  - node types "gesuch" and "angebot"
 *  - taxonomy reference field "field_category"
 */

// Helper function to keep our code
function save_marker_category($node) {
  if($node->type == 'gesuch' || $node->type == 'angebot') {

    $find = array('/', ' ');
    $replace = array('-', '');

    $category_object = taxonomy_term_load($node->field_category['und'][0]['tid']);
    $category =  trim(strtolower(str_replace($find, $replace, $category_object->name)));

    $type = $node->type;
    $node->field_marker['und'][0]['value'] = $type.'_'.$category;

    // Save the new value
    field_attach_update('node', $node);
  }
}

function MYMODULE_node_update($node) {
  save_marker_category($node);
}

function MYMODULE_node_insert($node) {
  save_marker_category($node);
}

Slick Slider inside Table Display

Today I ran into an issue when trying to use Slick Slider within an element that has display: table. The layout broke almost completely and in all browsers on small width viewports. Simply adding table-layout: fixed; to the element that has display: table solved it.

HTML Template per Node Type

In case you need a different html.tpl.php on a per content type basis in Drupal 7

<?php
function THEME_preprocess_html(&$vars) {
  $node = menu_get_object();
  if ($node && $node->nid) {
    $vars['theme_hook_suggestions'][] = 'html__' . $node->type;
  }
}

Custom Drupal Views Template breaks AJAX (updated)

I often create custom Views templates for my Drupal sites, for example to freely reposition exposed filters. Unfortunately, AJAX exposed filters in Views works only with a very strict markup hierarchy, and if your markup doesn’t match that scheme (.view-[view:id] > .view-filters > filters) it won’t work anymore

diff --git a/js/ajax_view.js b/js/ajax_view.js
index 7d54c67..f7f7ba9 100644
--- a/js/ajax_view.js
+++ b/js/ajax_view.js
@@ -57,7 +57,7 @@ Drupal.views.ajaxView = function(settings) {
   this.settings = settings;

   // Add the ajax to exposed forms.
-  this.$exposed_form = this.$view.children('.view-filters').children('form');
+  this.$exposed_form = this.$view.find('.view-filters form');
   this.$exposed_form.once(jQuery.proxy(this.attachExposedFormAjax, this));

   // Add the ajax to pagers.

Source: https://www.drupal.org/node/2477307

Update

Thanks to this patch that removed the selector dependence this is not needed anymore

Remove fields form content type programatically

Say you want to remove the body field from the page content type. Putting this code inside an updatescript will get the job done. Remember not to use field_delete_field() if you’re not sure if you still want to use the field anywhere else. It’s way safer to rely on field_delete_instance. Setting the second parameter to TRUE means it’s automatically going to clean up the field anyway if it is found to be the last instance.

$instance = field_info_instance('node', 'body', 'page');
field_delete_instance($instance, TRUE);

Sync Brackets Extensions & Config

  1. Find your Brackets user folder (usually ~/Library/Application Support/Brackets) and move brackets.json and extensions/ to a shared folder (e.g. Dropbox)

  2. Add a symlinks to the moved file and folder:
    cd ~/Library/Application Support/Brackets
    ln -s ~/Library/Mobile\ Documents/com~apple~CloudDocs/config/Brackets/extensions/
    ln -s ~/Library/Mobile\ Documents/com~apple~CloudDocs/config/Brackets/brackets.json

  3. On your other machine make sure your config folder is done syncing, delete brackets.json and extensions/ from your Brackets user folder and setup your symlinks in the same way. Done \o/

PS: If you think: but why not syncing the entire Brackets user folder: I did that but I was bugged by the fact that Brackets was constantly complaining about not finding recently opened files and folders, which are saved in state.json. So I made sure that this file won’t be synced. 

Translate Drupal Strings Programatically

One of the many issues one has to face when trying to do some proper deployment with Drupal (only up to version 7, that is) is custom localized strings. Fear no more! Instead of translating strings in the admin interface (/admin/config/regional/translate/translate) we can make use of the great Update Script Processor, thus put all our custom translations into code and happily version and deploy them. Yay!

  1. Install Update Script Processor
  2. A update Script that contains your localizations, e.G. $this->setLanguageWording('de', 'Telephone number', 'Telefonnummer');
  3. run drush updatescripts

Obviously, you should put that under version control and make sure your deployment process runs drush updatescripts after deploying to another environment.

Here’s a full example that translate the original strings Telephone number and Fax number to their German counterparts:

<?php
/**
 * @file   0060-update-localization-string-test.php
 * @author Daniel Wentsch
*/

$this->setAuthor('Daniel Wentsch');
$this->setDescription('Update localization string (test)');

// Put your updatescript code here!
$this->setLanguageWording('de', 'Telephone number', 'Telefonnummer');
$this->setLanguageWording('de', 'Fax number', 'Faxnummer');

$this->finished();