WELCOME TO THE BLOG

ProPhoto 6.8.0

680

Today we’re pushing another auto-update with new features to ProPhoto 6, version 6.8.0. This version includes:

  • Menu item design on-boarding
  • Image lazy loading
  • An improved “Morgan”
  • Removal of embedded help widget

Menu-item Onboarding

This release adds another step to our design on-boarding process, which allows you to connect certain menu item types to actual content in your WordPress site. Many designs include menus with menu items pointing to WordPress pages, ProPhoto galleries, and WordPress categories. Previously, when activating a new design, any of these menu item types ended up not working, and the user needed to find them all from the menu builder area of the customizer and point them to their own content.

This is vastly improved in 6.8.0. Now, during the activation process, the user will be presented with a screen isolating just the menu item types that need attention:

2016-08-09_17-05-52

If you want, you can also create new WordPress pages, categories, and ProPhoto galleries right from the assignment dropdowns. This is helpful if you don’t have content to match the menu items and want to quickly create a new page, category, or gallery:

2016-08-09_17-07-33

Also, we added a button to the current active design which allows you to re-access the onboarding setup process for your current active design:

2016-08-09_17-10-21

Image Lazy Loading

Also new in 6.8.0 is image lazy loading. This is very similar to the feature from older versions of ProPhoto, only more modern, performant, and adapted for P6 responsive sites. Lazy loading will load images as they are about to appear on screen, while photos further down the page are only downloaded as the visitor scrolls. The net result is that your initial page load speeds should be a lot faster, especially if you tend to post lots of images.

The image lazy loading feature is currently off by default, since it’s a new feature, so if you want to start using it, you’ll need to go to “ProPhoto” > “Settings” > “Site Settings” > “Misc.”, and enable it:

2016-08-09_17-28-13

Improvements to the Morgan Design

The “Morgan” included design has proven to be our most popular free included design, so in this release we also spent some time going over it to bring it up to date with all of the new features, and to improve some usability issues with the initial construction of the design. We’ve simplified the structure a bit and provided some better defaults, plus set it up to work well with our new on-boarding process. We’re hoping the end result is that it’s a smoother experience for new users choosing to start from Morgan.

Removal of embedded help widget:

2016-08-09_17-38-48

This release also removes the embedded help widget from the WordPress admin area shown above. The help widget was always meant to be a temporary thing during the beta and early public release period while we beefed up tutorials, documentation, and our P6 help-ticket workflow.

Don’t worry, help is still just a moment away at any time. The customizer still has a link to our website where you can contact us:

2016-08-09_17-42-29

Or, if you’re not in the customizer, the main WordPress “ProPhoto” menu has a link too:

2016-08-09_17-41-40

More Info…

As always, if you want even more detail, you can review the official changelog here.

With this release milestone Lizzie is 73% complete, and we’re working this week on the last three items: WPML support, pinterest pinning of individual images, and form multiple choice fields.

ProPhoto 6.7.0

670

Today we’re pushing another auto-update with new features to ProPhoto 6, version 6.7.0. This release is loaded full of good stuff, including:

  • Front-end background image finder
  • Inspect and click to edit blocks/rows/columns from front-end
  • Design on-boarding wizard
  • Customizable form submission email subject & body
  • Form submission success/error redirect urls

Background image finder

In our ongoing focus on usability, we identified template background images as a source of a lot of confusion. Background images can be applied at the template, block, row, and column level, as well as in menus and other places — so, if you’re looking at a design for the first time it can be tough to find where to edit those background images.

This gets a ton easier in 6.7.0. We’ve added to the ProPhoto Bar we introduced in 6.5.0 a new background image finder. To use it, visit the front of your site, expand the ProPhoto bar, and click the background image icon:

2016-08-03_10-27-35

After clicking, you will see thumbnails of all the background images used in that page:

2016-08-03_10-26-20

Then, you just click the one you want to edit, and you’ll be taken into the customizer, in the right template, to the exact place where you can edit or delete the background image, as shown here:

Inspect Blocks, Rows, Columns, and Widgets

In 6.5.0, when we introduced the ProPhoto bar, it allowed you to inspect and click to view widgets from your site front-end. Now, in 6.7.0, this functionality is majorly improved, to allow you to inspect blocks, rows, columns, and widgets. Just click the inspector icon in the ProPhoto bar to get started inspecting:

2016-08-03_10-27-35

When you click that, you’ll immediately see a filter area, that allows you to select which types of items you want to see. By default you see all types, but you can turn off some to focus on what you’re interested.

2016-08-03_10-36-54

Then, when you hover over your site, depending on what your filter is set at, you’ll see different colored outlines for the four different types of areas. The effect is hard to capture in a still image, so here’s an animated gif showing how it works:

As you can see, clicking one of the edit links again takes you into the customizer, and very clearly focuses you on the element you’re interested in.

We’re hoping the new improvements to the ProPhoto bar will be super-helpful for our users as they navigate and customizer their designs.

Design On-Boarding Wizard

