First hands-on look at CE4
Last week, we announced the upcoming release of the CE4 series plugins, the next generation of our web publishing platform for Lightroom. Today, I'm excited to give you the first public hands-on with CE4 creations.
At Campagna Pictures, I am now running demonstrations of CE4 Pages and CE4 Gallery. I'd like to walk you through it, and will provide relevant links as I go.
the Home page
Created by CE4 Pages, the Home page is running our redesigned full-screen "flip" gallery. Compared to last generation, the interface has received an overhaul to become smoother and more attractive. More exciting, the presentation is now suitable for mobile devices such as the iPhone or iPad, and supports swipe gestures (up and down) to advance through the images.
Options still exist to utilize a Galleria slideshow as a mobile fallback, but this is no longer a requirement. This demonstration does not use any fallback, so please test-drive the presentation on your phone.
the Galleries page
Also created by CE4 Pages, the Galleries page utilizes our auto index to list available image galleries. You will probably notice most of the galleries on the page have ugly thumbnails; these are the old CE3 galleries from the previous design and will be replaced. Don't fret it; the first gallery on the page is a new CE4 Gallery, I've provided an appropriate and attractive thumbnail, and we'll talk about the gallery itself further on.
In the meantime, I'd like first to call your attention to the masthead:
The familiar banner-style masthead from previous releases is still available, but I wanted to show you this new "profile" type masthead, modeled after social network profiles. This is a great option for those of you with icon logos, or who might want to give your site a more personal touch, as I've done hear with a headshot.
And if you view the page on your tablet, you will also notice that the navigation does not collapse. That's because I've set the mobile breakpoint for my navigation to 600px, using this slider:
Finally, the album icons themselves are more responsive than ever before, and will now resize, reflow and maintain aspect ratio as the viewport reduces in size. This is using the "Iconic" layout.
Finally, I give you one image gallery using CE4 Gallery, and I'll give you the link first.
These are a handful of images from last week, on my tour of Australia's Great Ocean Road. I haven't titled or captioned the images yet, so you won't see any metadata on the gallery (though I assure you, it's supported).
As you would probably expect, the gallery is responsive for display on tablets and mobile. With CE3, the gallery's mobile layout was used for both phones and tablets; with CE4, the tablet layout -- even when held in a portrait orientation -- more closely resembles that of the desktop. And if metadata were displayed on the grid, you'd see it on the iPad as well. Maybe next time I'll think to show you this before publishing the demonstration ...
On desktop or laptop browsers, the gallery is using Highslide JS for the image presentation. The slideshow has been completely redesigned, though, and is now sexier than ever, more functional than it's ever been, and yet puts even greater emphasis on your images than ever before.
The slideshow controls are separated and relegated to the corners. Buttons are small so as not to distract from the images, but perfectly functional for mouse clicking. Keyboard navigation is still supported using the arrow keys. In the bottom right, you will see the new permalink and social sharing buttons. These require some explanation.
You may remember way back before the original CE, we offered TTG HTML Gallery. It served images on single-image HTML pages, but never made the leap to the Core Elements series. In CE4, every gallery is underpinned by these single-image HTML pages. You may use them as your primary presentation method, or just let them rest in the background while Highslide steals the show. Being there, these pages allow us to do great things. Permalinks point to them, so that every image has its own fully functional landing page for incoming links. Having these pages also allows us, at long last, to share specific images to social media (you may recall that with CE3, you could only share the entire page, not individual images). So you may now send specific images not only to Pinterest as before, but also to Facebook, Twitter, LinkedIn, Google Plus, and via Email. With CE4 Gallery, you are empowered to take advantage of social media as never before!
On mobile, Photoswipe is out. CE4 Gallery gives you "Magnific" and "Touch" as options, with Magnific being the winner for performance and Touch being the winner for features. In this demonstration, we're using Touch. Swipe-and-drag to navigate, or use the Next/Previous arrows. Also supported, pinch to zoom; on the third image, zoom in for a closer look at that koala in the tree! It gets better, though, because the mobile presentation also supports the same permalink and social sharing buttons as in the desktop view.
So that's your first look at CE4, and I hope you like what you're seeing. There's a lot more to talk about, coming soon.
If you should happen to click on the "Blog" or "Bio & Contact" items in the menu, those are both pointing at CE3 Theme for WordPress; I haven't updated that yet.
And you should know that I'm still tinkering, so if you should happen to land on broken or error-filled pages when using the links above, please check back a bit later; it probably means I'm in the midst of making adjustments. For now, the pages are good and I'm finished tinkering for the night.
Let me know your thoughts, or hit me with questions in the comments below.