Images and Widgets in WordPress 3.9

The last time I wrote an article about WordPress it was at version 3.5 and having a WordPress site that was responsive to all the new internet devices was the upgrade goal for many WordPress sites. This post focuses on working with images and widgets including some new features of WordPress 3.9 and a couple of the newer plugins available within the Jetpack set of WordPress plugins.

Working with Images

Working with images has improved with WordPress 3.9/4.0. You can upload one image (with adequate resolution) and WordPress will handle the resizing and resolution requirements of most internet devices with varying screen widths and resolutions; including retina quality screens. Newer internet devices (Mac Pros, iPads, and Microsoft Surface tablets) have retina screens with more screen resolution. The Twentyfourteen theme’s largest image containers are featured images inserted as full-width pages (1038px). If the page requests those full-width featured images as retina (2x rez), then, the same featured image would need to be 2076px wide to look optimal for retina screens. The source image you upload to the Media Library would need to be at least 2076px to meet all possible image placements (retina or non-retina) for the theme.

When you upload a new image to your WordPress Media Library, your WordPress theme generates a few different sizes of that uploaded image available for placement in your posts. With retina displays, you would need an upscaled retina-ready copy of each of those images which is a lot of different-sized images to organize. To complicate matters, you need to add Javascript to check for retina devices and swap-up to higher 2x rez images on detected retina screens. There is a Jetpack plugin called Photon which handles image serving differently and with faster results.

Retina and non retina screenshots taken and overlaid on top of each other in Pixelmator.
Retina (left) and non retina (right) screenshots  overlaid on top of each other in Pixelmator.

Once you activate the Photon plugin in Jetpack you are done. Easy, and if you upload to your Media Library a source image with adequate resolution, you can have retina and non-retina images available for most devices displaying your site. Photon grabs your source image and stores it on its CDN  (Content Delivery Network) servers. When your webpage requests image(s) placed on the page, Photon delivers the requested image at the correct width and height and at the resolution your device needs, including retina quality should that page be viewed on a retina screen. Because your images are stored on a CDN network of servers, your source images are stored on multiple servers worldwide and they are delivered from the closest server which can deliver them the fastest. Example: you’re viewing a page in Australia, and the data for those page images come from a server in Sidney. By avoiding  transferring image data through major backbone bottlenecks of the internet your images are delivered more efficiently. I recommend running image-intensive posts through Pingdom’s performance tester to make sure your images are loading correctly and efficiently with the Photon-CDN technology. The Pingdom test should reveal images coming from a i2 server URL address. If any of your page images are being downloaded at their full resolution there could be problem; including having a heavy page load reading and you should re-upload that peculiar image. WordPress photo galleries with lots of pictures or larger thumbnail sizes can add to the overall weight of a page. At some point you might need to breakup those larger galleries.

Another benefit of using Photon and its CDN service is that you should be using much less bandwidth on your web server. Much like embedding videos from Vimeo’s streaming servers your video content comes from a faster video enhanced server, not your basic web server. If your site’s image and video content come from CDN locations, there is not much left except your WordPress files to deliver to your viewers. 

It’s not always easy to see the difference between retina-quality images (2x) and non retina images (1x) but here is an example gallery. Don’t bother if you don’t have a retina (4K) display if front of you.

 
io_cdn_poor_performance
This page test reveals three images that are not being optimized and will impact this page’s download speed

 

Improved Visual Editor

Resizing images with corner points
Resizing images with corner points

In my opinion, WordPress visual editor has always been its most kludgy tool that content providers use regularly to create new site content. The WordPress editor has never been a WYSIWYG editing experience. What you saw in the editor was not what you got on your web page. But with WordPress 3.9 update, the editor has improved in a couple of ways. First, there is more drag and drop capability of images than ever before.  Those blue containers within the WordPress editor representing photo galleries have been updated with real thumbnails. Now you see photo gallery thumbnails just like your published photo gallery. Another big improvement within the editor is the capability to corner-drag images to resize the image just like when using similar page layout software. If you edit a placed image, you can even crop the image and complete some other basic image editing tasks within the WordPress editor.

 

Working with Widget Content

Widgets are small content pockets sprinkled around your site. Most themes allow widgets within sidebar columns.  In my case, my homepage is all widgets. The 20+/- widgets I have direct browsers to the content within my site that I want to feature on my homepage. WordPress 3.9 makes creating and editing widget content very easy. Strangely, I don’t need to go to the Widget panel anymore, I go to my homepage within the Customizer panel, where I can add or edit any widget. I can edit existing widgets just by shift-clicking on the widget itself.

There are many widget text editors available but the Visual Editor by Black Studio TinyMCE Widget works exactly like WordPress’ post editor, so why not continuing using it for widget content? When I close the Visual Editor widget, I see my new widget content on my homepage just like it will appear on the published homepage. No bouncing around admin panels or reviewing my changes elsewhere.

Editing widgets all within the Customizer
Editing widgets all within the Customizer

The last feature of widgets that make them really powerful is each widget’s visibility. Widget visibility is all about showing and hiding your selected widgets on your WordPress pages. Remember when widget visibility was some mysterious field that required some equally mysterious conditional statement at the bottom of the widget editor panels in order to be visible or not? That complex UI has been replaced by popup menus that allow you to easily setup conditionals based on tags, categories, author, dates, etc. Your widget content can be customized for every page on your site, making each page seem unique and different. If you have Automattic’s Jetpack installed you can activated Widget Visibility within JetPack.

Being able to work within the TinyMCE editor for all content (widgets, posts, pages, images) makes content creation a more pleasant experience in WordPress 3.9.