GP Premium 1.10.0

This update revolves around the featured image sizing functionality in the Customizer.

A New Featured Image Resizer

On-the-fly image resizing in WordPress is hard. You typically need to use a pre-existing library, which means you’re depending on someone else’s code. These resizers also (sometimes) have major performance issues and can introduce other bugs to the theme. The image resizing option in our Blog module has long been my least favorite feature from a performance/code stability standpoint in GP Premium.

We started out with a library called Aqua Resizer, which had pretty significant performance issues, especially when a lot of images needed resizing on a single page. Then we switched to a library called Image Processing Queue which was somewhat better when it came to performance, but it introduced a strange persistent transient bug for a handful of our users, and sometimes just wouldn’t work under certain server conditions.

This transient bug has only been reported a few times and isn’t something we’ve been able to reproduce in any of our testing environments, but if you’re using the featured image resizing options and have noticed slow load times or an increase to your database size, check out our documentation article here.

WordPress itself comes with a set of image sizes that are created every time you upload an image. These sizes can be configured in the Settings > Media area of your Dashboard. WordPress also adds a couple of others to use in the srcset attribute when adding your images. You can also create your own image sizes using the add_image_size() function, which you can learn more about here.

In the Customizer, you can now choose from these image sizes for your featured images.

So far so good, very simple and much better for performance, but it’s not perfect. It doesn’t give you complete control over the size, which you might want to meet your required design.

That’s why we kept our width and height controls in the Customizer, which allows you to fine-tune the size of the image. Two things happen when you use these sizing controls:

1. First, it checks to see if the size you’ve input exists. For example, WordPress creates 150×150 images when you upload an image in the Media Library. If you input 150×150 in the Customizer, GeneratePress will use that existing image. This also means your existing size (if you’re using one) will be retained when you update, as the previous image resizer created that image size and made it available for use. +1 for automatic backward-compatibility!
2. If the image size does not exist, it will use CSS to resize the image for you. As you may know, this isn’t a great idea if you upload a big image and resize it down to be really small – that’s bad for performance. That’s where the image size option comes in. You can choose an existing image size that is close to your desired result, then use the width/height controls to fine-tune the size. This greatly reduces the amount you’re resizing with CSS.

Personally, I like #2, as I can choose an image slightly larger than my desired result, then size down with CSS to achieve a better quality result.

If this doesn’t work for you, you can easily create your own exact image sizes and choose them in the Customizer.

So, this new resizer does a few important things:

1. It increases the performance of your site, especially if you’re using a lot of featured images.
2. It uses core WordPress functionality and removes a bunch of third-party code from the theme.
3. It fixes a strange persistent transient bug reported by a couple of our users.

Overall, I’m really happy with this solution. Image resizing in GP Premium has been a headache of mine for a long time, and I think this solution finally puts an end to it while keeping decent control over the image sizes.

Anything Else?

The image resizer was the main focus of this update, but we did add some other minor bug fixes/additions that were necessary. Check them out in the changelog below.

This is a bit of a boring update, but it’s a necessary one. GP Premium 1.11.0 will be a lot more exciting, as it revolves around our new block plugin, GenerateBlocks. If you haven’t checked it out, it’s available for testing and very close to a stable version. GP Premium 1.11.0 will be introducing something to tightly integrate GP with GenerateBlocks, we can’t wait to show you!

Changelog

1.10.0

• Blog: Remove existing on-the-fly featured image resizer (Image Processing Queue)
• Blog: Choose from existing image sizes for featured images
• Blog: Use CSS to further resize featured images if necessary
• Blog: Fix edge case persistent transient bug with old image resizer
• Elements: Fix broken closing element in metabox
• General: Change scroll variable to gpscroll in smooth scroll script to avoid conflicts
• General: Update responsive widths in Customizer
• General: Fix responsive Customizer views when using RTL
• Menu Plus: Don’t output sticky nav branding if sticky nav is disabled
• Menu Plus: Fix focus when off canvas overlay is opened (a11y)
• Menu Plus: Fix sticky navigation jump when navigation branding is in use
• Sections: Fix visible block editor when Sections are enabled
• WooCommerce: Use minmax in grid template definitions to fix overflow issue
• WooCommerce: Prevent add to cart panel interfering with back to top button on mobile
• WooCommerce: WooCommerce: Fix secondary image position if HTML isn’t ordered correctly
• General: Add/update all translations over 50% complete. Big thanks to all contributors!
• Translation: Added Arabic – thank you anass!
• Translation: Added Bengali – thank you gtmroy!
• Translation: Added Spanish (Spain) – thank you davidperez (closemarketing.es)!
• Translation: Added Spanish (Argentina) – thank you bratorr!
• Translation: Added Finnish – thank you Stedi!
• Translation: Add Dutch – thank you Robin!
• Translation: Added Ukrainian – thank you EUROMEDIA!
• Translation: Vietnamese added – thank you themevi!