Jan 25

Secured Pages Under Public Menus Workaround in WhippleHill Podium

We had a need where we wanted some pages for the Parents’ Association to have public pages in our public navigation but also wanted to limit access to a few of the sibling pages. This is not the default functionality of the current WhippleHill Podium Page Manager system. Due to the way the pages get their security settings via the menu/page hierarchy makes it so that public or non-secured menus cannot have secured pages underneath it. All makes sense and totally acceptable. But, I still wanted to do it. Making sense and having things be acceptable has never stopped me before and didn’t this time either. I figured out a simple way to do that. It involves standard functionality of Podium, but a little use of redirect pages, vanity URLS. The initial effort is not minor, but the lasting value for your community might be worth it if you want to have a smooth transition from sibling pages that the world can view to those that you only want certain roles in your community to view. Here goes what I did with my example, your need will probably differ but hopefully this helps seeing the options you have.

Working within the functionality of the software

We have a top-level, or “Level 1″ menu that is part of our over navigation to every visitor of the website. Under that we have a menu that we wanted to have pages that are navigationally visible publicly, but require the visitor to have a level of security with a login to be able to view the content of the page. We did not want to do anything custom on the recently updated site, but still provide a non-disruptive flow for our parents. Again, your level of need may be different than ours. You might be able to just get by with a vanity URL for your community but we wanted something that would be more fluid for the parents, reward being logged-in to the site and blur the line between what was public and private content without constructing what felt like two separate sites under a single one.

Our Situation and Process

Here is what our sibling pages under the PA area of the website look like. We have the first two tabs (Mission & Welcome, Board & Committees) on the horizontal menu on the site are public and have page content. The other three tabs were actually pages (with channel content) nested under the PA public section originally but we wanted to secure them.

Sibling Pages with Horizontal Menu channel under a "Level 2" menu structure in WhippleHill Podium

Step 1: Get vanity URLs Going ASAP

If you aren’t using the SEO tab on your Podium pages, you are crazy. Do it immediately. If for no other reason, it is something that can really help you when you need to link to other pages and manage the site. As we also found out in the recent transition to a redesigned site, making effective use of the vanity URL functionality in WhippleHill Podium helps search engine referrals stay consistent between sites since Google and others reference those if you have them setup.

Adding a custom or vanity URL under the SEO tab in Page Manger

Step 2: Creating organization and redirects in the secured part of Page Manager

In Podium Page Manager, I took these three pages we wanted to only allow a certain group (role) in our community to have access to and created a new “open child” page with the desired security-level. Creating the “open child” page and securing it really is just to make a folder and something you can tack the pages you are moving into the secure world of Page Manager in an orderly way. Here is what the structure in Page Manager looks like after we are done.

In the above screenshot from Page Manager, the bottom three pages have actual content along with vanity URLs and were moved under this non-public “child only” page title “Parents’ Association (Secured)” which is kind of used too because of the page title channel to show users when they are in or out of a secured area. “Mission & Welcome” and “Board & Committess” are the same titles as the public pages under the website nagivation, but the are not really pages. They are just placeholders that redirect to the public page that has it’s same name. You can see in this detail of the page from Page Manager.

Page created in the secured area to redirect to the public page

I set up these two pages so when we have the horizontal nav on the secured pages linked to the siblings, it would look identical to the public pages. When clicked from one of the secured pages, it will use the vanity URL to go over to the public page cleanly. The user doesn’t know or care what is happening behind the scenes.

Step 3: Creating Redirects in the Public Part of Page Manager and Navigation

This is basically the same as step 2 but creating the redirect pages to go over to the secured pages vanity URLs. Here is a screenshot of the Page Manager structure in this area of our site.

In this public area (the 100. Parent’s Association page/menu is under a Level 1 menu that is public) all the pages inherit the public permissions. The first two pages have vanity URLs and have content channels and content for public viewing. But, the last three pages in the sort are just identically titled redirect pages to the secured pages from step 2. The redirect page to it’s vanity URL page equivalent is set to public.

But, when it redirects on these pages, it will prompt for a login and password because the target page has a security layer on it in Podium and I am not logged in.

In our case, we restrict these other pages to require “All School” role access level. This is the security setup on those pages.

Wrap-up

