Over the past few weeks we’ve been doing loads of fixes on 23, and yeah, we have also added some new features such as:

• An improvement of the UI in the Subscriptions viewer. For example, you can now see all new photos in the same view without clicking all contact links.
• Now, only contacts with access to your private photos (you can set that up in the Contacts section) will be able to download your original photos (that is, those very large photos).
• Changes in the organize feature allows you to choose as many photos as you’d like.
• Users will now be receiving mails when their photos are commented. This feature can be disabled in the Profile section.

BUT — as we’re speaking of mail — not all new features were for the good. We thought we’d build in some automatic mails, which would be sent as friendly reminders to our users. For example, new users who hasn’t uploaded any photos three days after registration will be receiving a mail with some basic upload tips and tricks.
We also toyed with the idea of having an automatic mail for users who hasn’t logged in for a month, and we even wrote the code. But as we’re not really into spam ourselves we decided not to use this anyway.

However, someone (and while I’m not pointing any fingers, if you were here with me right now,… well, then you’d be looking at him) forgot to deactivate this procedure on the live server. As a result we sent out mails to some registered users reading “Hi user, it’s been a while…” (See, as we never did intend to utilize this function we didn’t bother to write a proper mails).

That’s it. If you received that mail: First of all, sorry, we never intended to send you anything that meaningless. My bad! And secondly, man, where have your been — it really has been a while?

To make up for all of this (and this very long post), we’ve added a few discussion forums at 23hq.com/forums, and we promise that our api is right around the corner.

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:

• Isaack
• Voss

We’ve been doing loads of minor fixes throughout the past two or three weeks, but while all of these tiny bits and pieces are waiting for our next big update we couldn’t help ourselves when it came to meeting a challenge.

Isaack asked for a small change to our Badge feature, which would enable visitors of his blog to browse through more than just a few photos at once. So we jumped at the opportunity to meet a request and build a bit more onto the JS API, and, well… be sure to update your badge at once!

We’ve just added RSS 2.0 enclosures to our RSS feeds. This means that we have added a special link to a large version of each image to 23’s RSS feeds. Applications can read this special link and do interesting stuff with it — for example it may automatically add photos to iPhoto.

The popular podcasting client iPodderX can do this. In iPodderX’s preferences window, select the “Exporting” tab and check “Move Images to iPhoto After Downloading”. Then subscribe to your friends’ RSS feeds on 23. In the future their photos will then appear in iPhoto whenever you sync iPodderX.

Read more about “image podcasting” on Peter Forret’s site.

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.

23 is taking more steps forwards. Throughout the coming days and weeks we’ll be crashing a few bugs and adding some new features.

We’ve already put a new search feature online at http://www.23hq.com/23/search, which will allow you to search through all photos, users, tags, albums and stories on the site. While it’s nice having means of finding your way back to “that photo with the butterfly”, this can also lead you to your friends, both on- and offline: Find them by searching for their exact first name, last name or email address.

So what’s next then? Well, the tag support will be tweaked a bit, and while we’re at it, we will be adding a “Just In” section. This new section is basically a scaled-up version of our front page: A shortcut to the newest photos, tags, and users for your exploring pleasure.