blogs.princeton.edu, as seen using the WPtouch Pro plugin with thumbnail images

Site admins who would like their WordPress site to be optimized for mobile devices now have a few more options. On this network, the default setting for new blogs is to have WPtouch Pro activated, but first time visitors see the “desktop theme” and can click a link to switch to the WPtouch Pro theme.

WPtouch Pro is a commercial theme that tries to create an “app-like” experience for mobile users of your site. It is faster loading and maximizes vertical space, hiding the search and page navigation behind a pop-up menu. By default it shows calendar icons next to each of your posts, but that can be changed to post thumbnails. A tablet view is also a configurable option, although the default setting is to use the WPtouch view for pocket-sized devices and use the desktop theme for tablets. If a site admin is willing to invest the time to explore all of the configuration options, a WPtouch Pro mobile site can look rather impressive.

The Jetpack super-plugin recently added a “Mobile Theme” option to its dozens of features. This plugin feature also displays an alternate theme to mobile viewers. This theme, unofficially called “Minileven,” is a minimalist version of the Twenty Eleven theme, with a more compact menu. There is a separate configuration option for an excerpt view or a full-post view. The “Edit CSS” item under the Appearance menu has an additional option to allow custom CSS to be applied to the Minileven theme. If you choose to activate the Jetpack mobile theme, you should go to the Plugins menu and deactivate WPtouch Pro on your site to avoid conflicts.

If you choose to disable both of these plugin-based mobile themes, you can rely on the responsive display of the desktop themes. All of the approved themes on this system are responsive, meaning that they adjust their display according to the width of the viewing device or window. Fortunately, the aforementioned custom CSS feature finally allows CSS with media queries, so a site owner can have full control of the CSS display on all device sizes. The responsive theme for blogs.princeton.edu is just the default Twenty Eleven theme with some custom CSS, including media queries.

Below are photographs of Ai Weiwei’s “Circle of Animals/Zodiac Heads” that I took Thursday afternoon. A second gallery of closeups and some basic instructions for adding galleries follow.

The easiest way to add a gallery is to drag multiple images at the same time over to the image upload dialog that pops up when you click the “Add media” button. After clicking the save button, a Gallery tab appears. The Carousel feature is not mentioned in the Upload/Insert dialog, but the feature is automatic if Carousel is turned on under the Jetpack options. There is also a configuration option to display embedded EXIF data.

Creating more than one gallery in a single post is a bit of a pain. You have to create a second post, insert a gallery, set that post to private, publish it, take note of the post ID number, go back to the first post and insert the gallery short code, but reference that ID number. Edits to the second gallery must be done in that other post.
Example, [

]

Because the Fancybox plugin is also active on the published site, when you close the gallery overlay, you then have to close the Fancybox popup, which is a bit annoying. If you want to use Fancybox for individual images, but Carousel for galleries, you have to add a custom jQuery selector to the Fancybox settings. Go to Settings → Fancybox for WP and click on the “Galleries” tab. Select “Use a custom expression to apply FancyBox” and paste the following line of code into the textarea and save changes:
jQuery('a:has(img)[href$=".jpg"]:not("dt.gallery-icon > a")').addClass("fancybox").attr("rel","fancybox").getTitle();

I use the “Title” field for the Carousel captions instead of the “Caption” field because I don’t like the way the Caption field displays in the thumbnail grid.

We ask that you resize your images before uploading them to your WordPress site; otherwise, you will quickly fill up your sites’s storage quota. For example, a raw 8-megapixel image from the iPhone 4S is about 3 to 3.5 megabytes. The same image when resized to 1280 by 960 pixels and saved using Photoshop’s Save for Web dialog (50% quality JPEG) is around 200 kilobytes.

We try to avoid mass email communication to users in the WordPress network, so these news updates are the primary method of communicating outages, upgrades, tutorials and new features.

It is possible to hide this dashboard widget by clicking the corresponding checkbox in the Screen Options setting up top.

There can be more than one.

A recent addition to the Jetpack “mega-plugin” is a feature that WordPress.com users have enjoyed for over a year  — the ability for Facebook, Twitter, and WordPress.com users to authenticate in the comment form and use that identity to leave a comment. Native users (in our case, Princeton netID users) can still use that identity to comment.

Active WordPress.com users, may remember this comment system’s code name, Highlander Comments. There can be only more than one?

Other comment plugins offer multiple authentication options, namely Disqus and IntenseDebate; however, those systems store the comments on external servers, and the JavaScript to load those comments can be a bit slow. The Jetpack Comments feature just builds off of the native WordPress comment system.

Jetpack Comments activation button