Anyway, I know this is a long blog post on this and it might be seem more confusing than it should. The overall concept of this workaround is to create two locations in Podium Page Manager where you will have secured and public pages. Then, get the pages you want it each area and hard-address them easily with vanity URLs and create whatever pages are necessary to make the areas identical through the use of complimentary URL redirect pages on both locations.

Here is what the two sides of the section look like. I used the Page Title channel options to reference the “Secured” title to subtly show parents they were in different areas when they click between if they were already logged-in. We do lose the nested menu orientation in the side nav because the pages are not really under the navigation if you are on a secured page, but that is a minor issue in our opinion so long as we can make the flow from public to private pages seem non-disruptive for community members.

Public Page

Secured Page

Hope this was helpful in some way if you are looking to get around the security limitation on public and secured pages that you might run into using the WhippleHill Podium CMS.

If there are any questions, don’t hesitate to drop me a line.

Jonathan Mergy
mergy@mergy.org

 

Jan 12

Preparing Video for The WhippleHill Brightcove-Based Media Gallery

Starting January 10th, WhippleHill moved the multimedia back-end of their Podium platform to Brightcove for a number of reasons I won’t cover here but all positive in the grand scheme of things. But, this did leave me with the opportunity to look at and change from what I was doing with our video pre-processing in their old flash-based system since the Brightcove back-end provides much more flexibility on device support with HTML5 MP4 players in addition to flash capability.

So, starting early January 10th, I began testing. The main process I have been performing around video relate to our Community Meetings, Assemblies and Performances we have and want to make available for the larger community. The Brightcove Recommendations and Specifications page was helpful, but not all that specific. This became more of a trial and error to see what would be acceptable for us and the type of video we were going to be posting now in the new and improved environment.

If you are unsure what sizing and settings will work for you, I suggest you do what I did. Take a 1 min clip of video that is representative of the type of video you will be posting and export that to H.264 MP4 format a few different ways and upload them into your Whipple Hill Media Gallery to see how they show on your Desktop computers and mobile devices. Encoding/exporting 1 minute of video into the different formats will give you a better sense of exactly what happens when you change a setting here or there. It will also provide clarity on file size. Based on how you export your MP4 file, that 1 minute video filesize can range from under 20 megs into 30megs and up. This is extremely useful to understand and be aware of when you process your video. It also allows you to be able to know a 30 minute video with your preferred settings will be x megs when you go to upload it. Brightcove typically has a 2 GB file upload limit and currently WhippleHill has a 1 GB upload limit. So, knowing that and the roughly the size of video encoded with your settings will give you a guideline early in the process on how you should proceed.

Another aspect to consider is what devices people will be accessing the video from. There will be more and more people viewing our video from iOS-based and Android-based devices in the coming months and years, but today most people are still going to want to view it via laptop or desktop. This is important because it helps guide you on your priorities on sizing of the video. If you go lower in resolution, Brightcove does size it up or down very nicely for devices that want to natively go larger, but in my opinion it is probably better to get the video into Brightcove at a reasonable high resolution so even the full-screen player on a widescreen laptop or desktop monitor will look good.

One item to note: Apple does have an .m4v file format they use as a container for video files, but this is NOT the same as MP4. More information on this format can be found here. Just saving a movie out of Apple media applications to the .m4v format will not get you there.

I do most of the initial processing and editing in iMovie then export using QuickTime. You can export from iMovie under the ‘Share’ menu

In iMovie, Export Using QuickTime To Go to MP4

Change the Export Pop-up to Movie To MPEG-4

Selecting Movie to MP4

Then into the ‘Options’ button.

After a lot of testing my MP4 settings for file uploads are ideally this -

Quicktime Export to MP4 Settings

QuickTime Export to MP4 Settings

Video Format: You want to keep the format H.264.

Data Rate: The most important variable that dictates the size and quality of the resulting file. 3500kbs might be a little overkill, but in testing north and south of that, it seemed that was the cutoff of quality that I was happy with.This setting and the Image Size really are the reasons for quality and file size to fluctuate.

Image Size: Using 1280×720 because the video I have from the HD camera is going to be 16:9 and I wanted larger resolution for the desktop full-screen player. This is way overkill for iPhones and iPads, but still looks nice for desktop full-screen viewing. Brightcove gears down for devices that cannot handle large resolutions really nicely.This is something along with Data Rate you can use to decrease the size (and probably the quality of the resulting MP4)

