More on music in P4 slideshow galleries

As I mentioned in my last post, in our most recent update we restored ProPhoto’s ability to play music for slideshow galleries.

ProPhoto3 was able to play music with slideshows, but when we were building P4, we completely ripped out the flash slideshow player and rebuilt it using pure HTML/CSS/JavaScript. Due in part to a time-crunch, some laziness, an ambivalence to music on websites in general, and some tricky technical issues, we never got around to restoring this functionality until last week.

How we did it

In rebuilding the music player, we wanted to avoid using Flash if at all possible and instead adopt the new HTML5 “audio” element. While this seems fairly straightforward, it turns out there are some problems to workaround. Namely:

  • not all browsers support the HTML5 audio element (notably Internet Explorer)
  • not all browsers can play MP3-format files through the HTML5 audio element because of copyright and licensing issues (notably Firefox, because of it’s open-source nature)

The good side of the force…

So, what we ended up doing is this: When we detect a slideshow with music, we dynamically load an HTML5 audio element for all browsers that can support it, and can play an MP3 through it. This includes iPads and iPhones. For these browsers and devices, the play/pause button on the ProPhoto slideshow is a basic toggle control to the invisible HTML5 element, and the entire audio player is 100% flash free.

And the dark side…

Alternatively, on browsers and devices that either don’t support HTML5 audio, or can’t play MP3s with it, we dynamically load a 1px by 1px invisible Flash movie off of the edge of the screen. Then, for these browsers, the play/pause button on the slideshow communicates silently via JavaScript with the invisible, off-stage 1×1 pixel flash movie, to start and stop and control the audio playback. So, for these browsers, we have added back in one small Flash element as a fallback when HTML5 audio playback is not possible. Just in case there’s any anti-flash purists out there who are upset by this fact, just be aware of these facts:

  • Flash is loaded only when there is a slideshow with music present, and then only for browsers that don’t support HTML5 MP3 playback
  • when Flash is loaded, it is loaded via JavaScript, so Google never sees anything except the pure HTML5 markup
  • All modern browsers and devices (including iPhones, iPads) are never served Flash under any circumstances

Site-wide audio

There still remains one aspect of what ProPhoto3 could do that we have not yet restored, and that is overall site music — background music for your site itself.

At this point in time we are not certain that we will ever restore this functionality. It’s at least not coming back anytime soon. The reasons why we’re currently not planning to work on site-wide music are:

  • background music for websites generally annoys the user and is considered poor usability
  • background music significantly slows down page load times
  • there is no simple way to keep music playing back continuously when the user navigates from page to page within your site
  • there are several high-quality free WordPress plugins that can add general site background audio for those who still want it

P4 Auto-update details, build #990

This afternoon we’re pushing another free auto-update to P4. Everyone on a capable web-host (about 96% of you) should see ProPhoto auto-update itself within 24 hours. This auto-update has some pretty cool new stuff, and I’ll be blogging more in the coming days about some of the details of the new features. Here’s a couple teasers:

Music for slideshows is back…

…and better than ever. We removed music support completely when we dropped all flash in our P4 upgrade, but now we’ve added back support for music in slideshows with a non-flash, HTML5 music player that also works on iPads and iPhones. ProPhoto will also automatically reconnect all of your old P3 MP3 files to your imported P4 galleries. More details in a future blog post.

Basic Pinterest support

This is only the beginning of our plans for Pinterest integration in the weeks and months to come, but we’ve started by adding simple, built-in Pinterest “Follow” and “Pin site image” options into the “Call to Action” option area. Check it out and let us know what you think.

Facebook “Like” button improvements

Improved Facebook integration was the most requested new feature in our recent poll, so we’ve already gotten started making improvements. We’ll have lots of details in future blog posts, but the basics of this update include:

New free starter design: Sunny California

We teamed up with Matt from LaLune Creative to add a new, free starter design, called Sunny California.

The new design looks great, and makes use of the new built-in Pinterest Call-to-action functionality. One of the reasons we added this new starter design was to replace “Late August” as the default starter for new users. Late August is great, and still a free, included starter design, but it’s not the easiest to edit and customize, so we thought it would be a win for usability to start out with a more straightforward starter design.

The gory details:

