Category: Web development

The CSS align-items: center lets you center flex items which are next to each other, so that their horizontal midpoint is on one horizontal line. But recently I had two flex items and only wanted to center the right one, if the left is higher, but not the left one if the right is higher. For that, I cannot use align-items: center, but the solution is not much more complex:

.center-flex-item {
	margin-bottom: auto;
	margin-top: auto;
}
Code language: CSS (css)

With that, the flex item .center-flex-item will be centered if a higher item sits beneath it, but the other item will not be centered if .center-flex-item is greater.

.center-flex-item {
	align-self: center;
}

My newest theme will use the Masonry script to display image grids. But I only need this function if the viewport is wider than a particular width. If the viewport is narrower than this width, the images are displayed below each other, and for that, I do not need to initialize the script. This post shows you how to get this behavior working.

Two weeks ago I wrote a post about deployment via GitLab. Now I realized the same behavior for a public GitHub repository with Travis, and this post shows you how I did it.

This post shows you a SASS function, which calculates a line height without a unit. Origin of this action was that I no longer wanted to use rem.

I use the German Market plugin for generating invoices and use a custom font which is not integrated into the plugin by default, so I have to re-upload it after updating the plugin. So I do not forget this, I implemented an admin notice which is displayed if a German Market update is available. That is not very difficult, and this is the complete code:

/**
 * Display admin notice so I remember uploading the Clavo font after updating German Market
 */
function fbn_german_market_typography_notice() {
    $update_plugins_transient = get_site_transient( 'update_plugins' );
    if ( $update_plugins_transient->response['woocommerce-german-market/WooCommerce-German-Market.php'] ) {
        add_action( 'all_admin_notices', function () { ?>
            <div class="notice notice-warning">
                <p><strong>Nach dem »German Market«-Update den Clavo-Font für Rechnungen wieder hochladen!</strong></p>
            </div>
        <?php } );
    }
}

add_action( 'admin_init', 'fbn_german_market_typography_notice' );
Code language: JavaScript (javascript)

I hook fbn_german_market_typography_notice() to admin_init. First, the function saves the value of the update_plugins transient, which stores information about available plugin updates. If $update_plugins_transient->response['woocommerce-german-market/WooCommerce-German-Market.php'] is not empty, an update is available.

In this case, the admin notice is displayed (I use all_admin_notices, so the notice is not only showed in the network admin), which hopefully will remind me to upload the font for the invoices … 🙂

Of course, the array key is different for every plugin. You can take a look at the value of the transient via var_dump( $update_plugins_transient ); to find the correct key.

PS: More on admin notices in the post »Admin Notices in Plugin UIs« by Caspar Hübinger.

Since version 4.7 it is possible to let WordPress generate preview images for uploaded PDF documents. Therefore, your server has to meet the following requirements:

• Imagick.
• ImageMagick.
• Ghostscript.

You have to install Imagick — ImageMagick and Ghostscript are installed by default. To retrofit Imagick, you just need to run the following command on the shell and can enjoy PDF preview images for new uploads:

uberspace-install-pecl imagick