Category: Web development

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' );

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