Scrapblog. Filed in the same “The Awesomeness” folder as picnik, Scrapblog features support for most (popular) photo/image hosting services; basic tools for sharing, commenting and notes; RSS; and the ability to create a “Scrapblog” without even having an account or logging in!
Basically, Scrapblog allows you to create a web-/Flash-based scrapbook with your photos and images. You can publish, share, embed and subscribe to your “Scrapblog.” The creation of a Scrapblog is done inside a Flash-based UI (with, of course, more famfamfam icons), which is very nicely designed and easy to learn and use.
(Via Cameron.)
(»)
Apr 2nd Powering an Audio Archive With ExpressionEngine
One of the most often-asked questions I receive is about how The City Church’s audio archive is powered. It’s easier than you’d expect, but does require a bit of explanation. So, as promised, here’s a look under the hood.
Custom fields and weblog preferences
ExpressionEngine’s weblogs, or “databases” as I’ve labeled them, are much more flexible than a typical two- or three-field weblog. They can have custom fields, and have dozens of settings. I’ve assigned our Audio Archive database a custom field group which, beyond “title” and “URL title”, has an additional 13 fields. They include:
subtitlespeaker(a drop-down menu, pre-populated with our pastors’ names)speaker_alt(a text field for the speaker name if it’s not listed in the drop-down)campusservicetime(a drop-down menu)servicetime_alt(in case of an alternate service time)summaryfileidgraphicnoteskeywordsscriptures
Each custom field comes with preference settings for type, formatting, hiding/showing, and instructions. Setting these preferences, I’m able to simplify the publish form as much as possible, but still give some advanced options to the publisher.
In addition to the custom fields, each entry (or “message” in this case) also has date, category, and status assignment(s). The nice thing about using a custom field for the service time is I don’t have to rely on our audio engineers (who do all the archive maintenance) to manually enter the service time in the entry date field — they simply click on the date itself. Also, since entries can have multiple categories assigned to them, a message can appear as a “Sunday Messages” and “Guest Speakers” entry simultaneously.
Speaking of categories, I’ve also set up a custom category group which has almost 30 categories (and sub-categories) for message assignment. They cover areas of ministry as well as special events. A few examples would be: “Sunday Messages”, “City Kids”, “Generation Church”, and “Men’s Ministry.”
The Audio Archive database also has some unique preferences that set it apart as a non-textual-based weblog. For instance, I’ve set the default status to be “closed” so that an entry can be created without it being immediately published and live. This enables an audio engineer to create the entry during a service while the message is being preached, but not have it available until he/she confirms the details of, say, the title or summary.
I’ve also set the database to: 1) disallow trackbacks (and auto-discovery code) in entries; 2) notify me via email of each entry published; 3) not show formatting buttons, author menu or forum topic on the publish page.
Setting up the templates
The fun stuff is in the templates. That’s where the magic happens. When displayed on a webpage, each message entry has links to listen, download, buy, etc.
Here’s an example of a typical archive listing:
- {exp:weblog:entries weblog="audioarchive" limit="5"}
- <div class="message">
- <p><strong><a class="{url_title_path=message}">{title}{if subtitle} ({subtitle}){/if}</a></strong><br />
- <span>{if speaker != "other"}{speaker}{if:else}{speaker_alt}{/if}</span> {entry_date format="%M %j, %Y"} • {if servicetime != "other"}{servicetime}{if:else}{servicetime_alt}{/if} • {campus}</p>
- <ul>
- <li class="listen"><a class="/listen/{entry_id}">
- <li class="download"><a class="/download.php?file={fileid}.mp3">Download</a></li>
- <li class="buy"><form name="post" method="post" action="www.ewebcart.com/cgi-bin/cart.pl">
- <!— shopping cart tags here //—>
- <a class="#"><input type="image" src="/img/spacer.gif">
- </form></li>
- {if notes}<li class="notes"><a class="/pdf/{notes}">Notes</a></li>{/if}
- <li class="comments"><a class="{url_title_path=message}">{if comment_total >= '2'}{comment_total} Comments{if:elseif comment_total == '1'}{comment_total} Comment{if:else}Add Comment{/if}</a></li>
- </ul>
- </div>
- {/exp:weblog:entries}
This code-block is found on the index page of the audio sub-section. Breaking it down, you can see I’ve wrapped each message in its own div with the class message. Inside the div I use a paragraph for {title} and some meta-info about the message. Notice the use of conditionals for {subtitle}, speaker and servicetime. If, for instance, the publisher gave the message a subtitle, it will appear in parenthesis after the title; if not, nothing will show.
Then (on line 5) comes the unordered list — with links to listen, download, buy, view notes or comment. The markup is pretty simple:
- For the listen link a JavaScript is used to open a new window and call a single-entry template (
/message/{entry_id}). The single-entry template is basically just a few EE variables and an embedded MP3. - The download link utilizes a PHP script that forces the users’ browser to download the file (
{fileid}.mp3) instead of load it. - The buy link is just a submit button inside a form with a bunch of ecommerce tags that pass the message data onto our third-party shopping cart app.
- The notes link only appears if the {notes} field has a value.
- The comments link uses a bunch of conditionals to either display the number of comments or “Add comment”.
When unstyled, this code-block is relatively plain and [arguably] semantic. The only point of contention comes from the use of a transparent GIF for the form submit button. In hindsight I suppose I could’ve just used input type="image", but I was preoccupied in trying to utilize CSS for all images.
Of course, ExpressionEngine has built-in support for XML templates, so serving a podcast is just as simple:
- {exp:weblog:entries weblog="audioarchive" category="4" orderby="date" sticky="off" limit="10" rdf="off"}
- <item>
- <title>{exp:xml_encode}{title}{/exp:xml_encode}{if subtitle} ({exp:xml_encode}{subtitle}{/exp:xml_encode}){/if}</title>
- <link>{url_title_path=message}</link>
- <guid isPermaLink="false">{fileid}</guid>
- <description><![CDATA[{exp:markdown}{if summary}{summary}{if:else}Speaker: {if speaker_alt}{speaker_alt}{if:else}{speaker}{/if} - This message was preached on {entry_date format="%F %j%S"} at the {servicetime} service, at the {campus} Campus. No additional summary available.{/if}{/exp:markdown}]]></description>
- <dc:date>{entry_date format="%Y-%m-%d"}</dc:date>
- <!— itunes-specific item tags —>
- <itunes:author>{if speaker_alt !=''}{speaker_alt}{/if}{if speaker_alt ==''}{speaker}{/if}</itunes:author>
- <itunes:subtitle>{if summary}{summary}{if:else}Speaker: {if speaker_alt}{speaker_alt}{if:else}{speaker}{/if} - This message was preached on {entry_date format="%F %j%S"} at the {servicetime} service, at the {campus} Campus. No additional summary available.{/if}</itunes:subtitle>
- <itunes:explicit>no</itunes:explicit>
- {if keywords}<itunes:keywords>{keywords}</itunes:keywords>{/if}
- <itunes:summary>{if summary}{summary}{if:else}Speaker: {if speaker_alt}{speaker_alt}{if:else}{speaker}{/if} - This message was preached on {entry_date format="%F %j%S"} at the {servicetime} service, at the {campus} Campus. No additional summary available.{/if}</itunes:summary>
- <!— end itunes-specific tags —>
- {exp:feed_enclosures}<a class="www.thecity.org/audioarchive/{fileid}.mp3" rel="enclosure">{title}</a>{/exp:feed_enclosures}
- </item>
- {/exp:weblog:entries}
… Okay, so it doesn’t look so simple — but with proper code formatting and highlighting it becomes much easier to understand. I won’t go into detail about every line, but I will point out a few key elements.
First, notice the use of <![CDATA[ ... ]]> for the {summary} field. I use it because the field is set with no formatting, allowing me to format on the template-side — in this case, using the Markdown plugin.
Secondly, you can see I’m using a lot of iTunes-specific code. I suppose it goes without saying, but a podcast without these tags will have an uphill battle getting exposure on the iTunes Podcast Directory.
Finally, notice the actual file link is wrapped in {exp:feed_enclosures}. This tag performs some wizardry and somehow quantifies the file’s bit-size and serves a correctly formatted enclosure element. At least, I think that’s what it does.
Maintaining the archives
So with this infrastructure in place, maintenance of the audio archive has been effortless for me. The only thing I need to do is quality control; making sure message details are correct, no weird symbols are used, and the website stays online. I’m completely out of the loop during the process, which (I’ve been told) goes something like this:
- The message is recorded to a master CD during the service
- The master CD is then ripped and (quickly) edited for content and equalization
- The audio file is compressed and encoded as an MP3 (email our lead audio engineer for details about this step)
- The file is uploaded to the server
- A new entry is created in the audio archive EE database
I’m yawning just thinking about how little I have to do to keep it all going. ExpressionEngine rocks.
5 comments | permalink
@media Antarctica. I’m SO going … buttons with my new logo in hand.
Update: Uh. I SO thought this was an April Fools joke. Boy, do I feel sheepish. Okay, so this was an April Fools joke after all.
(»)
I can’t put my finger on why, but I just love, love, love the new Method Arts logo.
And Brian Warren’s. And Mark Bixby’s. And Scott Boms’. And Garrett Dimon’s. And Shawn Grimes’. And Dan Rubin’s. And Dave Shea’s. And Jeff Croft’s. And Garrett Murray’s. And Steve Smith’s. And Nathan Smith’s. And David Hemphill’s. And Dustin Diaz’s. And Jina Bolton’s. And Jonathan Snook’s. And … All these.
And with all the great logo design originality out there, you’d think Jesse would find some inspiration — but no, he goes and straight up copies another site’s logo. And to think I used to respect him as a designer.
(1)
A couple of new changes at Geek & Mild today. I’ve revised the About Me page slightly, tweaked the Asides font and vertical rhythm, changed the RSS feed to denote Asides with “[Aside]” in the title, and upgraded the logomark (by far my favorite improvement). Your thoughts, as usual, will be ignored.
(3)
Easier INS and DEL tags with TextExpander. A nice tip for inserting correctly-formatted ins and del elements using the veritable TextExpander.
(»)
Instant Domain Search Widget. Did you know they had a widget? I didn’t know they had a widget. How come they have a widget and I didn’t know? (Now there’s a nice example of something to use Dashcode on.)
(»)
I stayed up tonight to watch a local news story covering Mike Davidson’s “prank” on Senator John McCain. Mike did a great job on camera, looked good, and articulated the situation very well. Love the iMac shot — and I had no idea he is left-handed.
(»)
Uni-Form - One Form to Rule Them All. Nice implementation in attempt of standardizing HTML forms. The idea centers around similar concepts as Microformats. It’s definitely worth a look if you have to deploy forms (of any size).
(»)
Shua brings it. Or “How Joshua Blankenship went there with asking why the Church sucks, creatively speaking.”
(I’ve chosen to not participate in the discussion, though I have many thoughts on the matter.)
(»)
Mar 27th Adobe Announces Creative Suite 3
Today Adobe announced Creative Suite 3. The accompanying product matrix makes even Microsoft’s Windows Vista version grid look simple. It’s a mess to sort out, even for a veteran Adobe user.
Visiting the product page I thought to myself, “it would be nice if they offered some sort of ‘select the products you use/need and we’ll show you which package to buy’ feature.” Further exploration revealed a handy Product Selector applet (Flash, of course) that seemed to fit the bill perfectly. Unfortunately, as soon as it was done pre-loading I realized it fell short; offering areas of design, rather than specific products for use.
I think, Adobe, it’s safe to assume the majority of your consumers know which products they need already.
Needless to say, I attempted to fill out the “questionnaire” anyway — curious what product package would be recommended for my somewhat unique requirements. Here’s what I checked:
- “Graphic design” — since I design graphics
- “Print publishing” — since sometimes I design graphics for print
- “Illustration” — since this probably collates to Illustrator, and I need that for certain projects (including logo design, grey-box layouts, etc.)
- “Web/interactive design” — since that’s what I do
- Not “Web development” — since I don’t need an Adobe product to write code
- “User interface design” — since that, too, is what I do
- “Mobile development” — since Mobile is the new New
- “Photography” — since I take photos
- “Image editing and compositing” — since that’s what, uh, Photoshop is for
- “Motion graphics / visual effects” — since on occasion I create motion graphic menus and intros for various video projects
- “Interactive / multimedia” — since, as I said, sometimes I delve into video graphics
What was suggested? Of course! The mamma-jamma Master Collection, retailing for $2,500, with an upgrade cost for me (with my CS2 Standard license) of $1,999.
Let’s look at what I’d get with the Master Collection … no, better yet, let’s look at what I don’t need, but would still get with it:
- Adobe InDesign CS3
- Adobe Acrobat 8 Professional
- Adobe Dreamweaver CS3
- Adobe Fireworks CS3
- Adobe Contribute CS3
- Adobe Premier Pro CS3
- Adobe Soundbooth CS3
- Adobe Encore CS3
… not to mention the various “shared features” I don’t use or need, such as Version Cue, Device Central, Acrobat Connect, Dynamic Link, etc.
Maybe I’ll just upgrade Photoshop.
0 comments | permalink
Mar 25th Removing “www” From a Domain
Here’s what I do to remove “www” from my domain. I put this code in my .htaccess file:
- RewriteEngine On
- #Handle removal of “www”
- RewriteCond %{HTTP_HOST} ^www.YOURDOMAIN.com(.*)$ [NC]
- RewriteRule ^(.*)$ YOURDOMAIN.com/$1 [R=301,L]
A couple quick notes about this method if you want to use it as your own:
- In order to see/edit .htaccess, you may have to show “invisible” files in your FTP application.
- This only works on servers running Apache.
For more information, and a technical explanation of what each line does, read John Gruber’s post (and subsequent opinion of why one would want to do this) from May 2006.
0 comments | permalink
The Project Chain. Required reading for the week.
(»)
Gosh, I wish I could use the same excuse with my boss. “Sorry, something prevented me from completing the project.”
(»)
Darth Vader on Twitter.
Has discovered that my mask is excellent at straining the pulp from my morning glass of orange juice.
(»)
Twitter doesn’t like
All the special characters;
No more pipes for me
Dan Rubin
(»)
Redesigning the ExpressionEngine Site. Jesse walks-through the design process of redesigning (and rebranding) the pMachine websites. Well done, Jesse. Great article!
(»)
Twittering Your Home. Are we taking this a little too far? Nah.
(»)
An Uncompromising Wish, originally uploaded by Eric Rolph.
(»)
John Gruber took Andy Baio’s Twitter-growth data and created a graph showing Twitter’s growth from March to October last year. Also, take a look at Andy’s own charts reflecting the absurd growth thereafter.