Just vertically center one specific flex item

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.

Update from June 9, 2017: Easier and with the probably more correct CSS rule for the scenario, it looks like that:

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

Thanks to Matthias for the hint!

Adapt CSS for right-to-left languages with Gulp

If a website is displayed in a language which goes from right to left, we need to modify a few CSS rules if the CSS was written for left-to-right languages — for example, we would need to adjust left and right spaces and flip floats. We could make these Adjustments manually, but that can be time-consuming. With the help of Gulp, it is easier and faster.

Continue reading "Adapt CSS for right-to-left languages with Gulp"

Running masonry script depending on viewport width

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.

Continue reading "Running masonry script depending on viewport width"

Let images go beyond the content area

If you insert images into a post or something similar, in most cases, they will have the maximum width of the text content. If the pictures are good, it can be cool to let them go beyond the width of the content area, for example from one border of the browser to the other in a one-column layout. This post shows you how to make this happen — as well in one-column as sidebar layout.

Continue reading "Let images go beyond the content area"

Displaying admin notice when update for specific plugin is available

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.

PDF preview images in WordPress 4.7 on Uberspace

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