Also in the arena of usability, 6.7.0 introduces a new design “on-boarding” wizard. The goal of this wizard is to guide users through a few basic steps when activating a new design in P6.

Now, in the Manage Designs screen, when you click to activate a design:

2016-08-03_11-34-32

You’ll be guided through our new on-boarding wizard. The first step is to set what you want to show on your site front (this functionality was released in 6.6.0 in the customizer):

2016-08-03_11-27-47

Next, the on-boarding wizard shows you a list of assigned and unassigned templates in that design, and gives you a quick easy way to assign unassigned templates to individual WordPress pages, which is often what those unassigned templates are meant for:

2016-08-03_11-30-53

Finally, the third step of the onboarding wizard gives an explanation of how to find things using the front-end ProPhoto bar tools. Next up in 6.8.0, we’ll be adding a step to the on-boarding process that allows users to connect menu items of certain types to content on their site.

Customizable Form Submission Email Subject/Body

Also in 6.7.0 are a handful of enhancements to the Forms feature. First, we now allow you to setup a custom email subject and body for the notifications you receive when a user submits one of your ProPhoto forms:

2016-08-03_11-42-14

The subject and body use special placeholders. These placeholders are tied to your custom form elements by means of a new field in each element window, the admin identifier:

2016-08-03_11-43-09

These identifiers allow you to give every form field a special label that you can use wrapped with double curly-braces in the email subject and body to represent the place that will be filled in with dynamic data from the submitted form.

2016-08-03_12-02-15

Form Submission Redirect URLs

Also new in 6.7.0, you can now set default form submission redirect urls, to guide your form users to a specific url on success or failure, instead of the generic success feedback text. You can set the default in the ProPhoto “Settings” area:

2016-08-03_12-14-35

And also override the redirect urls on a per-form basis in the customizer:

2016-08-03_12-07-43

And more…

There’s even more in 6.7.0, including form submission custom email recipients, form remote sending, excerpt read-more link toggle, and bugfixes. Checkout the whole changelog here, if you’re interested.

With this release milestone Lizzie is 54% complete, and we’re working this week on image lazyloading, menu-item onboarding, WPML support, and pinterest pinning of individual images.

ProPhoto 6.6.0

600

Today we’re pushing another auto-update with new features to ProPhoto 6, version 6.6.0. This release is mostly focused on usability, and introduces two new features:

  • Branching the customizer to clearly show design vs template level settings
  • P6 designs now control what content (page vs posts) shows on your site front

Customizer Design/Template Branching

In the P6 customizer, some settings apply at the Design level — that is, they affect all templates in your design — and other settings apply only to the selected template. Prior to this release, we didn’t do a good job showing which areas were which, adding unnecessary confusion. Now, the main left-hand menu of the customizer is split between design and template contexts:

2016-07-19_15-48-16

Whenever you are changing settings that are at the Design level, a consistent green color will be used to visually reinforce the editing context, and make it clear that your changes are affecting all of your design templates. As an added bonus, this also frees up some more room in our menu sidebar for the growing features of P6.

Site front control

We are in the midst of a push to build a user-friendly design “on-boarding” process, to smooth out the difficulty of getting started with a brand new design in P6. Part of this is making it easier for users to control what their WordPress site displays on its front page — a static WordPress “page”, or your recent posts.

This setting has always been in the WordPress “Options” > “Reading” area, but was unintuitive, and hard to find and use. Plus, it was very restrictive because the settings applied to your whole site, no matter what theme or design you were using. Starting in 6.6.0, ProPhoto designs now control this setting. This means that different designs can have different settings for what shows on your site front, and that it won’t affect your non-test-driving theme if you are test-driving P6.

You can find the new setting area in the Customizer under “Design” > “Front Page”:

2016-07-19_16-14-34

If you choose to show a “page” for your front page, there’s an easy to use area that allows you to select an existing page or create a new page for both your front page and blog posts page:

2016-07-19_16-17-40

2016-07-19_16-43-32

2016-07-19_16-18-15

This new site front page control area will also be leveraged in our design-onboarding modal feature, which we hope to release about this time next week.

As always, more details on the changelog.

ProPhoto 6.5.0

650

Today we’re pushing another auto-update with new features to ProPhoto 6, version 6.5.0. Highlights of this release include:

  • New “ProPhoto bar” front-end helper with direct widget edit links
  • Content image max-height constraint
  • Use form email fields for email notification replies
  • Cross-browser customizable form validation

ProPhoto Bar

Probably the most consistent feedback we get about P6 is something along these lines: “Wow, P6 is so great, but it has a bit of a steep learning curve.” It’s a fair assessment. The incredible flexibility provided by the infinite combinations you can make out of templates, blocks, rows, columns and widgets means that you can build every page of your site exactly to your liking. It also means that it’s easy to get lost and not know where to go to change something.

Therefore, we’ve begun to devote a lot of our development time to making P6 easier to use. You’ll begin to see a steady flow of helpful usability improvements coming in the weeks and months to come. We’ve got a lot of stuff in the works to make initial design setup simpler and more intuitive, and aids to help you know exactly where you are and where to go to customize whatever you want to change.