For the nerdy or incredibly inquisitive out there, here’s the standard run-down of just about everything that was changed since the last auto-update we pushed:

  • 02/08/12 – restore music files from P3 slideshows that had music and were imported into P4
  • add MP3 music functionality back to ProPhoto slideshows, without using flash for iPads and iPhones
  • 02/07/12 – stagger automated Emailswarning users about dangerously out-of-date WordPress installations, so as not to overwhelm our support staff
  • fix rare problem with certain Font Squirrel web kit zip uploads
  • 02/06/12 – mobile masthead needs to obey modifications on certain page types
  • 02/02/12 – Facebook “Like” and “Send” button integration in “Call to Action” areas, with new HTML5 API, allow commenting on FB while liking
  • fix mobile menu WordPress “Page” links to use correct, pretty-permalink URL
  • fix grids in sliding sidebar drawers not obeying font customization settings
  • apply image drag/drop protection to large images in post excerpts
  • fix bug in masthead slideshow modified on certain pages logic with header layouts where masthead and logo share same line
  • 02/01/12 – revamp Facebook “Like” button in post footer area, switch to HTML5/JavaScriptSDK API, allow addition of “Send” button and commenting while liking
  • 01/31/12 – prevent rare problem where multiple P3 galleries where being replaced by one gallery after import, caused by 32-bit integer overflow and very large Post IDs
  • add new, free, default starter design “Sunny California” – props Matt Hudson and LaLune Creative
  • add very basic Pinterest integration into Call-to-action area, follow button and pin-site-image functionality
  • fix problem with Twitter tweet date-permalink URLs caused by new Twitter API
  • prevent saving of designs with empty ID, caused by rare P3 data corruption issues
  • ensure proper import of P3 non_design options that are now design options in P4, these were getting inadvertently stripped out during import
  • don’t put private posts into grids
  • sites on NSX.APLUS.NET nameservers are non-auto-upgrade-capable because they run a Zues-like NFS filesystem that can cause major failures on auto-updates
ChristenFebruary 8, 2012 - 9:07 pm

You guys just keep making things better and better!! Unreal. 🙂 Thank you for being one of the best businesses I have ever worked with.

Diane StredickeFebruary 8, 2012 - 9:15 pm

You guys are awesome.

Cormac O'KellyFebruary 8, 2012 - 9:39 pm

Jeez, I only bought Pro Photo 4 yesterday and I’m loving it.

These updates are terrific and my tired old blog has gotten a whole new lease of life and more importantly, I have a new impetus to write.

Thanks guys.


Tiffany KelleyFebruary 8, 2012 - 9:43 pm

Loving these updates! Thanks for doing such great work!

Arnaud A.February 8, 2012 - 10:08 pm

WOW, is all I have to say, this was a little while coming, and I’m glad you made right in this update so shortly after the poll.

Keep up the good work.

Now get started on some awesome new gallery slideshows styles and features. 🙂

Poll: what should we be working on next?

ProPhoto users, now’s your chance to influence what we work on next! Choose up to three of the below items that are most important to you. If there’s something you desperately want us to work on that is not on here, leave a comment.

Please help us by sharing this poll:


To other ProPhoto users you know!

EricJanuary 30, 2012 - 9:47 pm

More options to set up a custom home page, to turn prophoto not only in a blog theme but a full cms theme!

david westJanuary 31, 2012 - 5:54 pm

PLEASE implement music, I know a lot of people are against it, but I have found that my bookings doubled when on a slideshow… all those doubters, you can always turn it off if you don’t want it….

Its essential honestly, try it ans see!!!

David WestJanuary 31, 2012 - 5:56 pm

make a Custom page, (Like the bio page) but we can have as many as we want and can be implemented anywhere , so we can add widgets to any page!!!

also the ability to turn set the number of blog posts on the home page for instance, i dont want any to show ..

Rikki D. Dy-LiaccoFebruary 1, 2012 - 4:05 pm

@David: You can set it to show nothing but a slideshow on your front page. It’s referred to as a “static page”. is this what you mean?

elenaFebruary 5, 2012 - 12:59 pm

I was going to ask to the support team about the Google Fonts, but here is my answer.
Integration with 2.0 and social network is quite nice, but fonts integration is starting and the possibilities are huge, dont let it down!

stephanie beatyFebruary 5, 2012 - 2:12 pm

Threaded comments!!!!! But wait — you have them in this comment post. Is this a feature available now? I have tried by without success–and no info in the support threads on how to accomplish. Plugins don’t seem to integrate with the theme.

phototristanFebruary 5, 2012 - 3:34 pm

+1 on this. I’ve been asking for threaded comments for years.

Norbert WoehnlFebruary 8, 2012 - 2:30 pm