Frame Rate: Typically from most cameras, your video will be recorded at 30FPS (frames per second) but this is often many more frames and data than needed. I geared down on the frames per second because it does save some file space and it is really not noticeable for viewers to have be at 30 fps. Also, in my testing, I found going to 15fps really increased the turnaround on encoding at the Brightcove end for some reason. Video pre-processed at 15FPs came back live into the Whipple Hill Media Gallery from Brightcove faster perhaps because there was half the number of frames to mess with on their end.

With these settings exporting out of something like iMovie, Final Cut Pro or QuickTime 7 Pro, you get about a 27.6 meg MP4 file for a minute of video. This means in my screenshot example of around 30 minutes of video I get an exported file of around an 800 meg file to upload which keeps me under the WhippleHill limit of 1GB. Most of our videos are going to be around 30 minutes or so long or we can break them up into parts that are 30 minutes or less, so this works for us.

If your video durations differ – perhaps you routinely want to post an hour of video. You might want to gear that resolution down to 640×360 and lower the Data Rate to to 2500 or so. In my testing with Podium and Brightcove, I was not happy with anything less than 2500kbs no matter want the resolution was. 640×360 is a nice step down in sizing, but the Data Rate is the biggest driver of that MP4 file size. If you are processing a really long video like an hour or more, you might be better served going with a higher data rate like 3500kbs and just breaking up the video into parts that make sense for the viewer.

Just as I didn’t like anything less than the 2500 on the Data Rate side of things even in 640×360, I didn’t seem to see any real difference going higher than 3500kbs no matter what the resolution was. I tested 4000kbs and higher, but the huge increases in file size did not provide any better quality in my opinion and after looking and many, many, many 1 minute videos.

Hope this helps and your mileage may vary but this testing process can be very helpful in understanding the dark art of video processing and getting a handle on the positives and negatives of the switches and settings you can tweak to get the results you want.

Oct 03

Using FFMPEG To Prep Video For Whipple Hill Podium

Even going to Adobe CS5 and switching OS X 10.6.x to 64-bit doesn’t really make the process of taking Quicktime video to Flash in a reasonable timeframe. So, enter FFMPEG command-line tools. I have been playing with many different settings to get the performance and quality at an optimal state for playback in the Whipple Hill Podium Media Gallery.

Whipple Hill recommended (as of 9/13/10) video settings for the gallery should be

  • Audio sample rate: 22050
  • Audio bitrate: 56k
  • Video bitrate: 512kbit/s
  • Video framerate: 30
  • Dimensions: 800 x 600

This, of course, is standard definition. Most video cameras now are HD and so is the one I have for our community meetings, so the closest size would be hd 480. I have tried a lot of settings and am finally happy with the ffmpeg encoding options below. Other settings we have gone with can lose sync with video/audio and may not be optimal for your users if they have marginal internet bandwidth.

ffmpeg -i something.mov -s hd480 -ab 56k -b 512k -r 15 -ar 22050 -qscale 10 -async 2 something.flv

This basically stating

Take the input video file (something.mov) and

  1. size it to hd480 (852×480)
  2. set the audio bitrate to 56k
  3. set the video bitrate to 512k
  4. set the framerate to 15 (saves some space)
  5. set the audio frequency to 22050
  6. set the qscale to 10 (more here at Wikipedia on this)
  7. Sync audio and video

to get the output file (something.flv)

This seems to give us the best bang for the filesize. Hope this helps others.

Jul 12

My LWHS iPhone App live on Apple App Store

It went live on July 4th. All you need to do is go into the Apple App Store on your iPhone or iPod Touch and do a search for LWHS or Lick-Wilmerding to find it. If you have an iPod Touch or iPhone and are part of the L-W community, this is a great tool to have to search the Directory, get althetics info and link into the school calendar and all the events. There is a lot more coming in the near future and those updates will come to you via the standard Apple App Store update process.

The My LWHS app is a free download.

My LWHS iPhone App 1My LWHS iPhone App 2

Jun 18

L-W iPhone App on the way!

Should be getting an iPhone App shortly for my school, Lick-Wilmerding. We are waiting on Apple to clear the application through its crazy approval process. This will be a great way for Lick-Wilmerding Students, Parents, Faculty and Alumni to stay connected to the school. It will be available in the App Store shortly and be free of charge.

Here are some screenshots.

My LWHS app iconMy LWHS iPhone App launch screen

My LWHS Login ScreenMy LWHS iPhone App Home Screen