Category: WordPress

Disable Lazy Loading Images Using the_post_thumbnail() in WordPress

The introduction of lazy-loading of images as of WordPress 5.5 improves site performance by delaying them until the user scrolls into view making our pages feel faster by only loading images as we need to see them.

The Problem

However, I needed a way to disable lazy loading for specific features like this image carousel where the last few slides would not load as they rotated into view. 🙁

Image not loading on reveal in a carousel
A blank space where an image should appear. Lazy Loading somehow prevented the image from displaying on first pass while using Foundation 6’s Orbit Carousel.

The Solution

Disable lazy loading of the carousel images using this template part.

the_post_thumbnail( 'carousel', [ 'class' => 'orbit-image' , 'loading' => false ] );

The code above is inspired by modifying the attr argument using an array.

Adding ‘loading’ => false to the array disables the feature for this homepage image carousel.

The Orbit carousel now loads all images at page load.

Before and After

loading=”lazy” appears within the image HTML tag.

loading=”lazy” no longer displays with the image.

code sample using WP_query

Disabling lazy loading for a specific use of the_post_thumbnail() allows us to benefit from the feature everywhere else. 😀

Duplictity & Deja Dup as my WordPress backup workflow

I’ve been using duplicity to backup my personal WordPress website’s wp-content folder for a month and I love this new process.

Duplicity is a Linux terminal backup application that you may know by its Gnome desktop client Deja Dup which I also use to backup my computers.

My backup workflow

I backup my WordPress database daily using MySQL and bash

It quickly creates a snapshot of the database but I needed an efficient way to manage my wp-content folder where WordPress saves all my themes, plugins and media files. This is where duplicity comes in.

While logged into my website via ssh I use a simple command to create and update an archive of my wp-content folder and save it just out of public reach.

# duplicity /home/linuxboo/public_html/wp-content/ file:/var/www/backups/

Note: My website’s setup uses /var/www/html as the public folder and /var/www/ is not shared by my apache web server.

Not much has changed from a my last backup a moment ago

Duplicity quickly updates a snapshot of my wp-content folder.

As you can see above, the archive is 649 MB but nothing new was added since the last backup a few minutes earlier. This is key, only changes are recorded and it doesn’t duplicate files that haven’t changed.

In practice I run a duplicity backup every time I perform a database backup. This allows me to restore static files along the database.

Selecting a backup date in Deja Dup
Selecting a specific date to restore from my backups.

Restoring files in Deja Dup
Restoring this website’s wp-content folder to my desktop

Thunar file manager
My wp-content folder restored to my desktop

Duplicity would have been perfect for restoring that plugin I deleted six months ago ::smh::

Joseph Dickson – a month ago

Why I Love Duplicity

A few months back I had deleted a WordCamp slide presentation that accompanied my session on WP_Query. I didn’t have this workflow in place and it would have saved me a lot of time. I could have simply restored the missing files along with the database to my local testing server.

As duplicity’s archive grows I will probably prune it along with my webhost’s log files to keep my Ubuntu droplet nice an lean.

Over the next few months I may even go as far to run a cron job that updates the duplicity backup and the WordPress database so all I need to do is log in to download them. 😉

Offline and Duplicate Backups

Below is an example of an local archive I earlier today which includes the duplicity backup, MySQL database, wp-config.php and .htaccess that can be used to clone or restore my website at another location. 😀

Most importantly I can store this on my desktop where I run daily backups and copy it to a USB flash drive in the event my webhost, computer crash on the same day I’ll still have a third offline backup.

Why Backup Manually?

I wanted to take a more personal and intentional approach to backing up this website and canceled my Jetpack account a few months ago which provided flawless daily backups and restoration via VaultPress.

Jetpack has a lot of features I really didn’t use or appreciate so taking on the challenge of keeping my own local archive of my website seemed like a good idea. I now backup my website’s backups along with my desktop and laptop 🙂