Threaded comments, a client proofing area, and EXIF data support.

Renee WFebruary 8, 2012 - 4:21 pm

One more vote for inline comments! Interesting that they do have them here 😉 It must mean they’re getting close !!

HowieFebruary 8, 2012 - 8:57 pm

Another vote for threaded comments please!

UI Change: Posting-area Media Buttons

As part of the auto update we pushed this morning, mixed in with the minor bug fixes, we also made one fairly noticeable improvement in the ProPhoto user interface.

Before build #948, in the WordPress admin area new/edit post/page screens, we inserted three buttons to give you access to ProPhoto-specific media actions, see image below:

The old interface had a couple problems:

  • it didn’t play nice with plugins that were also trying to add buttons in this same area (like Gravity Forms, and several others)
  • the buttons wrapped awkwardly when the browser window was too narrow
  • it didn’t leave us hardly any room to add more buttons for future features
  • the buttons generally looked like poo

So, to address those issues, we replaced the old buttons, with a sleek new simple dropdown that matches the style of the ProPhoto customize page:

The new interface fixes all of the problems with the old buttons:

  • buttons no longer look like poo
  • plays nice with plugins
  • doesn’t wrap awkwardly
  • gives us room to add more features/functionality in the future
  • visually matches other ProPhoto admin elements
EricJanuary 30, 2012 - 9:49 pm

Great change! But the name of the button is a little bit confusing with the prophoto tab in the admin menu, a different name like P4Images or something else would be welcome.

Christine ChobirkoFebruary 7, 2012 - 1:47 pm

Thank you for continuing to SIMPLIFY…you know your customer base. I have a question. When I move images around in my masthead slideshow a couple of them lose color saturation. When I move them back to their original spot the saturation comes back.

Jared HendersonFebruary 7, 2012 - 2:03 pm

Christine, shoot us a support request — changing the order of masthead images should not affect saturation, unless possibly your masthead images are not the same size, so they are only being downsized in some orders.

P4 Auto-update details, build #968

This morning we pushed another auto-update to P4 users on web-hosts capable of handling automatic updates. The auto-update fixes a number of small glitches that affect some users.

The biggest bug we fixed was that for about half of the users that purchased in the week, the green “Edit” links on ProPhoto Gallery and Grid placeholders wasn’t working. That’s fixed now, sorry about that.

If it hasn’t already done so, you ProPhoto blog should auto-update next time you log in. If it doesn’t, you’re probably one of the 5% or so of our users on web-hosts not capable of handling auto-updates. If you’re in that group, don’t worry, there’s no need for you to update to the latest build unless you’re directly experiencing a problem. If there is a critical update you need, we will notify you about it.

For the curious or nerdy out there, here is a fairly exhaustive list of all of the changes since the last auto-update we pushed, build #944:

  • 01/30/12 – refine wording on upgrade notification for non-auto-upgrade-capable hosts
  • 01/27/12 -correct typo causing broken link to comments-header help tutorial
  • new mini-feature: secure, generated .zip download links for latest build in ProPhoto admin area
  • fix ajax spinner image rendering glitches caused by WP 3.3
  • 01/26/12 – force widgets page out of accessibility mode to ensure proper JS functionality and widget saving, especially with Grid widgets
  • add more WebHosts and server types to internal info functions
  • 01/25/12 – fix grid and gallery placeholder image “Edit” links not working since recent change to ProPhoto post create/edit toolbar links
  • convert Gallery quasi-posts (Lightbox in Post and Slideshow in Post) to function like WordPress “Pages” and obey Page-specific logic for other features
  • 01/24/12 – don’t show Facebook “Like” buttons on gallery quasi-pages because Facebook rejects these URLs for some reason, will fix later
  • don’t die when encountering a photoshop psd file, instead handle gracefully and prohibit uploading, even when with .jpg extension
  • fix scroll to contact form issue in Firefox
  • allow for plugins, esp ProPhoto Tweaks, to override removal of “From URL” tab in WordPress media upload area
  • fix rare JavaScript bug that broke menu admin when menu structure contained only one link and was set to “split”
  • 01/23/12 – change sidebar CSS selectors so that widgets can properly override it with widget-specific css, fixes problem with vertical nav widgets not rendering correctly
  • new dropdown on WordPress admin posting page, instead of several ProPhoto buttons, to play nicer with plugins and allow for future growth
  • fix recent posts grid cache not clearing when future-scheduled posts published
  • fix slideshow active thumbnail border color which was not applying

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