First hands-on look at CE4

The new Highslide-powered slideshow in CE4.

The new Highslide-powered slideshow in 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.

Link: http://campagnapictures.com/

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 new "profile" style masthead.

The new "profile" style 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:

At 600px, the navigation should hold up on tablets, but collapse on most phones.

At 600px, the navigation should hold up on tablets, but collapse on most phones.

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.

Link: http://campagnapictures.com/galleries.php

the Gallery

Finally, I give you one image gallery using CE4 Gallery, and I'll give you the link first.

Link: http://campagnapictures.com/galleries/00-ce4-gallery-demo/

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.


18 Responses to “First hands-on look at CE4”

  1. Matt says:

    I should also mention, the design of the pages is based on a template I call “Slab”. For those who’d like to use it as a starting place, a version of this template will be made available, along with others, at or sooner after release of CE4.

    · June 11, 2014 @ 10:08 am

  2. Does the approach with underpinned individual html pages also open the option to put some tracking code for web analytics on each page?
    With Photoswipe only the first image loaded into the lightbox was registered. When the slideshow was started or images loaded by mouse click or swipe, my analytics lost track of views. (I never made it through the photoswipe callback functions.)
    If highslide will reload the html page with every view, it would be nice to have a configurable footer into which the tracking code might be dropped.

    It would of course be a pleasure to contribute translation again.

    Cheers, Michael

    · June 11, 2014 @ 3:56 pm

    • Matt says:

      The single-image HTML pages include the Google Analytics code, and I suppose you could use PHPlugins to inject other tracking code if you’d like. However, Highslide isn’t loading the single-image HTML pages; just the images. So you still wouldn’t be able to track views, unless you opted to use the single-image HTML images as your main presentation (i.e. disable Highslide).

      Highslide has a robust set of callbacks, so you might be able to setup some tracking that way, but I wouldn’t know, having never tried it and not being familiar with your tracking stuff.

      · June 11, 2014 @ 7:52 pm

  3. Hello

    I like some of the new possibilities. However it would take me a huge amount of time to convert. The reason is that I cannot use Publisher. On my site I have individual travel albums. They have a separate short description and content. That I can do in Publisher. But I cannot provide for separate keywords or a separate graphical masthead. So I have all the individual albums as their own template. So my question is: are the keywords and masthead included in the publish service ?

    · June 14, 2014 @ 12:52 pm

    • Matt says:

      What keywords? Do you mean the ones that fill in under <meta name=”keywords” /> in the document’s <head>? If so, you’re weighing importance in all the wrong places. Meta keywords these days are about as useful as year-old cake, or ice cream cones underwater. It’s content that’s important, so your “keywords” should be in your gallery description, images captions, etc.

      As for the mastheads, CE4 will allow you to target specific album templates or slugs using PHPlugins, so you can create a single template for all of your galleries to use, then use PHPlugins to manipulate the masthead graphics for each if that’s what you want to do. And if you’re one of those people afraid of PHPlugins, you needn’t be. This would be an easy task to accomplish, and we could have you sorted in the forums rather quickly.

      · June 14, 2014 @ 10:37 pm

  4. Jens says:

    Hi,
    are you going to have any support for geo tagging?

    · June 20, 2014 @ 12:11 pm

    • Matt says:

      We already do. ;-)

      · June 20, 2014 @ 9:30 pm

      • Jens says:

        I think I have missed that. I want to be able to geo tag my images so you can click on on and show on a map. Also have a map with all of the images in that album.Can you please direct me to the information about the geo tagging, please.

        · June 21, 2014 @ 6:22 am

  5. Robert Muma says:

    Can we use CE3 Galleries in CE4 Pages?

    · June 23, 2014 @ 3:54 am

    • Matt says:

      CE3 Galleries will appear on the Galleries page, but …

      1. CE4 Cart will not support CE3 galleries.
      2. CE4 Publisher will not support CE3 galleries (albums) or indexes (album sets).
      3. Pages designs are not cohesive between CE4 and CE3; you can achieve similar results, but not a perfect match.

      Further, some features — such as Shared Resources, PHPlugins, etc. — will be incompatible or different.

      In short, you will get the best results by keeping within a series, using all CE4 or all CE3, and lesser results mixing the two.

      · June 23, 2014 @ 4:58 am

  6. Simon says:

    Hi,

    Will we be able to open user saved CE3 templates into CE4 and build from there, or will we need to start from scratch? thanks

    · June 24, 2014 @ 9:22 am

    • Matt says:

      As usual, you will need to start from scratch. We’re not iterating on CE3; the CE4 plugins have been rebuilt entirely from scratch for better performance, and with a better feature set overall. I have no interest in carrying past baggage forward.

      · June 24, 2014 @ 9:38 am

  7. Hi!

    Just want to say a big THANK YOU! for creating such fantastic plugin to create websites from LR.
    I am using TTG since the CE2 and are still amazed by the plugin.
    So I am looking forward to the new CE4, already like the new gallery.

    Regards,
    Cristian

    · July 5, 2014 @ 8:14 am

    • Matt says:

      Thanks, Cristian!

      · July 5, 2014 @ 8:42 am

Comments are now closed.


CE4-Sidebar

The CE4 Web Publishing Suite

Welcome to The Turning Gate. Our plugins for Lightroom's Web module allow you to create mobile-friendly, fully responsive image galleries, websites, blog themes, shopping carts and more!

Learn more, or hit the shop!


Adobe_Community_Professional_badge


Got Questions?

Get answers in the support forum.

Find Your Order

Can't find your download? Look it up.

Need Web Hosting?

Get affordable, reliable, TTG-certified hosting with Bluehost.

Need a Logo?

We've partnered with an award-winning graphic designer and brand consultant to offer Branding Services to our users.


Get Email Updates

TTG Recommends

Bluehost

Lightroom Queen

Craft & Vision

chromasia photoshop tutorials

The Turning Gate receives a small portion of affiliate sales. This costs you nothing extra, but helps to support our work. Though compensated by affiliate relationships, The Turning Gate carefully chooses affiliates based upon the quality of services and products these entities provide to TTG users.