We will be enabling Jetpack Comments for all new sites on our network. Administrators for existing sites will have to go into the Jetpack area of the WordPress admin interface and click the blue “Activate” button. If the default WordPress comment system is preferred, site admins can deactivate that feature on the same admin page.

For more information about Jetpack Comments, check out the documentation on Jetpack.me.

Photo by LEOL30 on Flickr, CC BY-NC-SA 2.0

Early Tuesday morning, I deployed the WordPress 3.4.1 update. Users should not notice any changes to normal workflow. There may be a few blue and white pop-ups in the admin interface that call attention to new features. In the admin toolbar, if you hover over the WordPress logo in the top left corner, you should see an “About WordPress” link that lists all of the new features. In this post I will demo a couple of the new features.

First, take a look at the Caption for the metal house number photo in this post. At long last, authors can use basic HTML tags in image captions. Now you can italicize titles, insert a line break, or add a linked attribution for shared images.

The next new feature is Twitter Embeds. They work just like oEmbeds for videos. Just paste a raw (unlinked) tweet URL on its own line in a post or page. The published entry displays a stylish box with the tweet, the Twitter avatar, and some action links for the tweet. For an example, check out the meta tweet below:

We’ve upgraded the WordPress system to 3.4.1. Read about what’s new: blogs.princeton.edu/blog/2012/07/w…

— PrincetonWebServices (@PrincetonWDS) July 24, 2012

With Custom Headers, you no longer have to settle for the same height banner image on every page. You can still use the “PUWS Options” in our Princeton-customized themes, but that height value just acts as a suggested height. When you upload a banner image, the system will ask you if you want to crop the image to that suggested height or use the image’s original height. Please note that this will not work well for tall images.

Live Theme Previews allow you to try out a new look for your site before making those changes live. Not all custom theme settings are available with the live previews and the Customizer sidebar. Surprisingly, any custom CSS saved under the “Edit CSS” Appearance page should display in the Live Preview.

The next feature update for WordPress is version 3.5, set for release December 5. Barring any development delays, we should be deploying this version (or a subsequent bug fix release) to the network soon after the holidays.

(Definitely not the real logo for the Guest Account Provisioning service)

Users logging into sites in our WordPress network over the past year may have noticed a message which stated that accounts created via the Guest Account Provisioning service were not supported. This was because the usernames for these accounts take the form of an email address.

We recently switched authentication plugins (and added two more related plugins), finally allowing these Guest Account Provisioning service users to authenticate to sites on this WordPress network just like other Princeton netID users. Site admins can assign roles to these users as they would to any other netID.

Anyone with a Princeton netID can sponsor a guest account user for up to one year (accounts are renewable upon request). For more information about these guest accounts, take a look at the OIT KnowledgeBase article “Guest Account Provisioning (GAP): Answers to Frequently Asked Questions (FAQ).”

These warnings have messages like “This page has insecure content” and confusing buttons like “Don’t load (recommended),” “Load anyway,” or “Aren’t you sure you don’t want to not display the nonsecure items?”

Thanks to a plugin called “WordPress HTTPS” and a few extra configuration lines added to our reverse proxy servers and WordPress config files, these mixed content warnings should be gone for good. Also the in-browser icons that indicate a properly-loaded HTTPS page should now appear instead of the broken lock or missing icons.

We are now automatically redirecting all admin pages (/wp-admin) on all network sites to HTTPS, including the login screen.

Another benefit of the WordPress HTTPS plugin is that it adds an ability for content authors to force a page or post to be secure via an option on the “Add New” screen.

A few of the new features in version 3.4.x include a theme customizer with live theme previews, flexible heights for header images, fancy Twitter embeds just by pasting the tweet URL, and basic HTML support in image captions (credit links, italics).

Jetpack 1.5 includes a new “Carousel” view for image galleries and the Jetpack Comments from version 1.4, which I will explain in a post next week.

I also promise an entire week of posts to highlight some of the new features that we have added to the blogs.princeton.edu network over the past couple of months.

Pointer Tips could prove to be useful, even for veteran users; the evolution of the WordPress interface and the addition of new features has sped up considerably over the past year. When a user dismisses Pointer Tips, they stay hidden (their status changes in the database for that user).

The new JavaScript-based, drag-and-drop Media Uploader is a welcome change over the past Flash-based version.

If you are logged in, check out the rest of the new features on the “About WordPress” page under the WordPress icon on the left side of the Admin Toolbar. Feel free to leave a comment after this post if you like any of the new features, or if something really annoys you about the interface.

This should only affect items in the upload folders. There will be a read-only copy of the upload folders during this outage, so all sites should display as normal, and it will still be possible to create and edit any content stored in the database, such as pages and posts.

It will not be possible to upload new files during the outage, and any attempts to do so will result in an error message.

We will update this post with further information about the outage should anything change.