We wanted to write a quick plug for Migratr, which is a very basic tool for moving photos between 23 and some secondary and lesser known photo-services such as Flickr, Picasa and SmugMug. It’s Windows-based, extremely simple to use, and it allows transfers in all directions between the supported sites. So that’s just one more reason to try out 23.
If you want to know more, check out Download.com’s review of the application.
At 23 we’ve chosen to allow programmers to access our service by writing a few lines of code, and we’ve also chosen a scheme for doing this which overlaps with other photo sharing sites. This approach means that 23 can most often be supported in 3rd party application quite easily — in fact we’ve written about this before.
One example of such an application is the one written by Michele Campeotto and released in an open source fashion. This led us to try a simple experiment over the weekend: Could we rewrite an existing application to support 23 in five minutes or less. Sure! In fact, a bit of search-and-replace was enough for us to be able to release a The 23 Uploader for Linux: If you’re on a Linux system, try it out by downloading this file. Installation notes are provided in the readme file, but it’s basically just a matter of typing in a single command.
The larger point of this post? It illustrates that even the lowly programmers behind 23 can rip off and re-fashion an existing application to his own needs. So why shouldn’t you be able to do so — or at least urge smarter people than yourself to do so? If you know of a great tool for editing, sharing, uploading or sending photos, you should take charge and call on them to support 23 as well.
It’s Friday afternoon and it’s time to relax. And what’s better than playing around with some nice JavaScript code on an evening of?
This week Google launched a new service called Google AJAX Feed API, which allows you to download any public Atom or RSS feed using only JavaScript. Google handles all the complexity of retrieving and parsing the data for you.
This means that you can take any feed from 23 and add a few lines of code to your web page to show the photos from the feed in any manner you see fit. (In fact, you could already do this by getting data directly from 23, but that’s hardly the point right now…)
An example: A neat slideshow of photos tagged 23, loaded through the feed API.
This is were you say: Hm, I can already do that with 23. Why bother? I cooked another example to demonstrate a badge of four recent comments to your photos, which utilizes an rss feed with content not ordinarily available through badge form.
Please note: The code in these example is particularly dreadful — it’s only quick and dirty demo after all. We’re discussing if it would make sense to add a little extra information to the rss feed (a is the case on filicio.us for example). Let us know if you have a great idea for a feature to pursue in this manner…
As a follow-up and an answer to a comment to the previous post, let me just write a note about randomizing and caching.
Basically, our caching strategy mean that the badge photos won’t be different on every page update, even if you choose to randomize in the badge setup guide. The data which produces the JS object — upon which the badge is programmed — is cached for 30 minutes — and accordingly, this means that the badge ought to be reproduced randomly every half hour.
The problem is that producing the more advanced datasets for the JS objects requires some doing on our server, and if a 23 badge were put on a busy site this might be an issue for us — that is, if we hadn’t cached the data.
That doesn’t mean that you can get a random-every-time effect though. You’ll just have to randomize data through JavaScript instead. This will do the trick:
<script type="text/javascript"
src="http://www.23hq.com/resources/um-style/general.js">
</script>
<script type="text/javascript"
src="http://www.23hq.com/TheRatRace/script/data.js?mode=basic">
</script>
<script type="text/javascript"
src="http://www.23hq.com/TheRatRace/script/functions.js">
</script>
<script>
function rnd(myArray) {
var i = myArray.length;
if ( i == 0 ) return false;
while ( --i ) {
var j = Math.floor( Math.random() * ( i + 1 ) );
var tempi = myArray[i];
var tempj = myArray[j];
myArray[i] = tempj;
myArray[j] = tempi;
}
}
var i = 0;
var tmpArr = new Array();
for (photo_id in photos) tmpArr[i++]=photo_id;
rnd(tmpArr);
var tmpArr2 = new Array();
for (i in tmpArr) tmpArr2[tmpArr[i]] = photos[tmpArr[i]];
photos = tmpArr2;
display23['linkToAccount'] = 0;
display23['size'] = ’standard’;
display23['layout'] = ‘horizontal’;
display23['photoinfoTaken'] = 0;
display23['photoinfoTags'] = 0;
display23['photoinfoAlbums'] = 0;
display23['photoinfoWords'] = 0;
writePhotos(4);
</script>
This example uses TheRatRace’s photos − and also take a look a his web page which uses the 23 badge in a very cool fashion!
Allrighty, based on the previous post and the lack of documentation on how to go about cooking your own css for the 23 badge, here are a few guidelines.
Firstly, there are two ways of approaching the styling; the non-styled version of the badge will produce aa very slim potion of html whereas the styled version (either horizontal or vertical) is <table>’d. Depending on your styling needs choose the one for you…
Let’s start with some examples of the html output — first, the non-styled version:
<div id="photos23">
<a id="prev23" style="display: none;" href="javascript:jump(-numberOfPhotos);">«</a>
<span id="display23content-1">
<a href="http://www.23hq.com/user/photo/2075" target="23hq">
<img src="http://www.23hq.com/user/photo/2075/quad100" border="0">
</a>
</span>
<span id="display23content-2">
<a href="http://www.23hq.com/usern/photo/2073" target="23hq">
<img src="http://www.23hq.com/user/photo/2073/quad100" border="0">
</a>
</span>
(...)
<a id="next23" href="javascript:jump(numberOfPhotos);">»</a>
<a href="http://dev.23people.net/steffen">See all my photos</a>
</div>
And then, the styled version:
<table id="photos23" style="(...)">
<tbody>
<tr>
<td rowspan="2" align="left" width="15">
<a id="prev23"
style="font-size: 18pt; text-decoration: none; display: none;"
href="javascript:jump(-numberOfPhotos);">
«
</a>
</td>
<td align="center">
<span id="display23content-1">
<a href="http://www.23hq.com/user/photo/2075" target="23hq">
<img src="http://www.23hq.com/user/photo/2075/quad100" border="0">
</a>
</span>
</td>
<td rowspan="2" align="right" width="15">
<a id="next23"
style="font-size: 18pt; text-decoration: none;"
href="javascript:jump(numberOfPhotos);">
»
</a>
</td>
</tr>
<tr>
<td align="center">
<span id="display23content-2">
<a href="http://www.23hq.com/user/photo/2073" target="23hq">
<img src="http://www.23hq.com/user/photo/2073/quad100" border="0">
</a>
</span>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<a href="http://www.23hq.com/user">See all my photos</a>
</td>
</tr>
</tbody>
</table>
For now, let’s content ourselves with handling the non-styled version, which is could be done by using these selectors in a stylesheet:
/* Entire box of the 23 badge */
#photos23 {}
/* All links, both image and other */
#photos23 a {}
/* Previous and Next links */
#photos a#prev23, #photos a#next23 {}
/* Bounding box around all images */
#photos23 span
/* All photos */
#photos23 span a img
So for example, if you’d want to…
a) Scale the photos to 280px in width
b) Make the prev/next links very large and non-underlined
c) Make the ‘See all my photos’ link very small and orange.
d) Place a fat green border around the photos when moving the move over. and..
e) Place the navigation links somewhat nicely around the first image.
.. do like this:
<style type="text/css">
#photos23 {
width:330px;
}
#photos23 a {
color:orange;
font-size: 10px;
display:block;
}
#photos23 a#prev23, #photos23 a#next23 {
color:blue;
font-size:22px;
text-decoration:none;
}
#photos23 a#prev23 {
float:left;
margin-left:-45px;
margin-top:40px;;
}
#photos23 a#next23 {
float:right;
margin-left:30px;
margin-top:40px;;
}
#photos23 span a img {
width:280px;
border:3px solid white;
}
#photos23 span a:hover img {
border:3px solid green;
}
</style>
Well, let’s try it out:
#photos23 {
width:330px;
}
#photos23 a {
color:orange;
font-size: 10px;
display:block;
}
#photos23 a#prev23, #photos23 a#next23 {
color:blue;
font-size:22px;
text-decoration:none;
}
#photos23 a#prev23 {
float:left;
margin-left:-45px;
margin-top:40px;;
}
#photos23 a#next23 {
float:right;
margin-left:30px;
margin-top:40px;;
}
#photos23 span a img {
width:280px;
border:3px solid white;
}
#photos23 span a:hover img {
border:3px solid green;
}
display23['linkToAccount'] = 1;
display23['size'] = ’standard’;
display23['layout'] = ‘nonstyled’;
display23['photoinfoTaken'] = 0;
display23['photoinfoTags'] = 0;
display23['photoinfoAlbums'] = 0;
display23['photoinfoWords'] = 0;
writePhotos(3);
We’d love to hear from people with a bit more imagination who have given this a go — either if you have tweaked the styled script a bit (as jens has) or given it the entire css 23 garden touch-up.
Other people include:
So you’ve always liked the 23 front page, have you? You been thinking ‘Hey, it’s kinda cool to see new photos from other users when I visit those nice 23 people’?
Well, you’re in luck, because we have just extended the simple view from front page with a Just In section. It’s a way of getting a quick overview of what’s been happening at 23 − and a way of finding more 23 users to connect with.
You’ll find the new feature here or by clicking the Just In link in the top of the page when you’re browsing 23hq.com.
… And don’t forget to click the Subscribe-link when you’ve found an awesome user − then you’ll be able to follow his or her new uploads from your own Subscriptions page.
We don’t yet have a proper 23 API ready yet, but there are a few ways to automate uploading many files to 23, especially on Mac OS X. We’ll have actual script examples up later, but here are a few pointers for the über-geeks out there:
You can create an Automator script in Mac OS X to select photos from your iPhoto Library, loop through the photos, and send each of them as an attachment to your 23 mail upload address.
You can also use AppleScript and the curl program, which is pre-installed on Mac, to log in and upload the photos. Here is an example of someone who did something similar for moving photos from iPhoto to Drupal.
Finally, until we have an API or a desktop application, we have a “simple upload interface”. The URL is http://www.23hq.com/23/extupload/simple-upload which takes these arguments:
username (required)password (required)file (required): Image file to uploadprivate_p: 1 for a private photo, 0 for a public one (defaults to private)tags: Space-separated list of tags to applyalbum_id: Numeric album ID Here’s an example of how to upload, again using curl:
curl -F file=@image.jpg -F username=myuser -F password=secret -F private_p=0 http://www.23hq.com/23/extupload/simple-upload
Warning: This interface may disappear at any time.