The very first of these comes today. In this update we’re introducing a new front-end helper that we call the “ProPhoto bar.” Sounds delicious, right? If you’re logged in as an admin, you’ll see this little square in the lower left side of your screen:

2016-07-12_11-12-18

Click the square, and it will expand into the full ProPhoto bar, as shown here:

2016-07-12_11-14-06

The first two items you’ll see you should recognize — these we pulled down into the ProPhoto bar from the WordPress admin bar where we originally placed them. One is a display of the template currently being used by whatever page you’re viewing, and the other is the responsive screen size your browser is currently at. We have plans to greatly expand these simple info areas to give you rich, interactive detail — which is why we pulled this out of the WordPress admin bar. We’re going to need a lot more room and control. More to come on this front later.

Keep looking at the expanded ProPhoto bar and you’ll see the new “inspect” icon:

2016-07-12_11-14-06

Clicking on the inspect icon changes you into “inspect” mode. Now, hovering over your site, you’ll see outlined all of the individual widgets with direct edit links:

p6-inspector-demo

If you click one of the widget edit links, your customizer will open, and we’ll automatically scroll you to the widget you clicked, and highlight it for you:

2016-07-12_11-18-17

Very soon the “inspect” mode will be expanded to show you blocks, rows, and columns, and allow you to link directly to those as well. This is just the tip of the iceberg. Eventually, we hope that you’ll be able to get loads of helpful detail by mousing over things on your site front end, helping you connect what you see visually to the right place to make changes. Stay tuned for more on this.

Content Image Height Constraint

One of our most upvoted enhancement requests was for content image height constraint. For a fully responsive site like P6, you want to upload pretty large images to make sure they look great on large laptops and desktop screens. But these large images can sometimes display taller than you would prefer.

With this new feature, you can now specify if and how to constrain your post content images.

2016-07-12_11-27-49

You can constrain your images to a percentage of either the window height, or width. This feature is turned off by default, so if you want to use it, jump into your customizer, go to your base template, and find the “Content” > “Content Images” area.

Forms Enhancements

We’ve also got a bunch of enhancements in the queue for our “Forms” feature. The first of these land in 6.5.0.

Form Email Reply-To

In 6.5.0, when setting up an email field in one of your forms, you can designate that the email address supplied should be used as the address to send replies to when you reply to the ProPhoto automated form submission notification emails.

2016-07-12_11-32-17

Form Cross-Brower Validation

The initial implementation of the ProPhoto ‘Forms’ feature relied on native browser field validation for fields marked required (which is not supported correctly in Safari), and did not allow you to customize or translate the invalid state messages. This is solved in 6.5.0.

You can now change or translate the invalid messages:

2016-07-12_11-39-17

2016-07-12_11-43-13

More to come…

We have lots more on the way fairly soon, including more inspection mode helpers, a design template-setup wizard, form improvements, and grid enhancements. Thanks for all your valuable feedback.

As always, if you want to read more of the nitty-gritty detail, check out the P6 changelog.

Using Templates in ProPhoto 6

templates1

A common question that we have gotten from customers over the years is how to differentiate parts of their site to look and function uniquely.  For example, “I want to have a Wedding section on my site, with it’s own unique menu items and design, separate from the Newborn section of my site, is that possible?”  In prior versions of ProPhoto, hacky workarounds could be used to “sort of” pull it off.  But they were a lot of work and rarely achieved what a customer was really wanting.

In ProPhoto 6, we’ve made this totally possible by way of a new feature called templates.  Each template is simply a saved set of customization settings that you can apply to any page type, or individual page that you want.  And you can create as many templates as you’d like!

Template Selection Example

Using the power of templates, you can create completely different layouts and apply them to different areas of your site, allowing you to basically create multiple sites within one.  But templates can also be used for more subtle changes as well.  For example, if you have just one particular page where you want to add a sidebar column that runs alongside your content, you can create a template to do this and apply it to just that one page, without affecting any other pages on the site.

Template Creation

Whenever you want to create a new template in ProPhoto, all you need to do head to the Template Manager area.  There, you can create copies or children of existing templates.  If you create a copy of a template, it is just that, a copy that you can edit however you’d like, separate from the template that you copied it from.

Template Manager Example

This is what the Template Manager looks like…

A child template on the other hand will still inherit all of the settings from the parent of which it is created.  That way you can make changes to just the parent template and they will flow down to all of the child templates automatically.  This is very helpful where you are wanting templates that share many common elements, but maybe have just a few slight variations.

Template Assignment

To assign templates to your site, you can do it very easily right within the Template Assignment area.  This area allows you to assign any template you’ve created to any particular page type on your site, like individual post pages, category archive pages, etc.

Template Assignements Page Example

Or, if you want to get even more detailed and assign templates to individual pages specifically, you can do that right within the WordPress page editor.

Individual Page Template Assignment Example

Follow us for the latest:

@pro.photo latest tweet:

Get a $30 rebate when you choose our recommended host, Bluehost