When I bought my new cell phone last month, the store had a bundle deal for an attachable camera at 50% off. Half-off is a good deal, but that would have still meant spending $50 for the camera. And while having a camera-phone would be cool, I wasn’t sure that it would be $50 cool when I already own a camera.
A few days ago I realized that eBay might be able to hook me up, so I did a quick search and, after losing my first three auction attempts, won a Communicam Mobile Camera MCA-25 for $20. I haven’t gotten it yet, but assuming that my eBay luck improves it should be here pretty soon.
In anticipation, I looked around online until I came across Mfop2, a free online service that lets you post to your website via email. And since my phone is email equipped, I can put up pictures as soon as I take them. Configuring the service wasn’t very hard and the instructions were plain and easy. I did have one problem, but an email to the developer was met with a response within hours and fixed minutes later.
I haven’t rolled the code into my main site, mainly because I don’t have the camera yet, but it’s working on the test page. In the extended entry I go through how I set up MFop2 to work with my MovableType templates.
I didn’t want to have my photos go right into the main section of my page with the rest of the entries, mainly because I don’t think the design of my page looks too good with lots of images. I’d also prefer to keep the size of the main page smaller, so loading lots of images isn’t too good of an idea. I decided that I should just put a thumbnail of the most recent picuture in the sidebar of the page along with a link to the full-sized image and accompanying text. I also wanted the header to be a link to the photo archives, and wanted links to the five most recent photos. Those links go to the individual page for each photo.
I’ve recently put most of the sidebar elements from my page into a seperate weblog called “lists” that gets imported to my main page via php includes. Information on how to do that can be found in “Movable Type tutorial — How to add a ‘sidebar’ to your blog.” With that implementation already in place, I made a new category in the sideblog called “moblog” and configured Mfop2 to post everything into it.
Next I made a new template, called “moblog” whose output is “moblog.html” and checked the “automatically rebuild” box. Here’s what the template looks like:
<MTCategories> <MTIfCategory name="Moblog"> <div class="title"><a href="<$MTCategoryArchiveLink$>"> Photos</a></div> <div class="side"> <MTEntries lastn="1"> <div class="moblog"><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryBody$></a></div> </MTEntries> <ul class="nobullet"> <MTEntries lastn="5"> <li><a href="<$MTEntryPermalink$>" title=" <$MTEntryTitle$>"><$MTEntryTitle smarty_pants="1"$></a></li> </MTEntries> </ul> </div> </MTIfCategory> </MTCategories> The template uses the <MTIfCategory> tag that comes from a plug-in by Brad Choate. It lets the template output entries from only one category instead of listing them all. If you can read MT tags, the template isn’t all that complex. The first two lines tell MT to only display entries of category “moblog.” The third line makes a heading called “Photos” that is a link to the category archive for “moblog.” Next, I use <MTEntries lastn="5"> gives me the five entries, and then each <MTEntryTitle> is an item of the list, generated by the loop.
The key to making this all come together is in my stylesheet. Since the above template is being imported into my main index, its gets styled by the CSS for the main page. I use the class “nobullet” to make my ul show up without bullets. More information on styling lists can be found at (no pun intended) A List Apart. Here’s what I use:
.nobullet { list-style: none; padding: 0; margin: 0; } The most complex part comes with the .moblog style. It does three things: hides the text of the most recent post, resizes the image into a thumbnail, and styles a border around the images that changes color when moused-over. I’ve set Mfop2 to place <span> before the body of the post and </span> after it. This is because Mfop2 only puts stuff into the main entry body of MT, so it’ll have both the photo in it and the description text, but on the main page we only want to show a thumbnail of the image. Solution: we have CSS hide the text inside the span.
Mfop2 isn’t able to generate thumbnails (but claims it wll soon), so I’ve taken the unfavorable approach of setting the height and width of the images manually. I’d rather not do this, as it makes you load a large image when a small one would do, but for the moment that’s how it goes.
Here’s the style for the moblog class:
.moblog { right: 0; margin-left: auto; } .moblog span { display: none; } .moblog img { border: 3px solid #2d2b5a; height: 90px; width: 120px; } .moblog img:hover { border: 3px solid #99cc66; } .moblog a:hover { border: none; } All that’s left is putting it into my index template, which is accomplished with one line of code:
<? include('http://www.davextreme.com/ davextreme/mt/lists/moblog.html'); ?> An important note is that the main index template for my page is now index.php instead of index.html - this seems to be required for the import method to work.
All in all Mfop2 seems to be a great service. It’s free (but I may PayPal some money in appreciation), not too hard to configure, and very customizable. Have fun enjoying my poor photographing skills!