Feb 022012

I noticed that my thumbnails didn’t look sharp on my Retina display. This makes sense since I was asking my server for 50 pixels when in fact I wanted 100 pixels. But how to encapsulate that?

I made a quick little method to give me my 50 or 100 dimension:

+ (int) thumbnailSize 
    return [EnkiUtilities pixelsForRetina:50];

This call the pixelForRetina class method:

+ (float) pixelsForRetina:(float) pixels
    if ([[UIScreen mainScreen] enki_isRetina]) {
        return pixels * 2;
    } else {
        return pixels;

I really don’t like the hardcoded 2 in there, I really should grab scale from somewhere. And here is the UIScreen class category to help me out with the retina/non-retina distinction.

@implementation UIScreen(EnkiScreenRetinaAdditions)
- (BOOL)enki_isRetina {
    return [self respondsToSelector:@selector(displayLinkWithTarget:selector:)] && (self.scale == 2.0);

This has been incorporated into the open source EnkiUtils.

Feb 012012

It is easy to draw images in an iOS app, but you can make them special by dropping a frame around them. For example, one of my apps uses the old Poloroid SX-70 type of frame as a branding element, so I’m always dropping UIImages into a frame so they look something like this:


This is very easy to do in CocoaTouch.

@interface EnkiUtilities : NSObject
+ (UIImage *) putThumbnailInFotoFrame:(UIImage *)image ;

@implementation EnkiUtilities

+ (UIImage *) putThumbnailInFotoFrame:(UIImage *)image 
    UIImage *blankThumb =  [UIImage imageNamed:@"Blank Foto Thumb.png"];
    // put the thumbnail into the blank Foto frame
    CGSize size = CGSizeMake(blankThumb.size.width, blankThumb.size.height);
    if (UIGraphicsBeginImageContextWithOptions != NULL) {
        UIGraphicsBeginImageContextWithOptions(size, YES, 0.0);
    } else {
    CGPoint point = CGPointMake(0, 0);
    [blankThumb drawAtPoint:point];
    point = CGPointMake(3, 3);
    [image drawAtPoint:point];
    UIImage* finalImage = UIGraphicsGetImageFromCurrentImageContext();
    return finalImage;

Note the gross code on line 23 with the hardcoded (3,3). That works for my picture frame, you’ll probably want something different, or better yet, add that as a parameter to the method.

You just call it like this:

        log.thumbnailImage = [EnkiUtilities putThumbnailInFotoFrame: [UIImage imageNamed:@"cezanne.png"]];

Seems simple enough, so how did I resize it to be the correct size? I didn’t! In the real app I’m using Nimbus Kit NINetworkImageView to download my images from the server and Nimbus is handling that for me.